diff --git a/dist/download/version.json b/dist/download/version.json index 5cd1f350f0..8eeb4004e5 100644 --- a/dist/download/version.json +++ b/dist/download/version.json @@ -1,4 +1,4 @@ { - "version": "1.9.2", - "date": "March 19, 2024" + "version": "1.9.3", + "date": "April 24, 2024" } \ No newline at end of file diff --git a/src/assets/js/p5.min.js b/src/assets/js/p5.min.js index 510011427c..e3d31b7984 100644 --- a/src/assets/js/p5.min.js +++ b/src/assets/js/p5.min.js @@ -1,2 +1,2 @@ -/*! p5.js v1.9.2 March 19, 2024 */ -!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).p5=e()}(function(){var s,t,r;return function o(n,s,i){function a(t,e){if(!s[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(l)return l(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=s[t]={exports:{}},n[t][0].call(r.exports,function(e){return a(n[t][1][e]||e)},r,r.exports,o,n,s,i)}return s[t].exports}for(var l="function"==typeof require&&require,e=0;e>16&255,s[i++]=t>>8&255,s[i++]=255&t;2===o&&(t=l[e.charCodeAt(r)]<<2|l[e.charCodeAt(r+1)]>>4,s[i++]=255&t);1===o&&(t=l[e.charCodeAt(r)]<<10|l[e.charCodeAt(r+1)]<<4|l[e.charCodeAt(r+2)]>>2,s[i++]=t>>8&255,s[i++]=255&t);return s},r.fromByteArray=function(e){for(var t,r=e.length,o=r%3,n=[],s=0,i=r-o;s>18&63]+a[e>>12&63]+a[e>>6&63]+a[63&e]}(o));return n.join("")}(e,s,i>2]+a[t<<4&63]+"==")):2==o&&(t=(e[r-2]<<8)+e[r-1],n.push(a[t>>10]+a[t>>4&63]+a[t<<2&63]+"="));return n.join("")};for(var a=[],l=[],u="undefined"!=typeof Uint8Array?Uint8Array:Array,o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n=0,s=o.length;n>>1;case"base64":return M(e).length;default:if(n)return o?-1:E(e).length;t=(""+t).toLowerCase(),n=!0}}function r(e,t,r){var o,n=!1;if((t=void 0===t||t<0?0:t)>this.length)return"";if((r=void 0===r||r>this.length?this.length:r)<=0)return"";if((r>>>=0)<=(t>>>=0))return"";for(e=e||"utf8";;)switch(e){case"hex":var s=this,i=t,a=r,l=s.length;(!a||a<0||l=e.length){if(n)return-1;r=e.length-1}else if(r<0){if(!n)return-1;r=0}if("string"==typeof t&&(t=d.from(t,o)),d.isBuffer(t))return 0===t.length?-1:p(e,t,r,o,n);if("number"==typeof t)return t&=255,"function"==typeof Uint8Array.prototype.indexOf?(n?Uint8Array.prototype.indexOf:Uint8Array.prototype.lastIndexOf).call(e,t,r):p(e,[t],r,o,n);throw new TypeError("val must be string, number or Buffer")}function p(e,t,r,o,n){var s=1,i=e.length,a=t.length;if(void 0!==o&&("ucs2"===(o=String(o).toLowerCase())||"ucs-2"===o||"utf16le"===o||"utf-16le"===o)){if(e.length<2||t.length<2)return-1;i/=s=2,a/=2,r/=2}function l(e,t){return 1===s?e[t]:e.readUInt16BE(t*s)}if(n)for(var u=-1,c=r;c>8,o=o%256,n.push(o),n.push(r);return n}(t,e.length-r),e,r,o)}function T(e,t,r){r=Math.min(e.length,r);for(var o=[],n=t;n>>10&1023|55296),c=56320|1023&c),o.push(c),n+=d}var h=o,f=h.length;if(f<=v)return String.fromCharCode.apply(String,h);for(var p="",m=0;mt&&(e+=" ... "),""},e&&(d.prototype[e]=d.prototype.inspect),d.prototype.compare=function(e,t,r,o,n){if(C(e,Uint8Array)&&(e=d.from(e,e.offset,e.byteLength)),!d.isBuffer(e))throw new TypeError('The "target" argument must be one of type Buffer or Uint8Array. Received type '+typeof e);if(void 0===r&&(r=e?e.length:0),void 0===o&&(o=0),void 0===n&&(n=this.length),(t=void 0===t?0:t)<0||r>e.length||o<0||n>this.length)throw new RangeError("out of range index");if(n<=o&&r<=t)return 0;if(n<=o)return-1;if(r<=t)return 1;if(this===e)return 0;for(var s=(n>>>=0)-(o>>>=0),i=(r>>>=0)-(t>>>=0),a=Math.min(s,i),l=this.slice(o,n),u=e.slice(t,r),c=0;c>>=0,isFinite(r)?(r>>>=0,void 0===o&&(o="utf8")):(o=r,r=void 0)}var n=this.length-t;if((void 0===r||nthis.length)throw new RangeError("Attempt to write outside buffer bounds");o=o||"utf8";for(var s,i,a,l=!1;;)switch(o){case"hex":var u=this,c=e,d=t,h=r,f=(d=Number(d)||0,u.length-d);(!h||f<(h=Number(h)))&&(h=f),(f=c.length)/2e.length)throw new RangeError("Index out of range")}function _(e,t,r,o){if(r+o>e.length)throw new RangeError("Index out of range");if(r<0)throw new RangeError("Index out of range")}function j(e,t,r,o,n){return t=+t,r>>>=0,n||_(e,0,r,4),s.write(e,t,r,o,23,4),r+4}function x(e,t,r,o,n){return t=+t,r>>>=0,n||_(e,0,r,8),s.write(e,t,r,o,52,8),r+8}d.prototype.slice=function(e,t){var r=this.length,r=((e=~~e)<0?(e+=r)<0&&(e=0):r>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e],n=1,s=0;++s>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e+--t],n=1;0>>=0,t||m(e,1,this.length),this[e]},d.prototype.readUInt16LE=function(e,t){return e>>>=0,t||m(e,2,this.length),this[e]|this[e+1]<<8},d.prototype.readUInt16BE=function(e,t){return e>>>=0,t||m(e,2,this.length),this[e]<<8|this[e+1]},d.prototype.readUInt32LE=function(e,t){return e>>>=0,t||m(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},d.prototype.readUInt32BE=function(e,t){return e>>>=0,t||m(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},d.prototype.readIntLE=function(e,t,r){e>>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e],n=1,s=0;++s>>=0,t>>>=0,r||m(e,t,this.length);for(var o=t,n=1,s=this[e+--o];0>>=0,t||m(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},d.prototype.readInt16LE=function(e,t){e>>>=0,t||m(e,2,this.length);t=this[e]|this[e+1]<<8;return 32768&t?4294901760|t:t},d.prototype.readInt16BE=function(e,t){e>>>=0,t||m(e,2,this.length);t=this[e+1]|this[e]<<8;return 32768&t?4294901760|t:t},d.prototype.readInt32LE=function(e,t){return e>>>=0,t||m(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},d.prototype.readInt32BE=function(e,t){return e>>>=0,t||m(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},d.prototype.readFloatLE=function(e,t){return e>>>=0,t||m(e,4,this.length),s.read(this,e,!0,23,4)},d.prototype.readFloatBE=function(e,t){return e>>>=0,t||m(e,4,this.length),s.read(this,e,!1,23,4)},d.prototype.readDoubleLE=function(e,t){return e>>>=0,t||m(e,8,this.length),s.read(this,e,!0,52,8)},d.prototype.readDoubleBE=function(e,t){return e>>>=0,t||m(e,8,this.length),s.read(this,e,!1,52,8)},d.prototype.writeUIntLE=function(e,t,r,o){e=+e,t>>>=0,r>>>=0,o||b(this,e,t,r,Math.pow(2,8*r)-1,0);var n=1,s=0;for(this[t]=255&e;++s>>=0,r>>>=0,o||b(this,e,t,r,Math.pow(2,8*r)-1,0);var n=r-1,s=1;for(this[t+n]=255&e;0<=--n&&(s*=256);)this[t+n]=e/s&255;return t+r},d.prototype.writeUInt8=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,1,255,0),this[t]=255&e,t+1},d.prototype.writeUInt16LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,65535,0),this[t]=255&e,this[t+1]=e>>>8,t+2},d.prototype.writeUInt16BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,65535,0),this[t]=e>>>8,this[t+1]=255&e,t+2},d.prototype.writeUInt32LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,4294967295,0),this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e,t+4},d.prototype.writeUInt32BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,4294967295,0),this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},d.prototype.writeIntLE=function(e,t,r,o){e=+e,t>>>=0,o||b(this,e,t,r,(o=Math.pow(2,8*r-1))-1,-o);var n=0,s=1,i=0;for(this[t]=255&e;++n>0)-i&255;return t+r},d.prototype.writeIntBE=function(e,t,r,o){e=+e,t>>>=0,o||b(this,e,t,r,(o=Math.pow(2,8*r-1))-1,-o);var n=r-1,s=1,i=0;for(this[t+n]=255&e;0<=--n&&(s*=256);)e<0&&0===i&&0!==this[t+n+1]&&(i=1),this[t+n]=(e/s>>0)-i&255;return t+r},d.prototype.writeInt8=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,1,127,-128),this[t]=255&(e=e<0?255+e+1:e),t+1},d.prototype.writeInt16LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,32767,-32768),this[t]=255&e,this[t+1]=e>>>8,t+2},d.prototype.writeInt16BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,32767,-32768),this[t]=e>>>8,this[t+1]=255&e,t+2},d.prototype.writeInt32LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,2147483647,-2147483648),this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24,t+4},d.prototype.writeInt32BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,2147483647,-2147483648),this[t]=(e=e<0?4294967295+e+1:e)>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},d.prototype.writeFloatLE=function(e,t,r){return j(this,e,t,!0,r)},d.prototype.writeFloatBE=function(e,t,r){return j(this,e,t,!1,r)},d.prototype.writeDoubleLE=function(e,t,r){return x(this,e,t,!0,r)},d.prototype.writeDoubleBE=function(e,t,r){return x(this,e,t,!1,r)},d.prototype.copy=function(e,t,r,o){if(!d.isBuffer(e))throw new TypeError("argument should be a Buffer");if(r=r||0,o||0===o||(o=this.length),t>=e.length&&(t=e.length),(o=0=this.length)throw new RangeError("Index out of range");if(o<0)throw new RangeError("sourceEnd out of bounds");o>this.length&&(o=this.length);var n=(o=e.length-t>>=0,r=void 0===r?this.length:r>>>0,"number"==typeof(e=e||0))for(s=t;s>6|192,63&r|128)}else if(r<65536){if((t-=3)<0)break;s.push(r>>12|224,r>>6&63|128,63&r|128)}else{if(!(r<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;s.push(r>>18|240,r>>12&63|128,r>>6&63|128,63&r|128)}}return s}function M(e){return S.toByteArray(function(e){if((e=(e=e.split("=")[0]).trim().replace(w,"")).length<2)return"";for(;e.length%4!=0;)e+="=";return e}(e))}function k(e,t,r,o){for(var n=0;n=t.length||n>=e.length);++n)t[n+r]=e[n];return n}function C(e,t){return e instanceof t||null!=e&&null!=e.constructor&&null!=e.constructor.name&&e.constructor.name===t.name}function O(e){return e!=e}var A=function(){for(var e="0123456789abcdef",t=new Array(256),r=0;r<16;++r)for(var o=16*r,n=0;n<16;++n)t[o+n]=e[r]+e[n];return t}()}.call(this,P("buffer").Buffer)},{"base64-js":1,buffer:4,ieee754:251}],5:[function(e,t,r){t.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},{}],6:[function(e,t,r){var o=e("../internals/is-object");t.exports=function(e){if(o(e)||null===e)return e;throw TypeError("Can't set "+String(e)+" as a prototype")}},{"../internals/is-object":75}],7:[function(e,t,r){var o=e("../internals/well-known-symbol"),n=e("../internals/object-create"),e=e("../internals/object-define-property"),s=o("unscopables"),i=Array.prototype;null==i[s]&&e.f(i,s,{configurable:!0,value:n(null)}),t.exports=function(e){i[s][e]=!0}},{"../internals/object-create":91,"../internals/object-define-property":93,"../internals/well-known-symbol":149}],8:[function(e,t,r){"use strict";var o=e("../internals/string-multibyte").charAt;t.exports=function(e,t,r){return t+(r?o(e,t).length:1)}},{"../internals/string-multibyte":124}],9:[function(e,t,r){t.exports=function(e,t,r){if(e instanceof t)return e;throw TypeError("Incorrect "+(r?r+" ":"")+"invocation")}},{}],10:[function(e,t,r){var o=e("../internals/is-object");t.exports=function(e){if(o(e))return e;throw TypeError(String(e)+" is not an object")}},{"../internals/is-object":75}],11:[function(e,t,r){t.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},{}],12:[function(e,t,r){"use strict";function o(e){return l(e)&&u(E,c(e))}var n,s=e("../internals/array-buffer-native"),i=e("../internals/descriptors"),a=e("../internals/global"),l=e("../internals/is-object"),u=e("../internals/has"),c=e("../internals/classof"),d=e("../internals/create-non-enumerable-property"),h=e("../internals/redefine"),f=e("../internals/object-define-property").f,p=e("../internals/object-get-prototype-of"),m=e("../internals/object-set-prototype-of"),y=e("../internals/well-known-symbol"),e=e("../internals/uid"),g=a.Int8Array,v=g&&g.prototype,b=a.Uint8ClampedArray,b=b&&b.prototype,_=g&&p(g),j=v&&p(v),x=Object.prototype,w=x.isPrototypeOf,y=y("toStringTag"),S=e("TYPED_ARRAY_TAG"),T=s&&!!m&&"Opera"!==c(a.opera),e=!1,E={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8};for(n in E)a[n]||(T=!1);if((!T||"function"!=typeof _||_===Function.prototype)&&(_=function(){throw TypeError("Incorrect invocation")},T))for(n in E)a[n]&&m(a[n],_);if((!T||!j||j===x)&&(j=_.prototype,T))for(n in E)a[n]&&m(a[n].prototype,j);if(T&&p(b)!==j&&m(b,j),i&&!u(j,y))for(n in e=!0,f(j,y,{get:function(){return l(this)?this[S]:void 0}}),E)a[n]&&d(a[n],S,n);t.exports={NATIVE_ARRAY_BUFFER_VIEWS:T,TYPED_ARRAY_TAG:e&&S,aTypedArray:function(e){if(o(e))return e;throw TypeError("Target is not a typed array")},aTypedArrayConstructor:function(e){if(m){if(w.call(_,e))return e}else for(var t in E)if(u(E,n)){t=a[t];if(t&&(e===t||w.call(t,e)))return e}throw TypeError("Target is not a typed array constructor")},exportTypedArrayMethod:function(e,t,r){if(i){if(r)for(var o in E){o=a[o];o&&u(o.prototype,e)&&delete o.prototype[e]}j[e]&&!r||h(j,e,!r&&T&&v[e]||t)}},exportTypedArrayStaticMethod:function(e,t,r){var o,n;if(i){if(m){if(r)for(o in E)(n=a[o])&&u(n,e)&&delete n[e];if(_[e]&&!r)return;try{return h(_,e,!r&&T&&g[e]||t)}catch(e){}}for(o in E)!(n=a[o])||n[e]&&!r||h(n,e,t)}},isView:function(e){e=c(e);return"DataView"===e||u(E,e)},isTypedArray:o,TypedArray:_,TypedArrayPrototype:j}},{"../internals/array-buffer-native":11,"../internals/classof":29,"../internals/create-non-enumerable-property":38,"../internals/descriptors":43,"../internals/global":60,"../internals/has":61,"../internals/is-object":75,"../internals/object-define-property":93,"../internals/object-get-prototype-of":98,"../internals/object-set-prototype-of":102,"../internals/redefine":109,"../internals/uid":146,"../internals/well-known-symbol":149}],13:[function(e,t,D){"use strict";function r(e){return[255&e]}function o(e){return[255&e,e>>8&255]}function n(e){return[255&e,e>>8&255,e>>16&255,e>>24&255]}function s(e){return e[3]<<24|e[2]<<16|e[1]<<8|e[0]}function i(e){return O(e,23,4)}function F(e){return O(e,52,8)}function a(e,t){H(e[w],t,{get:function(){return b(this)[t]}})}function l(e,t,r,o){if(r=m(r),e=b(e),r+t>e.byteLength)throw C(S);var n=b(e.buffer).bytes,r=r+e.byteOffset,e=n.slice(r,r+t);return o?e:e.reverse()}function u(e,t,r,o,n,s){if(r=m(r),e=b(e),r+t>e.byteLength)throw C(S);for(var i=b(e.buffer).bytes,a=r+e.byteOffset,l=o(+n),u=0;uR;)(P=L[R++])in E||N(E,P,T[P]);c.constructor=E}g&&V(e)!==k&&g(e,k);var y=new M(new E(2)),I=e.setInt8;y.setInt8(0,2147483648),y.setInt8(1,2147483649),!y.getInt8(0)&&y.getInt8(1)||h(e,{setInt8:function(e,t){I.call(this,e,t<<24>>24)},setUint8:function(e,t){I.call(this,e,t<<24>>24)}},{unsafe:!0})}else E=function(e){p(this,E,j);e=m(e);_(this,{bytes:W.call(new Array(e),0),byteLength:e}),d||(this.byteLength=e)},M=function(e,t,r){p(this,M,x),p(e,E,x);var o=b(e).byteLength,t=B(t);if(t<0||o>24},getUint8:function(e){return l(this,1,e)[0]},getInt16:function(e){e=l(this,2,e,1>16},getUint16:function(e){e=l(this,2,e,1>>0},getFloat32:function(e){return A(l(this,4,e,1"+e+""}},{"../internals/require-object-coercible":114}],37:[function(e,t,r){"use strict";function o(){return this}var n=e("../internals/iterators-core").IteratorPrototype,s=e("../internals/object-create"),i=e("../internals/create-property-descriptor"),a=e("../internals/set-to-string-tag"),l=e("../internals/iterators");t.exports=function(e,t,r){t+=" Iterator";return e.prototype=s(n,{next:i(1,r)}),a(e,t,!1,!0),l[t]=o,e}},{"../internals/create-property-descriptor":39,"../internals/iterators":80,"../internals/iterators-core":79,"../internals/object-create":91,"../internals/set-to-string-tag":118}],38:[function(e,t,r){var o=e("../internals/descriptors"),n=e("../internals/object-define-property"),s=e("../internals/create-property-descriptor");t.exports=o?function(e,t,r){return n.f(e,t,s(1,r))}:function(e,t,r){return e[t]=r,e}},{"../internals/create-property-descriptor":39,"../internals/descriptors":43,"../internals/object-define-property":93}],39:[function(e,t,r){t.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},{}],40:[function(e,t,r){"use strict";var o=e("../internals/to-primitive"),n=e("../internals/object-define-property"),s=e("../internals/create-property-descriptor");t.exports=function(e,t,r){t=o(t);t in e?n.f(e,t,s(0,r)):e[t]=r}},{"../internals/create-property-descriptor":39,"../internals/object-define-property":93,"../internals/to-primitive":141}],41:[function(e,t,r){"use strict";function m(){return this}var y=e("../internals/export"),g=e("../internals/create-iterator-constructor"),v=e("../internals/object-get-prototype-of"),b=e("../internals/object-set-prototype-of"),_=e("../internals/set-to-string-tag"),j=e("../internals/create-non-enumerable-property"),x=e("../internals/redefine"),o=e("../internals/well-known-symbol"),w=e("../internals/is-pure"),S=e("../internals/iterators"),e=e("../internals/iterators-core"),T=e.IteratorPrototype,E=e.BUGGY_SAFARI_ITERATORS,M=o("iterator"),k="values",C="entries";t.exports=function(e,t,r,o,n,s,i){g(r,t,o);function a(e){if(e===n&&f)return f;if(!E&&e in d)return d[e];switch(e){case"keys":case k:case C:return function(){return new r(this,e)}}return function(){return new r(this)}}var l,u,o=t+" Iterator",c=!1,d=e.prototype,h=d[M]||d["@@iterator"]||n&&d[n],f=!E&&h||a(n),p="Array"==t&&d.entries||h;if(p&&(p=v(p.call(new e)),T!==Object.prototype&&p.next&&(w||v(p)===T||(b?b(p,T):"function"!=typeof p[M]&&j(p,M,m)),_(p,o,!0,!0),w&&(S[o]=m))),n==k&&h&&h.name!==k&&(c=!0,f=function(){return h.call(this)}),w&&!i||d[M]===f||j(d,M,f),S[t]=f,n)if(l={values:a(k),keys:s?f:a("keys"),entries:a(C)},i)for(u in l)!E&&!c&&u in d||x(d,u,l[u]);else y({target:t,proto:!0,forced:E||c},l);return l}},{"../internals/create-iterator-constructor":37,"../internals/create-non-enumerable-property":38,"../internals/export":50,"../internals/is-pure":76,"../internals/iterators":80,"../internals/iterators-core":79,"../internals/object-get-prototype-of":98,"../internals/object-set-prototype-of":102,"../internals/redefine":109,"../internals/set-to-string-tag":118,"../internals/well-known-symbol":149}],42:[function(e,t,r){var o=e("../internals/path"),n=e("../internals/has"),s=e("../internals/well-known-symbol-wrapped"),i=e("../internals/object-define-property").f;t.exports=function(e){var t=o.Symbol||(o.Symbol={});n(t,e)||i(t,e,{value:s.f(e)})}},{"../internals/has":61,"../internals/object-define-property":93,"../internals/path":105,"../internals/well-known-symbol-wrapped":148}],43:[function(e,t,r){e=e("../internals/fails");t.exports=!e(function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})},{"../internals/fails":51}],44:[function(e,t,r){var o=e("../internals/global"),e=e("../internals/is-object"),n=o.document,s=e(n)&&e(n.createElement);t.exports=function(e){return s?n.createElement(e):{}}},{"../internals/global":60,"../internals/is-object":75}],45:[function(e,t,r){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},{}],46:[function(e,t,r){e=e("../internals/engine-user-agent");t.exports=/(iphone|ipod|ipad).*applewebkit/i.test(e)},{"../internals/engine-user-agent":47}],47:[function(e,t,r){e=e("../internals/get-built-in");t.exports=e("navigator","userAgent")||""},{"../internals/get-built-in":57}],48:[function(e,t,r){var o,n,s=e("../internals/global"),e=e("../internals/engine-user-agent"),s=s.process,s=s&&s.versions,s=s&&s.v8;s?n=(o=s.split("."))[0]+o[1]:e&&(!(o=e.match(/Edge\/(\d+)/))||74<=o[1])&&(o=e.match(/Chrome\/(\d+)/))&&(n=o[1]),t.exports=n&&+n},{"../internals/engine-user-agent":47,"../internals/global":60}],49:[function(e,t,r){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},{}],50:[function(e,t,r){var u=e("../internals/global"),c=e("../internals/object-get-own-property-descriptor").f,d=e("../internals/create-non-enumerable-property"),h=e("../internals/redefine"),f=e("../internals/set-global"),p=e("../internals/copy-constructor-properties"),m=e("../internals/is-forced");t.exports=function(e,t){var r,o,n,s=e.target,i=e.global,a=e.stat,l=i?u:a?u[s]||f(s,{}):(u[s]||{}).prototype;if(l)for(r in t){if(o=t[r],n=e.noTargetGet?(n=c(l,r))&&n.value:l[r],!m(i?r:s+(a?".":"#")+r,e.forced)&&void 0!==n){if(typeof o==typeof n)continue;p(o,n)}(e.sham||n&&n.sham)&&d(o,"sham",!0),h(l,r,o,e)}}},{"../internals/copy-constructor-properties":33,"../internals/create-non-enumerable-property":38,"../internals/global":60,"../internals/is-forced":74,"../internals/object-get-own-property-descriptor":94,"../internals/redefine":109,"../internals/set-global":116}],51:[function(e,t,r){t.exports=function(e){try{return!!e()}catch(e){return!0}}},{}],52:[function(e,t,r){"use strict";e("../modules/es.regexp.exec");var u=e("../internals/redefine"),c=e("../internals/fails"),d=e("../internals/well-known-symbol"),h=e("../internals/regexp-exec"),f=e("../internals/create-non-enumerable-property"),p=d("species"),m=!c(function(){var e=/./;return e.exec=function(){var e=[];return e.groups={a:"7"},e},"7"!=="".replace(e,"$")}),y="$0"==="a".replace(/./,"$0"),e=d("replace"),g=!!/./[e]&&""===/./[e]("a","$0"),v=!c(function(){var e=/(?:)/,t=e.exec,e=(e.exec=function(){return t.apply(this,arguments)},"ab".split(e));return 2!==e.length||"a"!==e[0]||"b"!==e[1]});t.exports=function(r,e,t,o){var s,n,i=d(r),a=!c(function(){var e={};return e[i]=function(){return 7},7!=""[r](e)}),l=a&&!c(function(){var e=!1,t=/a/;return"split"===r&&((t={constructor:{}}).constructor[p]=function(){return t},t.flags="",t[i]=/./[i]),t.exec=function(){return e=!0,null},t[i](""),!e});a&&l&&("replace"!==r||m&&y&&!g)&&("split"!==r||v)||(s=/./[i],t=(l=t(i,""[r],function(e,t,r,o,n){return t.exec===h?a&&!n?{done:!0,value:s.call(t,r,o)}:{done:!0,value:e.call(r,t,o)}:{done:!1}},{REPLACE_KEEPS_$0:y,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:g}))[0],n=l[1],u(String.prototype,r,t),u(RegExp.prototype,i,2==e?function(e,t){return n.call(e,this,t)}:function(e){return n.call(e,this)})),o&&f(RegExp.prototype[i],"sham",!0)}},{"../internals/create-non-enumerable-property":38,"../internals/fails":51,"../internals/redefine":109,"../internals/regexp-exec":111,"../internals/well-known-symbol":149,"../modules/es.regexp.exec":192}],53:[function(e,t,r){"use strict";function h(e,t,r,o,n,s,i,a){for(var l,u=n,c=0,d=!!i&&m(i,a,3);c>1,u=23===t?f(2,-24)-f(2,-77):0,c=e<0||0===e&&1/e<0?1:0,d=0;for((e=h(e))!=e||e===1/0?(n=e!=e?1:0,o=r):(o=p(m(e)/y),e*(s=f(2,-o))<1&&(o--,s*=2),2<=(e+=1<=o+l?u/s:u*f(2,1-l))*s&&(o++,s/=2),r<=o+l?(n=0,o=r):1<=o+l?(n=(e*s-1)*f(2,t),o+=l):(n=e*f(2,l-1)*f(2,t),o=0));8<=t;i[d++]=255&n,n/=256,t-=8);for(o=o<>1,a=n-7,l=o-1,n=e[l--],u=127&n;for(n>>=7;0>=-a,a+=t;0"+e+""},m=function(){try{n=document.domain&&new ActiveXObject("htmlfile")}catch(e){}m=n?((e=n).write(p("")),e.close(),t=e.parentWindow.Object,e=null,t):(e=c("iframe"),t="java"+h+":",e.style.display="none",u.appendChild(e),e.src=String(t),(t=e.contentWindow.document).open(),t.write(p("document.F=Object")),t.close(),t.F);for(var e,t,r=a.length;r--;)delete m[d][a[r]];return m()};l[f]=!0,t.exports=Object.create||function(e,t){var r;return null!==e?(o[d]=s(e),r=new o,o[d]=null,r[f]=e):r=m(),void 0===t?r:i(r,t)}},{"../internals/an-object":10,"../internals/document-create-element":44,"../internals/enum-bug-keys":49,"../internals/hidden-keys":62,"../internals/html":64,"../internals/object-define-properties":92,"../internals/shared-key":119}],92:[function(e,t,r){var o=e("../internals/descriptors"),i=e("../internals/object-define-property"),a=e("../internals/an-object"),l=e("../internals/object-keys");t.exports=o?Object.defineProperties:function(e,t){a(e);for(var r,o=l(t),n=o.length,s=0;sn;)!i(o,r=t[n++])||~l(s,r)||s.push(r);return s}},{"../internals/array-includes":18,"../internals/has":61,"../internals/hidden-keys":62,"../internals/to-indexed-object":135}],100:[function(e,t,r){var o=e("../internals/object-keys-internal"),n=e("../internals/enum-bug-keys");t.exports=Object.keys||function(e){return o(e,n)}},{"../internals/enum-bug-keys":49,"../internals/object-keys-internal":99}],101:[function(e,t,r){"use strict";var o={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,s=n&&!o.call({1:2},1);r.f=s?function(e){e=n(this,e);return!!e&&e.enumerable}:o},{}],102:[function(e,t,r){var n=e("../internals/an-object"),s=e("../internals/a-possible-prototype");t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var r,o=!1,e={};try{(r=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(e,[]),o=e instanceof Array}catch(e){}return function(e,t){return n(e),s(t),o?r.call(e,t):e.__proto__=t,e}}():void 0)},{"../internals/a-possible-prototype":6,"../internals/an-object":10}],103:[function(e,t,r){"use strict";var o=e("../internals/to-string-tag-support"),n=e("../internals/classof");t.exports=o?{}.toString:function(){return"[object "+n(this)+"]"}},{"../internals/classof":29,"../internals/to-string-tag-support":142}],104:[function(e,t,r){var o=e("../internals/get-built-in"),n=e("../internals/object-get-own-property-names"),s=e("../internals/object-get-own-property-symbols"),i=e("../internals/an-object");t.exports=o("Reflect","ownKeys")||function(e){var t=n.f(i(e)),r=s.f;return r?t.concat(r(e)):t}},{"../internals/an-object":10,"../internals/get-built-in":57,"../internals/object-get-own-property-names":96,"../internals/object-get-own-property-symbols":97}],105:[function(e,t,r){e=e("../internals/global");t.exports=e},{"../internals/global":60}],106:[function(e,t,r){t.exports=function(e){try{return{error:!1,value:e()}}catch(e){return{error:!0,value:e}}}},{}],107:[function(e,t,r){var o=e("../internals/an-object"),n=e("../internals/is-object"),s=e("../internals/new-promise-capability");t.exports=function(e,t){return o(e),n(t)&&t.constructor===e?t:((0,(e=s.f(e)).resolve)(t),e.promise)}},{"../internals/an-object":10,"../internals/is-object":75,"../internals/new-promise-capability":87}],108:[function(e,t,r){var n=e("../internals/redefine");t.exports=function(e,t,r){for(var o in t)n(e,o,t[o],r);return e}},{"../internals/redefine":109}],109:[function(e,t,r){var i=e("../internals/global"),a=e("../internals/create-non-enumerable-property"),l=e("../internals/has"),u=e("../internals/set-global"),o=e("../internals/inspect-source"),e=e("../internals/internal-state"),n=e.get,c=e.enforce,d=String(String).split("String");(t.exports=function(e,t,r,o){var n=!!o&&!!o.unsafe,s=!!o&&!!o.enumerable,o=!!o&&!!o.noTargetGet;"function"==typeof r&&("string"!=typeof t||l(r,"name")||a(r,"name",t),c(r).source=d.join("string"==typeof t?t:"")),e===i?s?e[t]=r:u(t,r):(n?!o&&e[t]&&(s=!0):delete e[t],s?e[t]=r:a(e,t,r))})(Function.prototype,"toString",function(){return"function"==typeof this&&n(this).source||o(this)})},{"../internals/create-non-enumerable-property":38,"../internals/global":60,"../internals/has":61,"../internals/inspect-source":69,"../internals/internal-state":71,"../internals/set-global":116}],110:[function(e,t,r){var o=e("./classof-raw"),n=e("./regexp-exec");t.exports=function(e,t){var r=e.exec;if("function"==typeof r){r=r.call(e,t);if("object"!=typeof r)throw TypeError("RegExp exec method returned something other than an Object or null");return r}if("RegExp"!==o(e))throw TypeError("RegExp#exec called on incompatible receiver");return n.call(e,t)}},{"./classof-raw":28,"./regexp-exec":111}],111:[function(e,t,r){"use strict";var o,n,d=e("./regexp-flags"),e=e("./regexp-sticky-helpers"),h=RegExp.prototype.exec,f=String.prototype.replace,s=h,p=(o=/a/,n=/b*/g,h.call(o,"a"),h.call(n,"a"),0!==o.lastIndex||0!==n.lastIndex),m=e.UNSUPPORTED_Y||e.BROKEN_CARET,y=void 0!==/()??/.exec("")[1];t.exports=s=p||y||m?function(e){var t,r,o,n,s=this,i=m&&s.sticky,a=d.call(s),l=s.source,u=0,c=e;return i&&(-1===(a=a.replace("y","")).indexOf("g")&&(a+="g"),c=String(e).slice(s.lastIndex),0t&&(o=o.slice(0,t)),n?e+o:o+e)}}var s=e("../internals/to-length"),i=e("../internals/string-repeat"),a=e("../internals/require-object-coercible"),l=Math.ceil;t.exports={start:o(!1),end:o(!0)}},{"../internals/require-object-coercible":114,"../internals/string-repeat":128,"../internals/to-length":137}],127:[function(e,t,r){"use strict";function g(e){return e+22+75*(e<26)}function s(e){var t,r=[],o=(e=function(e){for(var t=[],r=0,o=e.length;rT((v-s)/d))throw RangeError(w);for(s+=(u-n)*d,n=u,c=0;cv)throw RangeError(w);if(t==n){for(var h=s,f=b;;f+=b){var p=f<=i?1:i+_<=f?_:f-i;if(h>1,e+=T(e/t);S*_>>1>>=1)&&(t+=t))1&o&&(r+=t);return r}},{"../internals/require-object-coercible":114,"../internals/to-integer":136}],129:[function(e,t,r){var o=e("../internals/fails"),n=e("../internals/whitespaces");t.exports=function(e){return o(function(){return!!n[e]()||"​…᠎"!="​…᠎"[e]()||n[e].name!==e})}},{"../internals/fails":51,"../internals/whitespaces":150}],130:[function(e,t,r){function o(t){return function(e){e=String(n(e));return 1&t&&(e=e.replace(s,"")),e=2&t?e.replace(i,""):e}}var n=e("../internals/require-object-coercible"),e="["+e("../internals/whitespaces")+"]",s=RegExp("^"+e+e+"*"),i=RegExp(e+e+"*$");t.exports={start:o(1),end:o(2),trim:o(3)}},{"../internals/require-object-coercible":114,"../internals/whitespaces":150}],131:[function(e,t,r){function o(e){return function(){x(e)}}function n(e){x(e.data)}function s(e){a.postMessage(e+"",f.protocol+"//"+f.host)}var i,a=e("../internals/global"),l=e("../internals/fails"),u=e("../internals/classof-raw"),c=e("../internals/function-bind-context"),d=e("../internals/html"),h=e("../internals/document-create-element"),e=e("../internals/engine-is-ios"),f=a.location,p=a.setImmediate,m=a.clearImmediate,y=a.process,g=a.MessageChannel,v=a.Dispatch,b=0,_={},j="onreadystatechange",x=function(e){var t;_.hasOwnProperty(e)&&(t=_[e],delete _[e],t())};p&&m||(p=function(e){for(var t=[],r=1;r=t.length?{value:e.target=void 0,done:!0}:"keys"==r?{value:o,done:!1}:"values"==r?{value:t[o],done:!1}:{value:[o,t[o]],done:!1}},"values"),s.Arguments=s.Array,n("keys"),n("values"),n("entries")},{"../internals/add-to-unscopables":7,"../internals/define-iterator":41,"../internals/internal-state":71,"../internals/iterators":80,"../internals/to-indexed-object":135}],165:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/indexed-object"),s=e("../internals/to-indexed-object"),e=e("../internals/array-method-is-strict"),i=[].join,n=n!=Object,e=e("join",",");o({target:"Array",proto:!0,forced:n||!e},{join:function(e){return i.call(s(this),void 0===e?",":e)}})},{"../internals/array-method-is-strict":22,"../internals/export":50,"../internals/indexed-object":67,"../internals/to-indexed-object":135}],166:[function(e,t,r){var o=e("../internals/export"),e=e("../internals/array-last-index-of");o({target:"Array",proto:!0,forced:e!==[].lastIndexOf},{lastIndexOf:e})},{"../internals/array-last-index-of":20,"../internals/export":50}],167:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/array-iteration").map,s=e("../internals/array-method-has-species-support"),e=e("../internals/array-method-uses-to-length"),s=s("map"),e=e("map");o({target:"Array",proto:!0,forced:!s||!e},{map:function(e){return n(this,e,1T;T++)l(b,x=S[T])&&!l(w,x)&&y(w,x,m(b,x));(w.prototype=_).constructor=w,a(s,v,w)}},{"../internals/classof-raw":28,"../internals/descriptors":43,"../internals/fails":51,"../internals/global":60,"../internals/has":61,"../internals/inherit-if-required":68,"../internals/is-forced":74,"../internals/object-create":91,"../internals/object-define-property":93,"../internals/object-get-own-property-descriptor":94,"../internals/object-get-own-property-names":96,"../internals/redefine":109,"../internals/string-trim":130,"../internals/to-primitive":141}],179:[function(e,t,r){e("../internals/export")({target:"Number",stat:!0},{isFinite:e("../internals/number-is-finite")})},{"../internals/export":50,"../internals/number-is-finite":89}],180:[function(e,t,r){"use strict";function c(e,t,r){return 0===t?r:t%2==1?c(e,t-1,r*e):c(e*e,t/2,r)}var o=e("../internals/export"),d=e("../internals/to-integer"),h=e("../internals/this-number-value"),f=e("../internals/string-repeat"),e=e("../internals/fails"),n=1..toFixed,p=Math.floor;o({target:"Number",proto:!0,forced:n&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==0xde0b6b3a7640080.toFixed(0))||!e(function(){n.call({})})},{toFixed:function(e){function t(e,t){for(var r=-1,o=t;++r<6;)o+=e*a[r],a[r]=o%1e7,o=p(o/1e7)}function r(e){for(var t=6,r=0;0<=--t;)r+=a[t],a[t]=p(r/e),r=r%e*1e7}function o(){for(var e,t=6,r="";0<=--t;)""===r&&0!==t&&0===a[t]||(e=String(a[t]),r=""===r?e:r+f.call("0",7-e.length)+e);return r}var n,s,i=h(this),e=d(e),a=[0,0,0,0,0,0],l="",u="0";if(e<0||20n;){var s,i,a,l=y[n++],u=t?l.ok:l.fail,c=l.resolve,d=l.reject,h=l.domain;try{u?(t||(p.rejection===oe&&function(e,t){v.call(g,function(){if(k)T.emit("rejectionHandled",e);else se(te,e,t.value)})}(f,p),p.rejection=A),!0===u?s=e:(h&&h.enter(),s=u(e),h&&(h.exit(),a=!0)),s===l.promise?d(w("Promise-chain cycle")):(i=ne(s))?i.call(s,c,d):c(s)):d(e)}catch(e){h&&!a&&h.exit(),d(e)}}p.reactions=[],p.notified=!1,m&&!p.rejection&&(r=f,o=p,v.call(g,function(){var e=o.value,t=ie(o);if(t&&(t=b(function(){k?T.emit("unhandledRejection",e,r):se(C,r,e)}),o.rejection=k||ie(o)?oe:A,t.error))throw t.value}))}))},se=function(e,t,r){var o;ee?((o=S.createEvent("Event")).promise=t,o.reason=r,o.initEvent(e,!1,!0),g.dispatchEvent(o)):o={promise:t,reason:r},(t=g["on"+e])?t(o):e===C&&Y("Unhandled promise rejection",r)},ie=function(e){return e.rejection!==A&&!e.parent},L=function(t,r,o,n){return function(e){t(r,o,e,n)}},R=function(e,t,r,o){t.done||(t.done=!0,(t=o?o:t).value=r,t.state=re,P(e,t,!0))},I=function(r,o,e,t){if(!o.done){o.done=!0,t&&(o=t);try{if(r===e)throw w("Promise can't be resolved itself");var n=ne(e);n?u(function(){var t={done:!1};try{n.call(e,L(I,r,t,o),L(R,r,t,o))}catch(e){R(r,t,e,o)}}):(o.value=e,o.state=O,P(r,o,!1))}catch(e){R(r,{done:!1},e,o)}}};e&&(x=function(e){z(this,x,_),c(e),r.call(this);var t=j(this);try{e(L(I,this,t),L(R,this,t))}catch(e){R(this,t,e)}},(r=function(e){K(this,{type:_,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:0,value:void 0})}).prototype=N(x.prototype,{then:function(e,t){var r=J(this),o=M(X(this,x));return o.ok="function"!=typeof e||e,o.fail="function"==typeof t&&t,o.domain=k?T.domain:void 0,r.parent=!0,r.reactions.push(o),0!=r.state&&P(this,r,!1),o.promise},catch:function(e){return this.then(void 0,e)}}),t=function(){var e=new r,t=j(e);this.promise=e,this.resolve=L(I,e,t),this.reject=L(R,e,t)},f.f=M=function(e){return e===x||e===o?new t:$(e)},i||"function"!=typeof l||(n=l.prototype.then,U(l.prototype,"then",function(e,t){var r=this;return new x(function(e,t){n.call(r,e,t)}).then(e,t)},{unsafe:!0}),"function"==typeof E&&s({global:!0,enumerable:!0,forced:!0},{fetch:function(e){return h(x,E.apply(g,arguments))}}))),s({global:!0,wrap:!0,forced:e},{Promise:x}),B(x,_,!1,!0),G(_),o=a(_),s({target:_,stat:!0,forced:e},{reject:function(e){var t=M(this);return t.reject.call(void 0,e),t.promise}}),s({target:_,stat:!0,forced:i||e},{resolve:function(e){return h(i&&this===o?x:this,e)}}),s({target:_,stat:!0,forced:m},{all:function(e){var a=this,t=M(a),l=t.resolve,u=t.reject,r=b(function(){var o=c(a.resolve),n=[],s=0,i=1;d(e,function(e){var t=s++,r=!1;n.push(void 0),i++,o.call(a,e).then(function(e){r||(r=!0,n[t]=e,--i||l(n))},u)}),--i||l(n)});return r.error&&u(r.value),t.promise},race:function(e){var r=this,o=M(r),n=o.reject,t=b(function(){var t=c(r.resolve);d(e,function(e){t.call(r,e).then(o.resolve,n)})});return t.error&&n(t.value),o.promise}})},{"../internals/a-function":5,"../internals/an-instance":9,"../internals/check-correctness-of-iteration":27,"../internals/classof-raw":28,"../internals/engine-v8-version":48,"../internals/export":50,"../internals/get-built-in":57,"../internals/global":60,"../internals/host-report-errors":63,"../internals/inspect-source":69,"../internals/internal-state":71,"../internals/is-forced":74,"../internals/is-object":75,"../internals/is-pure":76,"../internals/iterate":78,"../internals/microtask":82,"../internals/native-promise-constructor":83,"../internals/new-promise-capability":87,"../internals/perform":106,"../internals/promise-resolve":107,"../internals/redefine":109,"../internals/redefine-all":108,"../internals/set-species":117,"../internals/set-to-string-tag":118,"../internals/species-constructor":122,"../internals/task":131,"../internals/well-known-symbol":149}],189:[function(e,t,r){var o=e("../internals/export"),n=e("../internals/get-built-in"),s=e("../internals/a-function"),i=e("../internals/an-object"),a=e("../internals/is-object"),l=e("../internals/object-create"),u=e("../internals/function-bind"),e=e("../internals/fails"),c=n("Reflect","construct"),d=e(function(){function e(){}return!(c(function(){},[],e)instanceof e)}),h=!e(function(){c(function(){})}),n=d||h;o({target:"Reflect",stat:!0,forced:n,sham:n},{construct:function(e,t){s(e),i(t);var r=arguments.length<3?e:s(arguments[2]);if(h&&!d)return c(e,t,r);if(e==r){switch(t.length){case 0:return new e;case 1:return new e(t[0]);case 2:return new e(t[0],t[1]);case 3:return new e(t[0],t[1],t[2]);case 4:return new e(t[0],t[1],t[2],t[3])}var o=[null];return o.push.apply(o,t),new(u.apply(e,o))}o=r.prototype,r=l(a(o)?o:Object.prototype),o=Function.apply.call(e,r,t);return a(o)?o:r}})},{"../internals/a-function":5,"../internals/an-object":10,"../internals/export":50,"../internals/fails":51,"../internals/function-bind":56,"../internals/get-built-in":57,"../internals/is-object":75,"../internals/object-create":91}],190:[function(e,t,r){var o=e("../internals/export"),s=e("../internals/is-object"),i=e("../internals/an-object"),a=e("../internals/has"),l=e("../internals/object-get-own-property-descriptor"),u=e("../internals/object-get-prototype-of");o({target:"Reflect",stat:!0},{get:function e(t,r){var o,n=arguments.length<3?t:arguments[2];return i(t)===n?t[r]:(o=l.f(t,r))?a(o,"value")?o.value:void 0===o.get?void 0:o.get.call(n):s(o=u(t))?e(o,r,n):void 0}})},{"../internals/an-object":10,"../internals/export":50,"../internals/has":61,"../internals/is-object":75,"../internals/object-get-own-property-descriptor":94,"../internals/object-get-prototype-of":98}],191:[function(e,t,r){var o=e("../internals/descriptors"),n=e("../internals/global"),s=e("../internals/is-forced"),i=e("../internals/inherit-if-required"),a=e("../internals/object-define-property").f,l=e("../internals/object-get-own-property-names").f,u=e("../internals/is-regexp"),c=e("../internals/regexp-flags"),d=e("../internals/regexp-sticky-helpers"),h=e("../internals/redefine"),f=e("../internals/fails"),p=e("../internals/internal-state").set,m=e("../internals/set-species"),y=e("../internals/well-known-symbol")("match"),g=n.RegExp,v=g.prototype,b=/a/g,_=/a/g,j=new g(b)!==b,x=d.UNSUPPORTED_Y;if(o&&s("RegExp",!j||x||f(function(){return _[y]=!1,g(b)!=b||g(_)==_||"/a/i"!=g(b,"i")}))){for(var w=function(e,t){var r,o=this instanceof w,n=u(e),s=void 0===t;if(!o&&n&&e.constructor===w&&s)return e;j?n&&!s&&(e=e.source):e instanceof w&&(s&&(t=c.call(e)),e=e.source),x&&(r=!!t&&-1T;)!function(t){t in w||a(w,t,{configurable:!0,get:function(){return g[t]},set:function(e){g[t]=e}})}(S[T++]);(v.constructor=w).prototype=v,h(n,"RegExp",w)}m("RegExp")},{"../internals/descriptors":43,"../internals/fails":51,"../internals/global":60,"../internals/inherit-if-required":68,"../internals/internal-state":71,"../internals/is-forced":74,"../internals/is-regexp":77,"../internals/object-define-property":93,"../internals/object-get-own-property-names":96,"../internals/redefine":109,"../internals/regexp-flags":112,"../internals/regexp-sticky-helpers":113,"../internals/set-species":117,"../internals/well-known-symbol":149}],192:[function(e,t,r){"use strict";var o=e("../internals/export"),e=e("../internals/regexp-exec");o({target:"RegExp",proto:!0,forced:/./.exec!==e},{exec:e})},{"../internals/export":50,"../internals/regexp-exec":111}],193:[function(e,t,r){"use strict";var o=e("../internals/redefine"),n=e("../internals/an-object"),s=e("../internals/fails"),i=e("../internals/regexp-flags"),e="toString",a=RegExp.prototype,l=a[e],s=s(function(){return"/a/b"!=l.call({source:"a",flags:"b"})}),u=l.name!=e;(s||u)&&o(RegExp.prototype,e,function(){var e=n(this),t=String(e.source),r=e.flags;return"/"+t+"/"+String(void 0===r&&e instanceof RegExp&&!("flags"in a)?i.call(e):r)},{unsafe:!0})},{"../internals/an-object":10,"../internals/fails":51,"../internals/redefine":109,"../internals/regexp-flags":112}],194:[function(e,t,r){"use strict";var o=e("../internals/collection"),e=e("../internals/collection-strong");t.exports=o("Set",function(e){return function(){return e(this,arguments.length?arguments[0]:void 0)}},e)},{"../internals/collection":32,"../internals/collection-strong":30}],195:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/object-get-own-property-descriptor").f,s=e("../internals/to-length"),i=e("../internals/not-a-regexp"),a=e("../internals/require-object-coercible"),l=e("../internals/correct-is-regexp-logic"),e=e("../internals/is-pure"),u="".endsWith,c=Math.min,l=l("endsWith");o({target:"String",proto:!0,forced:!!(e||l||(!(o=n(String.prototype,"endsWith"))||o.writable))&&!l},{endsWith:function(e){var t=String(a(this)),r=(i(e),1=t.length?{value:void 0,done:!0}:(t=o(t,r),e.index+=t.length,{value:t,done:!1})})},{"../internals/define-iterator":41,"../internals/internal-state":71,"../internals/string-multibyte":124}],198:[function(e,t,r){"use strict";var o=e("../internals/fix-regexp-well-known-symbol-logic"),c=e("../internals/an-object"),d=e("../internals/to-length"),n=e("../internals/require-object-coercible"),h=e("../internals/advance-string-index"),f=e("../internals/regexp-exec-abstract");o("match",1,function(o,l,u){return[function(e){var t=n(this),r=null==e?void 0:e[o];return void 0!==r?r.call(e,t):new RegExp(e)[o](String(t))},function(e){var t=u(l,e,this);if(t.done)return t.value;var r=c(e),o=String(this);if(!r.global)return f(r,o);for(var n=r.unicode,s=[],i=r.lastIndex=0;null!==(a=f(r,o));){var a=String(a[0]);""===(s[i]=a)&&(r.lastIndex=h(o,d(r.lastIndex),n)),i++}return 0===i?null:s}]})},{"../internals/advance-string-index":8,"../internals/an-object":10,"../internals/fix-regexp-well-known-symbol-logic":52,"../internals/regexp-exec-abstract":110,"../internals/require-object-coercible":114,"../internals/to-length":137}],199:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/string-pad").start;o({target:"String",proto:!0,forced:e("../internals/string-pad-webkit-bug")},{padStart:function(e){return n(this,e,1]*>)/g,I=/\$([$&'`]|\d\d?)/g;o("replace",2,function(n,_,j,e){var x=e.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,w=e.REPLACE_KEEPS_$0,S=x?"$":"$0";return[function(e,t){var r=s(this),o=null==e?void 0:e[n];return void 0!==o?o.call(e,r,t):_.call(String(r),e,t)},function(e,t){if(!x&&w||"string"==typeof t&&-1===t.indexOf(S)){var r=j(_,e,this,t);if(r.done)return r.value}for(var o,n=T(e),s=String(this),i="function"==typeof t,a=(i||(t=String(t)),n.global),l=(a&&(o=n.unicode,n.lastIndex=0),[]);null!==(f=O(n,s))&&(l.push(f),a);)""===String(f[0])&&(n.lastIndex=C(s,M(n.lastIndex),o));for(var u,c="",d=0,h=0;h>>0;if(0==o)return[];if(void 0===e)return[r];if(!c(e))return p.call(r,e,o);for(var n,s,i,a=[],t=(e.ignoreCase?"i":"")+(e.multiline?"m":"")+(e.unicode?"u":"")+(e.sticky?"y":""),l=0,u=new RegExp(e.source,t+"g");(n=h.call(u,r))&&!(l<(s=u.lastIndex)&&(a.push(r.slice(l,n.index)),1=o));)u.lastIndex===n.index&&u.lastIndex++;return l===r.length?!i&&u.test("")||a.push(""):a.push(r.slice(l)),a.length>o?a.slice(0,o):a}:"0".split(void 0,0).length?function(e,t){return void 0===e&&0===t?[]:p.call(this,e,t)}:p;return[function(e,t){var r=d(this),o=null==e?void 0:e[n];return void 0!==o?o.call(e,r,t):y.call(String(r),e,t)},function(e,t){var r=m(y,e,this,t,y!==p);if(r.done)return r.value;var r=g(e),o=String(this),e=v(r,RegExp),n=r.unicode,s=(r.ignoreCase?"i":"")+(r.multiline?"m":"")+(r.unicode?"u":"")+(S?"y":"g"),i=new e(S?r:"^(?:"+r.source+")",s),a=void 0===t?w:t>>>0;if(0==a)return[];if(0===o.length)return null===j(i,o)?[o]:[];for(var l=0,u=0,c=[];ue.key){o.splice(t,0,e);break}t===s&&o.push(e)}r.updateURL()},forEach:function(e){for(var t,r=A(this).entries,o=v(e,16)return;a=0;while(h()){l=null;if(a>0)if(h()=="."&&a<4)n++;else return;if(!x.test(h()))return;while(x.test(h())){u=parseInt(h(),10);if(l===null)l=u;else if(l==0)return;else l=l*10+u;if(l>255)return;n++}t[r]=t[r]*256+l;a++;if(a==2||a==4)r++}if(a!=4)return;break}else if(h()==":"){n++;if(!h())return}else if(h())return;t[r++]=s}if(o!==null){c=r-o;r=7;while(r!=0&&c>0){d=t[r];t[r--]=t[o+c-1];t[o+--c]=d}}else if(r!=8)return;return t}(t.slice(1,-1)))?void(e.host=r):j;if(k(e))return t=z(t),ne.test(t)||null===(r=function(e){var t=e.split("."),r,o,n,s,i,a,l;if(t.length&&t[t.length-1]=="")t.pop();if((r=t.length)>4)return e;for(o=[],n=0;n1&&s.charAt(0)=="0"){i=ee.test(s)?16:8;s=s.slice(i==8?1:2)}if(s==="")a=0;else{if(!(i==10?re:i==8?te:oe).test(s))return e;a=parseInt(s,i)}o.push(a)}for(n=0;n=Z(256,5-r))return null}else if(a>255)return null}for(l=o.pop(),n=0;n":1,"`":1}),ce=d({},ue,{"#":1,"?":1,"{":1,"}":1}),T=d({},ce,{"/":1,":":1,";":1,"=":1,"@":1,"[":1,"\\":1,"]":1,"^":1,"|":1}),E=function(e,t){var r=V(e,0);return 32h,applyPalette:()=>function(e,t,r="rgb565"){if(!e||!e.buffer)throw new Error("quantize() expected RGBA Uint8Array data");if(!(e instanceof Uint8Array||e instanceof Uint8ClampedArray))throw new Error("quantize() expected RGBA Uint8Array data");if(256>24&255,c=l>>16&255,d=l>>8&255,l=255&l,h=A(l,d,c,u),h=h in a?a[h]:a[h]=function(t,r,o,n,s){let i=0,a=1e100;for(let e=0;ea||(l=u[0],(c+=v(l-t))>a||(l=u[1],(c+=v(l-r))>a||(l=u[2],(c+=v(l-o))>a||(a=c,i=e))))}return i}(l,d,c,u,t);i[e]=h}else{const g="rgb444"===r?P:O;for(let e=0;e>16&255,m=f>>8&255,f=255&f,y=g(f,m,p),y=y in a?a[y]:a[y]=function(t,r,o,n){let s=0,i=1e100;for(let e=0;ei||(a=l[1],(u+=v(a-r))>i||(a=l[2],(u+=v(a-o))>i||(i=u,s=e)))}return s}(f,m,p,t);i[e]=y}}return i},default:()=>f,nearestColor:()=>function(e,t,r=u){return e[l(e,t,r)]},nearestColorIndex:()=>l,nearestColorIndexWithDistance:()=>d,prequantize:()=>function(e,{roundRGB:r=5,roundAlpha:o=10,oneBitAlpha:n=null}={}){const s=new Uint32Array(e.buffer);for(let t=0;t>24&255;var a,l=i>>16&255,u=i>>8&255,i=255&i;e=c(e,o),n&&(a="number"==typeof n?n:127,e=e<=a?0:255),i=c(i,r),u=c(u,r),l=c(l,r),s[t]=e<<24|l<<16|u<<8|i<<0}},quantize:()=>function(e,t,r={}){var{format:o="rgb565",clearAlpha:n=!0,clearAlphaColor:s=0,clearAlphaThreshold:i=0,oneBitAlpha:a=!1}=r;if(!e||!e.buffer)throw new Error("quantize() expected RGBA Uint8Array data");if(!(e instanceof Uint8Array||e instanceof Uint8ClampedArray))throw new Error("quantize() expected RGBA Uint8Array data");e=new Uint32Array(e.buffer);let l=!1!==r.useSqrt;const u="rgba4444"===o,c=function(r,e){const t="rgb444"===e?4096:65536,o=new Array(t),n=r.length;if("rgba4444"===e)for(let t=0;t>24&255,a=s>>16&255,l=s>>8&255,s=255&s,u=A(s,l,a,i);let e=u in o?o[u]:o[u]=D();e.rc+=s,e.gc+=l,e.bc+=a,e.ac+=i,e.cnt++}else if("rgb444"===e)for(let t=0;t>16&255,h=c>>8&255,c=255&c,f=P(c,h,d);let e=f in o?o[f]:o[f]=D();e.rc+=c,e.gc+=h,e.bc+=d,e.cnt++}else for(let t=0;t>16&255,y=p>>8&255,p=255&p,g=O(p,y,m);let e=g in o?o[g]:o[g]=D();e.rc+=p,e.gc+=y,e.bc+=m,e.cnt++}return o}(e,o),d=c.length,h=d-1,f=new Uint32Array(d+1);for(var p=0,m=0;m>1,!(c[y=f[v]].err<=b));g=v)f[g]=y;f[g]=m}var _,j=p-t;for(m=0;m=_.mtm&&c[_.nn].mtm<=_.tm)break;_.mtm==h?x=f[1]=f[f[0]--]:(I(c,x,!1),_.tm=m);b=c[x].err;for(g=1;(v=g+g)<=f[0]&&(vc[f[v+1]].err&&v++,!(b<=c[y=f[v]].err));g=v)f[g]=y;f[g]=x}var w=c[_.nn],S=_.cnt,T=w.cnt,E=1/(S+T);u&&(_.ac=E*(S*_.ac+T*w.ac)),_.rc=E*(S*_.rc+T*w.rc),_.gc=E*(S*_.gc+T*w.gc),_.bc=E*(S*_.bc+T*w.bc),_.cnt+=w.cnt,_.mtm=++m,c[w.bk].fw=w.fw,c[w.fw].bk=w.bk,w.mtm=h}let M=[];for(m=0;;0){let e=L(Math.round(c[m].rc),0,255),t=L(Math.round(c[m].gc),0,255),r=L(Math.round(c[m].bc),0,255),o=255;u&&(o=L(Math.round(c[m].ac),0,255),a&&(k="number"==typeof a?a:127,o=o<=k?0:255),n&&o<=i&&(e=t=r=s,o=0));var k=u?[e,t,r,o]:[e,t,r];if(function(t,r){for(let e=0;efunction(r,o,e=5){if(r.length&&o.length){var n=r.map(e=>e.slice(0,3)),s=e*e,i=r[0].length;for(let t=0;ti?e.slice(0,3):e.slice();var a=d(n,e.slice(0,3),u),l=a[0],a=a[1];0>>0),0!=t&&(e=Math.max(e,256));const r=s;s=new Uint8Array(e),0>=8,c-=8;if((v>m||f)&&(f?(p=h,m=(1<>=8,c-=8;0>3}function A(e,t,r,o){return e>>4|240&t|(240&r)<<4|(240&o)<<8}function P(e,t,r){return e>>4<<8|240&t|r>>4}function L(e,t,r){return e>8&255)}function C(e,t){for(var r=0;r>1,c=-7,d=r?n-1:0,h=r?-1:1,n=e[t+d];for(d+=h,s=n&(1<<-c)-1,n>>=-c,c+=a;0>=-c,c+=o;0>1,d=23===n?Math.pow(2,-24)-Math.pow(2,-77):0,h=o?0:s-1,f=o?1:-1,s=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(a=isNaN(t)?1:0,i=u):(i=Math.floor(Math.log(t)/Math.LN2),t*(o=Math.pow(2,-i))<1&&(i--,o*=2),2<=(t+=1<=i+c?d/o:d*Math.pow(2,1-c))*o&&(i++,o/=2),u<=i+c?(a=0,i=u):1<=i+c?(a=(t*o-1)*Math.pow(2,n),i+=c):(a=t*Math.pow(2,c-1)*Math.pow(2,n),i=0));8<=n;e[r+h]=255&a,h+=f,a/=256,n-=8);for(i=i<Math.abs(e[0])&&(t=1),t=Math.abs(e[2])>Math.abs(e[t])?2:t}function M(e,t){e.f+=t.f,e.b.f+=t.b.f}function h(e,t,r){return e=e.a,t=t.a,r=r.a,t.b.a===e?r.b.a===e?g(t.a,r.a)?b(r.b.a,t.a,r.a)<=0:0<=b(t.b.a,r.a,t.a):b(r.b.a,e,r.a)<=0:r.b.a===e?0<=b(t.b.a,e,t.a):(t=v(t.b.a,e,t.a),(e=v(r.b.a,e,r.a))<=t)}function k(e){e.a.i=null;var t=e.e;t.a.c=t.c,t.c.a=t.a,e.e=null}function C(e,t){m(e.a),e.c=!1,(e.a=t).i=e}function O(e){for(var t=e.a.a;(e=G(e)).a.a===t;);return e.c&&(C(e,t=S(B(e).a.b,e.a.e)),e=G(e)),e}function q(e,t,r){var o=new N;return o.a=r,o.e=p(e.f,t.e,o),r.i=o}function X(e,t){switch(e.s){case 100130:return 0!=(1&t);case 100131:return 0!==t;case 100132:return 0>1]],a[i[u]])?U:ue)(r,u),a[s]=null,l[s]=r.b,r.b=s}else for(r.c[-(s+1)]=null;0Math.max(i.a,l.a))){if(g(s,i)){if(0r.f&&(r.f*=2,r.c=ae(r.c,r.f+1)),0===r.b?n=o:(n=r.b,r.b=r.c[r.b]),r.e[n]=t,r.c[n]=o,r.d[o]=n,r.h&&ue(r,o),n):(r=e.a++,e.c[r]=t,-(r+1))}function se(e){if(0===e.a)return le(e.b);var t=e.c[e.d[e.a-1]];if(0!==e.b.a&&g(F(e.b),t))return le(e.b);for(;--e.a,0e.a||g(o[i],o[l])){n[r[s]=i]=s;break}n[r[s]=l]=s,s=a}}function ue(e,t){for(var r=e.d,o=e.e,n=e.c,s=t,i=r[s];;){var a=s>>1,l=r[a];if(0==a||g(o[l],o[i])){n[r[s]=i]=s;break}n[r[s]=l]=s,s=a}}function N(){this.e=this.a=null,this.f=0,this.c=this.b=this.h=this.d=!1}function B(e){return e.e.c.b}function G(e){return e.e.a.b}(t=r.prototype).x=function(){I(this,0)},t.B=function(e,t){switch(e){case 100142:return;case 100140:switch(t){case 100130:case 100131:case 100132:case 100133:case 100134:return void(this.s=t)}break;case 100141:return void(this.m=!!t);default:return void l(this,100900)}l(this,100901)},t.y=function(e){switch(e){case 100142:return 0;case 100140:return this.s;case 100141:return this.m;default:l(this,100900)}return!1},t.A=function(e,t,r){this.j[0]=e,this.j[1]=t,this.j[2]=r},t.z=function(e,t){var r=t||null;switch(e){case 100100:case 100106:this.h=r;break;case 100104:case 100110:this.l=r;break;case 100101:case 100107:this.k=r;break;case 100102:case 100108:this.i=r;break;case 100103:case 100109:this.p=r;break;case 100105:case 100111:this.o=r;break;case 100112:this.r=r;break;default:l(this,100900)}},t.C=function(e,t){var r=!1,o=[0,0,0];I(this,2);for(var n=0;n<3;++n){var s=e[n];s<-1e150&&(s=-1e150,r=!0),1e150o[u]&&(o[u]=c,n[u]=r)}if(o[1]-a[1]>o[r=0]-a[0]&&(r=1),a[r=o[2]-a[2]>o[r]-a[r]?2:r]>=o[r])i[0]=0,i[1]=0,i[2]=1;else{for(a=l[r],n=n[r],l=[o=0,0,0],a=[a.g[0]-n.g[0],a.g[1]-n.g[1],a.g[2]-n.g[2]],u=[0,0,0],r=s.e;r!==s;r=r.e)u[0]=r.g[0]-n.g[0],u[1]=r.g[1]-n.g[1],u[2]=r.g[2]-n.g[2],l[0]=a[1]*u[2]-a[2]*u[1],l[1]=a[2]*u[0]-a[0]*u[2],l[2]=a[0]*u[1]-a[1]*u[0],o<(c=l[0]*l[0]+l[1]*l[1]+l[2]*l[2])&&(o=c,i[0]=l[0],i[1]=l[1],i[2]=l[2]);o<=0&&(i[0]=i[1]=i[2]=0,i[W(a)]=1)}s=!0}for(l=W(i),r=this.b.c,o=(l+1)%3,n=(l+2)%3,l=0>=1;)++n;if(i=1<>8&255,g[v++]=255&t,g[v++]=t>>8&255,g[v++]=(null!==b?128:0)|n,g[v++]=s,g[v++]=0,null!==b)for(var a=0,l=b.length;a>16&255,g[v++]=u>>8&255,g[v++]=255&u}if(null!==o){if(o<0||65535>8&255,g[v++]=0}var j=!1;this.addFrame=function(e,t,r,o,n,s){if(!0===j&&(--v,j=!1),s=void 0===s?{}:s,e<0||t<0||65535>=1;)++u;var l=1<>8&255,g[v++]=f,g[v++]=0),g[v++]=44,g[v++]=255&e,g[v++]=e>>8&255,g[v++]=255&t,g[v++]=t>>8&255,g[v++]=255&r,g[v++]=r>>8&255,g[v++]=255&o,g[v++]=o>>8&255,g[v++]=!0===i?128|u-1:0,!0===i)for(var p=0,m=a.length;p>16&255,g[v++]=y>>8&255,g[v++]=255&y}return v=function(t,r,e,o){t[r++]=e;var n=r++,s=1<>=8,c-=8,r===n+256&&(t[n]=255,n=r++)}function f(e){d|=e<>=8,c-=8,r===n+256&&(t[n]=255,n=r++);4096===l?(f(s),l=1+a,u=e+1,m={}):(1<>=l,c-=l,y==s)a=1+i,u=(1<<(l=n+1))-1,m=null;else{if(y==i)break;for(var g=y>8,++v;var _=b;if(o>=8;null!==m&&a<4096&&(p[a++]=m<<8|_,u+1<=a&&l<12&&(++l,u=u<<1|1)),m=y}}h!==o&&console.log("Warning, gif stream shorter than expected.")}try{r.GifWriter=o,r.GifReader=function(b){var e=0;if(71!==b[e++]||73!==b[e++]||70!==b[e++]||56!==b[e++]||56!=(b[e++]+1&253)||97!==b[e++])throw new Error("Invalid GIF 87a/89a header.");var _=b[e++]|b[e++]<<8,t=b[e++]|b[e++]<<8,r=b[e++],o=1<<1+(7&r),n=(b[e++],b[e++],null),s=null,i=(r>>7&&(n=e,e+=3*(s=o)),!0),a=[],l=0,u=null,c=0,d=null;for(this.width=_,this.height=t;i&&e>2&7,e++;break;case 254:for(;;){if(!(0<=(f=b[e++])))throw Error("Invalid block size");if(0===f)break;e+=f}break;default:throw new Error("Unknown graphic control label: 0x"+b[e-1].toString(16))}break;case 44:var f,p=b[e++]|b[e++]<<8,m=b[e++]|b[e++]<<8,y=b[e++]|b[e++]<<8,g=b[e++]|b[e++]<<8,v=b[e++],j=v>>6&1,x=1<<1+(7&v),w=n,S=s,T=!1,v=(v>>7&&(T=!0,w=e,e+=3*(S=x)),e);for(e++;;){if(!(0<=(f=b[e++])))throw Error("Invalid block size");if(0===f)break;e+=f}a.push({x:p,y:m,width:y,height:g,has_local_palette:T,palette_offset:w,palette_size:S,data_offset:v,data_length:e-v,transparent_index:u,interlaced:!!j,delay:l,disposal:c});break;case 59:i=!1;break;default:throw new Error("Unknown gif block: 0x"+b[e-1].toString(16))}this.numFrames=function(){return a.length},this.loopCount=function(){return d},this.frameInfo=function(e){if(e<0||e>=a.length)throw new Error("Frame index out of range.");return a[e]},this.decodeAndBlitFrameBGRA=function(e,t){for(var e=this.frameInfo(e),r=e.width*e.height,o=new Uint8Array(r),n=(E(b,e.data_offset,o,r),e.palette_offset),s=e.transparent_index,i=(null===s&&(s=256),e.width),a=_-i,l=i,u=4*(e.y*_+e.x),c=4*((e.y+e.height)*_+e.x),d=u,h=4*a,f=(!0===e.interlaced&&(h+=4*_*7),8),p=0,m=o.length;p>=1)),v===s?d+=4:(y=b[n+3*v],g=b[n+3*v+1],v=b[n+3*v+2],t[d++]=v,t[d++]=g,t[d++]=y,t[d++]=255),--l}},this.decodeAndBlitFrameRGBA=function(e,t){for(var e=this.frameInfo(e),r=e.width*e.height,o=new Uint8Array(r),n=(E(b,e.data_offset,o,r),e.palette_offset),s=e.transparent_index,i=(null===s&&(s=256),e.width),a=_-i,l=i,u=4*(e.y*_+e.x),c=4*((e.y+e.height)*_+e.x),d=u,h=4*a,f=(!0===e.interlaced&&(h+=4*_*7),8),p=0,m=o.length;p>=1)),v===s?d+=4:(y=b[n+3*v],g=b[n+3*v+1],v=b[n+3*v+2],t[d++]=y,t[d++]=g,t[d++]=v,t[d++]=255),--l}}}}catch(e){}},{}],254:[function(Pr,r,o){!function(Ar){var e,t;e=this,t=function(_){"use strict";function D(e){if(null==this)throw TypeError();var t,r=String(this),o=r.length,e=e?Number(e):0;if(!((e=e!=e?0:e)<0||o<=e))return 55296<=(t=r.charCodeAt(e))&&t<=56319&&e+1>>16-t;return e.tag>>>=t,e.bitcount-=t,o+r}function $(e,t){for(;e.bitcount<24;)e.tag|=e.source[e.sourceIndex++]<>>=1,r+=t.table[++n],0<=(o-=t.table[n]););return e.tag=s,e.bitcount-=n,t.trans[r+o]}function ee(e,t,r){for(;;){var o=$(e,t);if(256===o)return U;if(o<256)e.dest[e.destLen++]=o;else for(var n,s=b(e,H[o-=257],W[o]),o=$(e,r),i=n=e.destLen-b(e,q[o],X[o]);i>>=1,o=n,b(s,2,0)){case 0:r=function(e){for(var t,r;8this.x2&&(this.x2=e)),"number"==typeof t&&((isNaN(this.y1)||isNaN(this.y2))&&(this.y1=t,this.y2=t),tthis.y2&&(this.y2=t))},a.prototype.addX=function(e){this.addPoint(e,null)},a.prototype.addY=function(e){this.addPoint(null,e)},a.prototype.addBezier=function(e,t,r,o,n,s,i,a){var l=[e,t],u=[r,o],c=[n,s],d=[i,a];this.addPoint(e,t),this.addPoint(i,a);for(var h=0;h<=1;h++){var f,p=6*l[h]-12*u[h]+6*c[h],m=-3*l[h]+9*u[h]-9*c[h]+3*d[h],y=3*u[h]-3*l[h];0==m?0==p||0<(f=-y/p)&&f<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],f)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],f))):(f=Math.pow(p,2)-4*y*m)<0||(0<(y=(-p+Math.sqrt(f))/(2*m))&&y<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],y)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],y))),0<(y=(-p-Math.sqrt(f))/(2*m))&&y<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],y)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],y))))}},a.prototype.addQuad=function(e,t,r,o,n,s){r=e+2/3*(r-e),o=t+2/3*(o-t);this.addBezier(e,t,r,o,r+1/3*(n-e),o+1/3*(s-t),n,s)},h.prototype.moveTo=function(e,t){this.commands.push({type:"M",x:e,y:t})},h.prototype.lineTo=function(e,t){this.commands.push({type:"L",x:e,y:t})},h.prototype.curveTo=h.prototype.bezierCurveTo=function(e,t,r,o,n,s){this.commands.push({type:"C",x1:e,y1:t,x2:r,y2:o,x:n,y:s})},h.prototype.quadTo=h.prototype.quadraticCurveTo=function(e,t,r,o){this.commands.push({type:"Q",x1:e,y1:t,x:r,y:o})},h.prototype.close=h.prototype.closePath=function(){this.commands.push({type:"Z"})},h.prototype.extend=function(e){var t;if(e.commands)e=e.commands;else if(e instanceof a)return t=e,this.moveTo(t.x1,t.y1),this.lineTo(t.x2,t.y1),this.lineTo(t.x2,t.y2),this.lineTo(t.x1,t.y2),void this.close();Array.prototype.push.apply(this.commands,e)},h.prototype.getBoundingBox=function(){for(var e=new a,t=0,r=0,o=0,n=0,s=0;s>8&255,255&e]},l.USHORT=r(2),w.SHORT=function(e){return[(e=32768<=e?-(65536-e):e)>>8&255,255&e]},l.SHORT=r(2),w.UINT24=function(e){return[e>>16&255,e>>8&255,255&e]},l.UINT24=r(3),w.ULONG=function(e){return[e>>24&255,e>>16&255,e>>8&255,255&e]},l.ULONG=r(4),w.LONG=function(e){return[(e=2147483648<=e?-(4294967296-e):e)>>24&255,e>>16&255,e>>8&255,255&e]},l.LONG=r(4),w.FIXED=w.ULONG,l.FIXED=l.ULONG,w.FWORD=w.SHORT,l.FWORD=l.SHORT,w.UFWORD=w.USHORT,l.UFWORD=l.USHORT,w.LONGDATETIME=function(e){return[0,0,0,0,e>>24&255,e>>16&255,e>>8&255,255&e]},l.LONGDATETIME=r(8),w.TAG=function(e){return L.argument(4===e.length,"Tag should be exactly 4 ASCII characters."),[e.charCodeAt(0),e.charCodeAt(1),e.charCodeAt(2),e.charCodeAt(3)]},l.TAG=r(4),w.Card8=w.BYTE,l.Card8=l.BYTE,w.Card16=w.USHORT,l.Card16=l.USHORT,w.OffSize=w.BYTE,l.OffSize=l.BYTE,w.SID=w.USHORT,l.SID=l.USHORT,w.NUMBER=function(e){return-107<=e&&e<=107?[e+139]:108<=e&&e<=1131?[247+((e-=108)>>8),255&e]:-1131<=e&&e<=-108?[251+((e=-e-108)>>8),255&e]:-32768<=e&&e<=32767?w.NUMBER16(e):w.NUMBER32(e)},l.NUMBER=function(e){return w.NUMBER(e).length},w.NUMBER16=function(e){return[28,e>>8&255,255&e]},l.NUMBER16=r(3),w.NUMBER32=function(e){return[29,e>>24&255,e>>16&255,e>>8&255,255&e]},l.NUMBER32=r(5),w.REAL=function(e){for(var t=e.toString(),r=/\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(t),o=(r&&(r=parseFloat("1e"+((r[2]?+r[2]:0)+r[1].length)),t=(Math.round(e*r)/r).toString()),""),n=0,s=t.length;n>8&255,t[t.length]=255&o}return t},l.UTF16=function(e){return 2*e.length};var se,ie={"x-mac-croatian":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®Š™´¨≠ŽØ∞±≤≥∆µ∂∑∏š∫ªºΩžø¿¡¬√ƒ≈Ć«Č… ÀÃÕŒœĐ—“”‘’÷◊©⁄€‹›Æ»–·‚„‰ÂćÁčÈÍÎÏÌÓÔđÒÚÛÙıˆ˜¯πË˚¸Êæˇ","x-mac-cyrillic":"АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°Ґ£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµґЈЄєЇїЉљЊњјЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю","x-mac-gaelic":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØḂ±≤≥ḃĊċḊḋḞḟĠġṀæøṁṖṗɼƒſṠ«»… ÀÃÕŒœ–—“”‘’ṡẛÿŸṪ€‹›Ŷŷṫ·Ỳỳ⁊ÂÊÁËÈÍÎÏÌÓÔ♣ÒÚÛÙıÝýŴŵẄẅẀẁẂẃ","x-mac-greek":"Ĺ²É³ÖÜ΅àâä΄¨çéèê룙î‰ôö¦€ùûü†ΓΔΘΛΞΠß®©ΣΪ§≠°·Α±≤≥¥ΒΕΖΗΙΚΜΦΫΨΩάΝ¬ΟΡ≈Τ«»… ΥΧΆΈœ–―“”‘’÷ΉΊΌΎέήίόΏύαβψδεφγηιξκλμνοπώρστθωςχυζϊϋΐΰ­","x-mac-icelandic":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûüÝ°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€ÐðÞþý·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-inuit":"ᐃᐄᐅᐆᐊᐋᐱᐲᐳᐴᐸᐹᑉᑎᑏᑐᑑᑕᑖᑦᑭᑮᑯᑰᑲᑳᒃᒋᒌᒍᒎᒐᒑ°ᒡᒥᒦ•¶ᒧ®©™ᒨᒪᒫᒻᓂᓃᓄᓅᓇᓈᓐᓯᓰᓱᓲᓴᓵᔅᓕᓖᓗᓘᓚᓛᓪᔨᔩᔪᔫᔭ… ᔮᔾᕕᕖᕗ–—“”‘’ᕘᕙᕚᕝᕆᕇᕈᕉᕋᕌᕐᕿᖀᖁᖂᖃᖄᖅᖏᖐᖑᖒᖓᖔᖕᙱᙲᙳᙴᙵᙶᖖᖠᖡᖢᖣᖤᖥᖦᕼŁł","x-mac-ce":"ÄĀāÉĄÖÜáąČäčĆć鏟ĎíďĒēĖóėôöõúĚěü†°Ę£§•¶ß®©™ę¨≠ģĮįĪ≤≥īĶ∂∑łĻļĽľĹĺŅņѬ√ńŇ∆«»… ňŐÕőŌ–—“”‘’÷◊ōŔŕŘ‹›řŖŗŠ‚„šŚśÁŤťÍŽžŪÓÔūŮÚůŰűŲųÝýķŻŁżĢˇ",macintosh:"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-romanian":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ĂȘ∞±≤≥¥µ∂∑∏π∫ªºΩăș¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›Țț‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-turkish":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸĞğİıŞş‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙˆ˜¯˘˙˚¸˝˛ˇ"},ae=(m.MACSTRING=function(e,t,r,o){var n=ie[o];if(void 0!==n){for(var s="",i=0;i>8&255,l+256&255)}return s})(e,t,r);return r},w.INDEX=function(e){for(var t=1,r=[t],o=[],n=0;n>8,t[c+1]=255&d,t=t.concat(o[u])}return t},l.TABLE=function(e){for(var t=0,r=e.fields.length,o=0;o>1,a.skip("uShort",3),y.glyphIndexMap={};for(var _,j=new R.Parser(g,v+b+14),x=new R.Parser(g,v+b+16+2*_),w=new R.Parser(g,v+b+16+4*_),S=new R.Parser(g,v+b+16+6*_),T=v+b+16+8*_,E=0;E<_-1;E+=1)for(var M=void 0,k=j.parseUShort(),C=x.parseUShort(),O=w.parseShort(),A=S.parseUShort(),P=C;P<=k;P+=1)0!==A?(T=(T=S.offset+S.relativeOffset-2)+A+2*(P-C),0!==(M=R.getUShort(g,T))&&(M=M+O&65535)):M=P+O&65535,y.glyphIndexMap[P]=M}return r},make:function(e){for(var t=!0,r=e.length-1;0>4,s=15&s;if(15==i)break;if(o+=n[i],15==s)break;o+=n[s]}return parseFloat(o)}if(32<=t&&t<=246)return t-139;if(247<=t&&t<=250)return 256*(t-247)+e.parseByte()+108;if(251<=t&&t<=254)return 256*-(t-251)-e.parseByte()-108;throw new Error("Invalid b0 "+t)}function Ie(e,t,r){var o=new R.Parser(e,t=void 0!==t?t:0),n=[],s=[];for(r=void 0!==r?r:e.length;o.relativeOffset>1,E.length=0,k=!0}return function e(t){for(var r,o,n,s,i,a,l,u,c,d,h,f,p=0;pMath.abs(f-A)?O=h+E.shift():A=f+E.shift(),T.curveTo(v,b,_,j,l,u),T.curveTo(c,d,h,f,O,A);break;default:console.log("Glyph "+g.index+": unknown operator 1200"+m),E.length=0}break;case 14:0>3;break;case 21:2>16),p+=2;break;case 29:i=E.pop()+y.gsubrsBias,(a=y.gsubrs[i])&&e(a);break;case 30:for(;0=r.begin&&e=c.length&&(s=o.parseChar(),r.names.push(o.parseString(s)));break;case 2.5:r.numberOfGlyphs=o.parseUShort(),r.offset=new Array(r.numberOfGlyphs);for(var a=0;at.value.tag?1:-1}),t.fields=t.fields.concat(o),t.fields=t.fields.concat(n),t}function xt(e,t,r){for(var o=0;o 123 are reserved for internal usage");f|=1<>>1,s=e[n].tag;if(s===t)return n;s>>1,s=e[n];if(s===t)return n;s>>1,i=(n=e[s]).start;if(i===t)return n;i(n=e[r-1]).end?0:n}function Mt(e,t){this.font=e,this.tableName=t}function kt(e){Mt.call(this,e,"gpos")}function i(e){Mt.call(this,e,"gsub")}function Ct(e,t,r){for(var o=e.subtables,n=0;nt.points.length-1||o.matchedPoints[1]>n.points.length-1)throw Error("Matched points out of range in "+t.name);var i=t.points[o.matchedPoints[0]],a=n.points[o.matchedPoints[1]],o={xScale:o.xScale,scale01:o.scale01,scale10:o.scale10,yScale:o.yScale,dx:0,dy:0},a=Lt([a],o)[0];o.dx=i.x-a.x,o.dy=i.y-a.y,s=Lt(n.points,o)}t.points=t.points.concat(s)}}return Rt(t.points)}(kt.prototype=Mt.prototype={searchTag:St,binSearch:Tt,getTable:function(e){var t=this.font.tables[this.tableName];return t=!t&&e?this.font.tables[this.tableName]=this.createDefaultTable():t},getScriptNames:function(){var e=this.getTable();return e?e.scripts.map(function(e){return e.tag}):[]},getDefaultScriptName:function(){var e=this.getTable();if(e){for(var t=!1,r=0;r=i[t-1].tag,"Features must be added in alphabetical order."),i.push(n={tag:r,feature:{params:0,lookupListIndexes:[]}}),s.push(t),n.feature}},getLookupTables:function(e,t,r,o,n){var e=this.getFeatureTable(e,t,r,n),s=[];if(e){for(var i,a=e.lookupListIndexes,l=this.font.tables[this.tableName].lookups,u=0;u",s),t.stack.push(Math.round(64*s))}function hr(e,t){var r=t.stack,o=r.pop(),n=t.fv,s=t.pv,i=t.ppem,a=t.deltaBase+16*(e-1),l=t.deltaShift,u=t.z0;_.DEBUG&&console.log(t.step,"DELTAP["+e+"]",o,r);for(var c=0;c>4)===i&&(0<=(h=(15&h)-8)&&h++,_.DEBUG&&console.log(t.step,"DELTAPFIX",d,"by",h*l),d=u[d],n.setRelative(d,d,h*l,s))}}function fr(e,t){var r=t.stack,o=r.pop();_.DEBUG&&console.log(t.step,"ROUND[]"),r.push(64*t.round(o/64))}function pr(e,t){var r=t.stack,o=r.pop(),n=t.ppem,s=t.deltaBase+16*(e-1),i=t.deltaShift;_.DEBUG&&console.log(t.step,"DELTAC["+e+"]",o,r);for(var a=0;a>4)===n&&(0<=(u=(15&u)-8)&&u++,u=u*i,_.DEBUG&&console.log(t.step,"DELTACFIX",l,"by",u),t.cvt[l]+=u)}}function mr(e,t){var r,o=t.stack,n=o.pop(),o=o.pop(),s=t.z2[n],i=t.z1[o];_.DEBUG&&console.log(t.step,"SDPVTL["+e+"]",n,o),n=e?(r=s.y-i.y,i.x-s.x):(r=i.x-s.x,i.y-s.y),t.dpv=qt(r,n)}function k(e,t){var r=t.stack,o=t.prog,n=t.ip;_.DEBUG&&console.log(t.step,"PUSHB["+e+"]");for(var s=0;s":"_")+(o?"R":"_")+(0===n?"Gr":1===n?"Bl":2===n?"Wh":"")+"]",e?u+"("+s.cvt[u]+","+a+")":"",l,"(d =",i,"->",y*m,")"),s.rp1=s.rp0,s.rp2=l,t&&(s.rp0=l)}Ft.prototype.exec=function(e,t){if("number"!=typeof t)throw new Error("Point size is not a number!");if(!(2",o),a.interpolate(d,s,i,l),a.touch(d)}e.loop=1},lr.bind(void 0,0),lr.bind(void 0,1),function(e){for(var t=e.stack,r=e.rp0,o=e.z0[r],n=e.loop,s=e.fv,i=e.pv,a=e.z1;n--;){var l=t.pop(),u=a[l];_.DEBUG&&console.log(e.step,(1'.concat(n,"").concat(t,""),this.dummyDOM||(this.dummyDOM=document.getElementById(o).parentNode),this.descriptions?this.descriptions.fallbackElements||(this.descriptions.fallbackElements={}):this.descriptions={fallbackElements:{}},this.descriptions.fallbackElements[e]?this.descriptions.fallbackElements[e].innerHTML!==n&&(this.descriptions.fallbackElements[e].innerHTML=n):this._describeElementHTML("fallback",e,n),r===this.LABEL&&(this.descriptions.labelElements||(this.descriptions.labelElements={}),this.descriptions.labelElements[e]?this.descriptions.labelElements[e].innerHTML!==n&&(this.descriptions.labelElements[e].innerHTML=n):this._describeElementHTML("label",e,n)))},s.default.prototype._describeHTML=function(e,t){var r,o=this.canvas.id;"fallback"===e?(this.dummyDOM.querySelector("#".concat(o+i))?this.dummyDOM.querySelector("#"+o+l).insertAdjacentHTML("beforebegin",'

')):(r='

'),this.dummyDOM.querySelector("#".concat(o,"accessibleOutput"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutput")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#".concat(o)).innerHTML=r),this.descriptions.fallback=this.dummyDOM.querySelector("#".concat(o).concat(a)),this.descriptions.fallback.innerHTML=t):"label"===e&&(this.dummyDOM.querySelector("#".concat(o+u))?this.dummyDOM.querySelector("#".concat(o+d))&&this.dummyDOM.querySelector("#".concat(o+d)).insertAdjacentHTML("beforebegin",'

')):(r='

'),this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#"+o).insertAdjacentHTML("afterend",r)),this.descriptions.label=this.dummyDOM.querySelector("#"+o+c),this.descriptions.label.innerHTML=t)},s.default.prototype._describeElementHTML=function(e,t,r){var o,n=this.canvas.id;"fallback"===e?(this.dummyDOM.querySelector("#".concat(n+i))?this.dummyDOM.querySelector("#"+n+l)||this.dummyDOM.querySelector("#"+n+a).insertAdjacentHTML("afterend",'
Canvas elements and their descriptions
')):(o='
Canvas elements and their descriptions
'),this.dummyDOM.querySelector("#".concat(n,"accessibleOutput"))?this.dummyDOM.querySelector("#".concat(n,"accessibleOutput")).insertAdjacentHTML("beforebegin",o):this.dummyDOM.querySelector("#"+n).innerHTML=o),(o=document.createElement("tr")).id=n+"_fte_"+t,this.dummyDOM.querySelector("#"+n+l).appendChild(o),this.descriptions.fallbackElements[t]=this.dummyDOM.querySelector("#".concat(n).concat("_fte_").concat(t)),this.descriptions.fallbackElements[t].innerHTML=r):"label"===e&&(this.dummyDOM.querySelector("#".concat(n+u))?this.dummyDOM.querySelector("#".concat(n+d))||this.dummyDOM.querySelector("#"+n+c).insertAdjacentHTML("afterend",'
')):(o='
'),this.dummyDOM.querySelector("#".concat(n,"accessibleOutputLabel"))?this.dummyDOM.querySelector("#".concat(n,"accessibleOutputLabel")).insertAdjacentHTML("beforebegin",o):this.dummyDOM.querySelector("#"+n).insertAdjacentHTML("afterend",o)),(e=document.createElement("tr")).id=n+"_lte_"+t,this.dummyDOM.querySelector("#"+n+d).appendChild(e),this.descriptions.labelElements[t]=this.dummyDOM.querySelector("#".concat(n).concat("_lte_").concat(t)),this.descriptions.labelElements[t].innerHTML=r)};e=s.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.ends-with":195,"core-js/modules/es.string.replace":201}],261:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.map"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.map"),e("core-js/modules/es.string.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.prototype._updateGridOutput=function(e){var t,r,o,n;this.dummyDOM.querySelector("#".concat(e,"_summary"))&&(t=this._accessibleOutputs[e],o=function(e,t,r,o){t="".concat(t," canvas, ").concat(r," by ").concat(o," pixels, contains ").concat(e[0]);t=(1===e[0]?"".concat(t," shape: "):"".concat(t," shapes: ")).concat(e[1]);return t}((r=function(e,t){var r,o="",n="",s=0;for(r in t){var i,a=0;for(i in t[r]){var l='
  • ').concat(t[r][i].color," ").concat(r,",");"line"===r?l+=" location = ".concat(t[r][i].pos,", length = ").concat(t[r][i].length," pixels"):(l+=" location = ".concat(t[r][i].pos),"point"!==r&&(l+=", area = ".concat(t[r][i].area," %")),l+="
    • "),o+=l,a++,s++}n=1').concat(t[r][a].color," ").concat(r,"    "):'').concat(t[r][a].color," ").concat(r," midpoint"),i[t[r][a].loc.locY][t[r][a].loc.locX]?i[t[r][a].loc.locY][t[r][a].loc.locX]=i[t[r][a].loc.locY][t[r][a].loc.locX]+" "+l:i[t[r][a].loc.locY][t[r][a].loc.locX]=l,n++}for(o in i){var u,c="";for(u in i[o])c+="",void 0!==i[o][u]&&(c+=i[o][u]),c+="";s=s+c+""}return s}(e,this.ingredients.shapes),o!==t.summary.innerHTML&&(t.summary.innerHTML=o),n!==t.map.innerHTML&&(t.map.innerHTML=n),r.details!==t.shapeDetails.innerHTML&&(t.shapeDetails.innerHTML=r.details),this._accessibleOutputs[e]=t)};e=e.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.from":161,"core-js/modules/es.array.map":167,"core-js/modules/es.string.iterator":197}],262:[function(e,t,r){"use strict";e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.map"),e("core-js/modules/es.number.to-fixed"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var o=(e=e("../core/main"))&&e.__esModule?e:{default:e};function l(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t')):this.dummyDOM.querySelector("#".concat(s)).innerHTML='
    '))):"Label"===t&&(r=s+e+(i=t),this.dummyDOM.querySelector("#".concat(o=s+"accessibleOutput"+t))||(this.dummyDOM.querySelector("#".concat(s,"_Label"))?this.dummyDOM.querySelector("#".concat(s,"_Label")):this.dummyDOM.querySelector("#".concat(s))).insertAdjacentHTML("afterend",'
    '))),this._accessibleOutputs[r]={},"textOutput"===e?(i="#".concat(s,"gridOutput").concat(i),n='
    Text Output

      '),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("beforebegin",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].list=this.dummyDOM.querySelector("#".concat(r,"_list"))):"gridOutput"===e&&(i="#".concat(s,"textOutput").concat(i),n='
      Grid Output

        '),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("afterend",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].map=this.dummyDOM.querySelector("#".concat(r,"_map"))),this._accessibleOutputs[r].shapeDetails=this.dummyDOM.querySelector("#".concat(r,"_shapeDetails")),this._accessibleOutputs[r].summary=this.dummyDOM.querySelector("#".concat(r,"_summary"))},o.default.prototype._updateAccsOutput=function(){var e=this.canvas.id;JSON.stringify(this.ingredients.shapes)===this.ingredients.pShapes&&this.ingredients.colors.background===this.ingredients.pBackground||(this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this._accessibleOutputs.text&&this._updateTextOutput(e+"textOutput"),this._accessibleOutputs.grid&&this._updateGridOutput(e+"gridOutput"),this._accessibleOutputs.textLabel&&this._updateTextOutput(e+"textOutputLabel"),this._accessibleOutputs.gridLabel&&this._updateGridOutput(e+"gridOutputLabel"))},o.default.prototype._accsBackground=function(e){this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this.ingredients.pBackground=this.ingredients.colors.background,this.ingredients.shapes={},this.ingredients.colors.backgroundRGBA!==e&&(this.ingredients.colors.backgroundRGBA=e,this.ingredients.colors.background=this._rgbColorName(e))},o.default.prototype._accsCanvasColors=function(e,t){"fill"===e?this.ingredients.colors.fillRGBA!==t&&(this.ingredients.colors.fillRGBA=t,this.ingredients.colors.fill=this._rgbColorName(t)):"stroke"===e&&this.ingredients.colors.strokeRGBA!==t&&(this.ingredients.colors.strokeRGBA=t,this.ingredients.colors.stroke=this._rgbColorName(t))},o.default.prototype._accsOutput=function(e,t){"ellipse"===e&&t[2]===t[3]?e="circle":"rectangle"===e&&t[2]===t[3]&&(e="square");var r,o,n={},s=!0,i=function(e,t){var r;e="rectangle"===e||"ellipse"===e||"arc"===e||"circle"===e||"square"===e?(r=Math.round(t[0]+t[2]/2),Math.round(t[1]+t[3]/2)):"triangle"===e?(r=(t[0]+t[2]+t[4])/3,(t[1]+t[3]+t[5])/3):"quadrilateral"===e?(r=(t[0]+t[2]+t[4]+t[6])/4,(t[1]+t[3]+t[5]+t[7])/4):"line"===e?(r=(t[0]+t[2])/2,(t[1]+t[3])/2):(r=t[0],t[1]);return[r,e]}(e,t);if("line"===e?(n.color=this.ingredients.colors.stroke,n.length=Math.round(this.dist(t[0],t[1],t[2],t[3])),r=this._getPos(t[0],[1]),o=this._getPos(t[2],[3]),n.loc=u(i,this.width,this.height),n.pos=r===o?"at ".concat(r):"from ".concat(r," to ").concat(o)):("point"===e?n.color=this.ingredients.colors.stroke:(n.color=this.ingredients.colors.fill,n.area=this._getArea(e,t)),n.pos=this._getPos.apply(this,l(i)),n.loc=u(i,this.width,this.height)),this.ingredients.shapes[e]){if(this.ingredients.shapes[e]!==[n]){for(var a in this.ingredients.shapes[e])JSON.stringify(this.ingredients.shapes[e][a])===JSON.stringify(n)&&(s=!1);!0===s&&this.ingredients.shapes[e].push(n)}}else this.ingredients.shapes[e]=[n]},o.default.prototype._getPos=function(e,t){var e=new DOMPointReadOnly(e,t),t=this._renderer.isP3D?new DOMMatrix(this._renderer.uMVMatrix.mat4):this.drawingContext.getTransform(),e=e.matrixTransform(t),t=e.x,e=e.y,r=this.width*this._pixelDensity,o=this.height*this._pixelDensity;return t<.4*r?e<.4*o?"top left":.6*oMath.PI?n+=o:n-=o)):"ellipse"===e||"circle"===e?n=3.14*t[2]/2*t[3]/2:"line"===e||"point"===e?n=0:"quadrilateral"===e?n=Math.abs((t[6]+t[0])*(t[7]-t[1])+(t[0]+t[2])*(t[1]-t[3])+(t[2]+t[4])*(t[3]-t[5])+(t[4]+t[6])*(t[5]-t[7]))/2:"rectangle"===e||"square"===e?n=t[2]*t[3]:"triangle"===e&&(n=Math.abs(t[0]*(t[3]-t[5])+t[2]*(t[5]-t[1])+t[4]*(t[1]-t[3]))/2),this.width*this._pixelDensity),i=this.height*this._pixelDensity,a=[new DOMPoint(0,0),new DOMPoint(s,0),new DOMPoint(s,i),new DOMPoint(0,i)],l=(this._renderer.isP3D?new DOMMatrix(this._renderer.uMVMatrix.mat4):this.drawingContext.getTransform()).inverse(),u=a.map(function(e){return e.matrixTransform(l)}),c=Math.abs((u[3].x+u[0].x)*(u[3].y-u[0].y)+(u[0].x+u[1].x)*(u[0].y-u[1].y)+(u[1].x+u[2].x)*(u[1].y-u[2].y)+(u[2].x+u[3].x)*(u[2].y-u[3].y))/2;return Math.round(100*n/c)};e=o.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.fill":155,"core-js/modules/es.array.from":161,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.map":167,"core-js/modules/es.number.to-fixed":180,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/web.dom-collections.iterator":243}],263:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.concat"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.prototype._updateTextOutput=function(e){var t,r,o,n;this.dummyDOM.querySelector("#".concat(e,"_summary"))&&(t=this._accessibleOutputs[e],o=function(e,t,r,o){r="Your output is a, ".concat(r," by ").concat(o," pixels, ").concat(t," canvas containing the following");r=1===e?"".concat(r," shape:"):"".concat(r," ").concat(e," shapes:");return r}((r=function(e,t){var r,o="",n=0;for(r in t)for(var s in t[r]){var i='
      • ').concat(t[r][s].color," ").concat(r,"");"line"===r?i+=", ".concat(t[r][s].pos,", ").concat(t[r][s].length," pixels long.
        • "):(i+=", at ".concat(t[r][s].pos),"point"!==r&&(i+=", covering ".concat(t[r][s].area,"% of the canvas")),i+="."),o+=i,n++}return{numShapes:n,listShapes:o}}(e,this.ingredients.shapes)).numShapes,this.ingredients.colors.background,this.width,this.height),n=function(e,t){var r,o="",n=0;for(r in t)for(var s in t[r]){var i='').concat(t[r][s].color," ").concat(r,"");"line"===r?i+="location = ".concat(t[r][s].pos,"length = ").concat(t[r][s].length," pixels"):(i+="location = ".concat(t[r][s].pos,""),"point"!==r&&(i+=" area = ".concat(t[r][s].area,"%")),i+=""),o+=i,n++}return o}(e,this.ingredients.shapes),o!==t.summary.innerHTML&&(t.summary.innerHTML=o),r.listShapes!==t.list.innerHTML&&(t.list.innerHTML=r.listShapes),n!==t.shapeDetails.innerHTML&&(t.shapeDetails.innerHTML=n),this._accessibleOutputs[e]=t)};e=e.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152}],264:[function(e,t,r){"use strict";var o=(o=e("./core/main"))&&o.__esModule?o:{default:o};e("./core/constants"),e("./core/environment"),e("./core/friendly_errors/stacktrace"),e("./core/friendly_errors/validate_params"),e("./core/friendly_errors/file_errors"),e("./core/friendly_errors/fes_core"),e("./core/friendly_errors/sketch_reader"),e("./core/helpers"),e("./core/legacy"),e("./core/preload"),e("./core/p5.Element"),e("./core/p5.Graphics"),e("./core/p5.Renderer"),e("./core/p5.Renderer2D"),e("./core/rendering"),e("./core/shim"),e("./core/structure"),e("./core/transform"),e("./core/shape/2d_primitives"),e("./core/shape/attributes"),e("./core/shape/curves"),e("./core/shape/vertex"),e("./accessibility/outputs"),e("./accessibility/textOutput"),e("./accessibility/gridOutput"),e("./accessibility/color_namer"),e("./color/color_conversion"),e("./color/creating_reading"),e("./color/p5.Color"),e("./color/setting"),e("./data/p5.TypedDict"),e("./data/local_storage.js"),e("./dom/dom"),e("./accessibility/describe"),e("./events/acceleration"),e("./events/keyboard"),e("./events/mouse"),e("./events/touch"),e("./image/filters"),e("./image/image"),e("./image/loading_displaying"),e("./image/p5.Image"),e("./image/pixels"),e("./io/files"),e("./io/p5.Table"),e("./io/p5.TableRow"),e("./io/p5.XML"),e("./math/calculation"),e("./math/math"),e("./math/noise"),e("./math/p5.Vector"),e("./math/random"),e("./math/trigonometry"),e("./typography/attributes"),e("./typography/loading_displaying"),e("./typography/p5.Font"),e("./utilities/array_functions"),e("./utilities/conversion"),e("./utilities/string_functions"),e("./utilities/time_date"),e("./webgl/3d_primitives"),e("./webgl/interaction"),e("./webgl/light"),e("./webgl/loading"),e("./webgl/material"),e("./webgl/p5.Camera"),e("./webgl/p5.DataArray"),e("./webgl/p5.Geometry"),e("./webgl/p5.Matrix"),e("./webgl/p5.RendererGL.Immediate"),e("./webgl/p5.RendererGL"),e("./webgl/p5.RendererGL.Retained"),e("./webgl/p5.Framebuffer"),e("./webgl/p5.Shader"),e("./webgl/p5.RenderBuffer"),e("./webgl/p5.Texture"),e("./webgl/text"),e("./core/init"),t.exports=o.default},{"./accessibility/color_namer":259,"./accessibility/describe":260,"./accessibility/gridOutput":261,"./accessibility/outputs":262,"./accessibility/textOutput":263,"./color/color_conversion":265,"./color/creating_reading":266,"./color/p5.Color":267,"./color/setting":268,"./core/constants":269,"./core/environment":270,"./core/friendly_errors/fes_core":271,"./core/friendly_errors/file_errors":272,"./core/friendly_errors/sketch_reader":273,"./core/friendly_errors/stacktrace":274,"./core/friendly_errors/validate_params":275,"./core/helpers":276,"./core/init":277,"./core/legacy":279,"./core/main":280,"./core/p5.Element":281,"./core/p5.Graphics":282,"./core/p5.Renderer":283,"./core/p5.Renderer2D":284,"./core/preload":285,"./core/rendering":286,"./core/shape/2d_primitives":287,"./core/shape/attributes":288,"./core/shape/curves":289,"./core/shape/vertex":290,"./core/shim":291,"./core/structure":292,"./core/transform":293,"./data/local_storage.js":294,"./data/p5.TypedDict":295,"./dom/dom":296,"./events/acceleration":297,"./events/keyboard":298,"./events/mouse":299,"./events/touch":300,"./image/filters":301,"./image/image":302,"./image/loading_displaying":303,"./image/p5.Image":304,"./image/pixels":305,"./io/files":306,"./io/p5.Table":307,"./io/p5.TableRow":308,"./io/p5.XML":309,"./math/calculation":310,"./math/math":311,"./math/noise":312,"./math/p5.Vector":313,"./math/random":314,"./math/trigonometry":315,"./typography/attributes":316,"./typography/loading_displaying":317,"./typography/p5.Font":318,"./utilities/array_functions":319,"./utilities/conversion":320,"./utilities/string_functions":321,"./utilities/time_date":322,"./webgl/3d_primitives":323,"./webgl/interaction":325,"./webgl/light":326,"./webgl/loading":327,"./webgl/material":328,"./webgl/p5.Camera":329,"./webgl/p5.DataArray":330,"./webgl/p5.Framebuffer":331,"./webgl/p5.Geometry":332,"./webgl/p5.Matrix":333,"./webgl/p5.RenderBuffer":334,"./webgl/p5.RendererGL":337,"./webgl/p5.RendererGL.Immediate":335,"./webgl/p5.RendererGL.Retained":336,"./webgl/p5.Shader":338,"./webgl/p5.Texture":339,"./webgl/text":340}],265:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.ColorConversion={_hsbaToHSLA:function(e){var t=e[0],r=e[1],o=e[2],n=(2-r)*o/2;return 0!=n&&(1==n?r=0:n<.5?r/=2-r:r=r*o/(2-2*n)),[t,r,n,e[3]]},_hsbaToRGBA:function(e){var t,r,o,n,s,i=6*e[0],a=e[1],l=e[2];return 0===a?[l,l,l,e[3]]:(r=l*(1-a),o=l*(1-a*(i-(t=Math.floor(i)))),a=l*(1-a*(1+t-i)),i=1===t?(n=o,s=l,r):2===t?(n=r,s=l,a):3===t?(n=r,s=o,l):4===t?(n=a,s=r,l):5===t?(n=l,s=r,o):(n=l,s=a,r),[n,s,i,e[3]])},_hslaToHSBA:function(e){var t=e[0],r=e[1],o=e[2],n=o<.5?(1+r)*o:o+r-o*r;return[t,r=2*(n-o)/n,n,e[3]]},_hslaToRGBA:function(e){var t,r=6*e[0],o=e[1],n=e[2];return 0===o?[n,n,n,e[3]]:[(t=function(e,t,r){return e<0?e+=6:6<=e&&(e-=6),e<1?t+(r-t)*e:e<3?r:e<4?t+(r-t)*(4-e):t})(2+r,o=2*n-(n=n<.5?(1+o)*n:n+o-n*o),n),t(r,o,n),t(r-2,o,n),e[3]]},_rgbaToHSBA:function(e){var t,r,o=e[0],n=e[1],s=e[2],i=Math.max(o,n,s),a=i-Math.min(o,n,s);return 0==a?r=t=0:(r=a/i,o===i?t=(n-s)/a:n===i?t=2+(s-o)/a:s===i&&(t=4+(o-n)/a),t<0?t+=6:6<=t&&(t-=6)),[t/6,r,i,e[3]]},_rgbaToHSLA:function(e){var t,r,o=e[0],n=e[1],s=e[2],i=Math.max(o,n,s),a=Math.min(o,n,s),l=i+a,a=i-a;return 0==a?r=t=0:(r=l<1?a/l:a/(2-l),o===i?t=(n-s)/a:n===i?t=2+(s-o)/a:s===i&&(t=4+(o-n)/a),t<0?t+=6:6<=t&&(t-=6)),[t/6,r,l/2,e[3]]}};e=e.default.ColorConversion;r.default=e},{"../core/main":280}],266:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.map"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var l=(n=e("../core/main"))&&n.__esModule?n:{default:n},u=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}e("./p5.Color"),e("../core/friendly_errors/validate_params"),e("../core/friendly_errors/file_errors"),e("../core/friendly_errors/fes_core"),l.default.prototype.alpha=function(e){return l.default._validateParameters("alpha",arguments),this.color(e)._getAlpha()},l.default.prototype.blue=function(e){return l.default._validateParameters("blue",arguments),this.color(e)._getBlue()},l.default.prototype.brightness=function(e){return l.default._validateParameters("brightness",arguments),this.color(e)._getBrightness()},l.default.prototype.color=function(){for(var e,t=arguments.length,r=new Array(t),o=0;os[0]?s[0]+=1:n[0]+=1),1<=(o=this.lerp(n[0],s[0],r))&&--o),e=this.lerp(n[1],s[1],r),t=this.lerp(n[2],s[2],r),n=this.lerp(n[3],s[3],r),o*=a[i][0],e*=a[i][1],t*=a[i][2],n*=a[i][3],this.color(o,e,t,n)},l.default.prototype.lightness=function(e){return l.default._validateParameters("lightness",arguments),this.color(e)._getLightness()},l.default.prototype.red=function(e){return l.default._validateParameters("red",arguments),this.color(e)._getRed()},l.default.prototype.saturation=function(e){return l.default._validateParameters("saturation",arguments),this.color(e)._getSaturation()};var n=l.default;r.default=n},{"../core/constants":269,"../core/friendly_errors/fes_core":271,"../core/friendly_errors/file_errors":272,"../core/friendly_errors/validate_params":275,"../core/main":280,"./p5.Color":267,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.map":167,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],267:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.trim"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.trim"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=s(e("../core/main")),d=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants")),h=s(e("./color_conversion"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}function s(e){return e&&e.__esModule?e:{default:e}}function l(e,t){for(var r=0;r"].indexOf(r[0])?void 0:r[0],lineNumber:r[1],columnNumber:r[2],source:e}},this)},parseFFOrSafari:function(e){return e.stack.split("\n").filter(function(e){return!e.match(o)},this).map(function(e){var t,r;return-1===(e=-1 eval")?e.replace(/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,":$1"):e).indexOf("@")&&-1===e.indexOf(":")?{functionName:e}:{functionName:(r=e.match(t=/((.*".+"[^@]*)?[^@]*)(?:@)/))&&r[1]?r[1]:void 0,fileName:(r=this.extractLocation(e.replace(t,"")))[0],lineNumber:r[1],columnNumber:r[2],source:e}},this)},parseOpera:function(e){return!e.stacktrace||-1e.stacktrace.split("\n").length?this.parseOpera9(e):e.stack?this.parseOpera11(e):this.parseOpera10(e)},parseOpera9:function(e){for(var t=/Line (\d+).*script (?:in )?(\S+)/i,r=e.message.split("\n"),o=[],n=2,s=r.length;n/,"$2").replace(/\([^)]*\)/g,"")||void 0,args:void 0===(t=r.match(/\(([^)]*)\)/)?r.replace(/^[^(]+\(([^)]*)\)$/,"$1"):t)||"[arguments not available]"===t?void 0:t.split(","),fileName:o[0],lineNumber:o[1],columnNumber:o[2],source:e}},this)}}}e.default._getErrorStackParser=function(){return new o};e=e.default;r.default=e},{"../main":280,"core-js/modules/es.array.filter":156,"core-js/modules/es.array.index-of":163,"core-js/modules/es.array.join":165,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.match":198,"core-js/modules/es.string.replace":201,"core-js/modules/es.string.split":203}],275:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.for-each"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.last-index-of"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.function.name"),e("core-js/modules/es.map"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.get-prototype-of"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.reflect.construct"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.for-each"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.for-each"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.last-index-of"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.function.name"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.for-each"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=(n=e("../main"))&&n.__esModule?n:{default:n};(function(e){if(e&&e.__esModule)return;if(null===e||"object"!==a(e)&&"function"!=typeof e)return;var t=i();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o)})(e("../constants")),e("../internationalization");function i(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,i=function(){return e},e)}function a(e){return(a="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}n.default._validateParameters=n.default._clearValidateParamsCache=function(){};e=n.default;r.default=e},{"../../../docs/parameterData.json":void 0,"../constants":269,"../internationalization":278,"../main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.for-each":160,"core-js/modules/es.array.includes":162,"core-js/modules/es.array.index-of":163,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.join":165,"core-js/modules/es.array.last-index-of":166,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.function.name":173,"core-js/modules/es.map":174,"core-js/modules/es.number.constructor":178,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.get-prototype-of":185,"core-js/modules/es.object.keys":186,"core-js/modules/es.object.to-string":187,"core-js/modules/es.reflect.construct":189,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.set":194,"core-js/modules/es.string.includes":196,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.split":203,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.for-each":242,"core-js/modules/web.dom-collections.iterator":243}],276:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var s=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("./constants"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}r.default={modeAdjust:function(e,t,r,o,n){return n===s.CORNER?{x:e,y:t,w:r,h:o}:n===s.CORNERS?{x:e,y:t,w:r-e,h:o-t}:n===s.RADIUS?{x:e-r,y:t-o,w:2*r,h:2*o}:n===s.CENTER?{x:e-.5*r,y:t-.5*o,w:r,h:o}:void 0}}},{"./constants":269,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],277:[function(e,t,r){"use strict";e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator");var o=(n=e("../core/main"))&&n.__esModule?n:{default:n};e("./internationalization");var n=Promise.resolve();Promise.all([new Promise(function(e,t){"complete"===document.readyState?e():window.addEventListener("load",e,!1)}),n]).then(function(){void 0!==window._setupDone?console.warn("p5.js seems to have been imported multiple times. Please remove the duplicate import"):window.mocha||(window.setup&&"function"==typeof window.setup||window.draw&&"function"==typeof window.draw)&&!o.default.instance&&new o.default})},{"../core/main":280,"./internationalization":278,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.to-string":187,"core-js/modules/es.promise":188,"core-js/modules/es.string.iterator":197,"core-js/modules/web.dom-collections.iterator":243}],278:[function(e,t,r){"use strict";e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.setTranslatorLanguage=r.currentTranslatorLanguage=r.availableTranslatorLanguages=r.initialize=r.translator=void 0;var n,s,o=a(e("i18next")),i=a(e("i18next-browser-languagedetector"));function a(e){return e&&e.__esModule?e:{default:e}}function l(e,t){for(var r=0;r=i.width||t>=i.height?[0,0,0,0]:this._getPixel(e,t);n=new a.default.Image(r*s,o*s);return n.pixelDensity(s),n.canvas.getContext("2d").drawImage(i,e,t,r*s,o*s,0,0,r*s,o*s),n}},{key:"textLeading",value:function(e){return"number"==typeof e?(this._setProperty("_leadingSet",!0),this._setProperty("_textLeading",e),this._pInst):this._textLeading}},{key:"textStyle",value:function(e){return e?(e!==A.NORMAL&&e!==A.ITALIC&&e!==A.BOLD&&e!==A.BOLDITALIC||this._setProperty("_textStyle",e),this._applyTextProperties()):this._textStyle}},{key:"textAscent",value:function(){return null===this._textAscent&&this._updateTextMetrics(),this._textAscent}},{key:"textDescent",value:function(){return null===this._textDescent&&this._updateTextMetrics(),this._textDescent}},{key:"textAlign",value:function(e,t){return void 0!==e?(this._setProperty("_textAlign",e),void 0!==t&&this._setProperty("_textBaseline",t),this._applyTextProperties()):{horizontal:this._textAlign,vertical:this._textBaseline}}},{key:"textWrap",value:function(e){return this._setProperty("_textWrap",e),this._textWrap}},{key:"text",value:function(e,t,r,o,n){var s,i,a,l,u=this._pInst,c=this._textWrap,d=Number.MAX_VALUE,h=r;if((this._doFill||this._doStroke)&&void 0!==e){if(s=(e=(e="string"!=typeof e?e.toString():e).replace(/(\t)/g," ")).split("\n"),void 0!==o){switch(this._rectMode===A.CENTER&&(t-=o/2),this._textAlign){case A.CENTER:t+=o/2;break;case A.RIGHT:t+=o}if(void 0!==n){this._rectMode===A.CENTER&&(r-=n/2,h-=n/2);var e=r,f=u.textAscent();switch(this._textBaseline){case A.BOTTOM:l=r+n,r=Math.max(l,r),h+=f;break;case A.CENTER:l=r+n/2,r=Math.max(l,r),h+=f/2}d=r+n-f,this._textBaseline===A.CENTER&&(d=e+n-f/2)}else this._textBaseline!==A.BOTTOM&&this._textBaseline!==A.CENTER||(h=r-(e=u.textSize()*this._textLeading)/2,d=r+e/2);if(c===A.WORD){for(var p=[],m=0;ma.HALF_PI&&e<=3*a.HALF_PI?Math.atan(r/o*Math.tan(e))+a.PI:Math.atan(r/o*Math.tan(e))+a.TWO_PI,t=t<=a.HALF_PI?Math.atan(r/o*Math.tan(t)):t>a.HALF_PI&&t<=3*a.HALF_PI?Math.atan(r/o*Math.tan(t))+a.PI:Math.atan(r/o*Math.tan(t))+a.TWO_PI),th||Math.abs(this.accelerationY-this.pAccelerationY)>h||Math.abs(this.accelerationZ-this.pAccelerationZ)>h)&&s.deviceMoved(),"function"==typeof s.deviceTurned&&(t=this._toDegrees(this.rotationX)+180,r=this._toDegrees(this.pRotationX)+180,e=i+180,0>>16,e[1+r]=(65280&t[o])>>>8,e[2+r]=255&t[o],e[3+r]=(4278190080&t[o])>>>24},_toImageData:function(e){return e instanceof ImageData?e:e.getContext("2d").getImageData(0,0,e.width,e.height)},_createImageData:function(e,t){return V._tmpCanvas=document.createElement("canvas"),V._tmpCtx=V._tmpCanvas.getContext("2d"),this._tmpCtx.createImageData(e,t)},apply:function(e,t,r){var o=e.getContext("2d"),n=o.getImageData(0,0,e.width,e.height),t=t(n,r);t instanceof ImageData?o.putImageData(t,0,0,0,0,e.width,e.height):o.putImageData(n,0,0,0,0,e.width,e.height)},threshold:function(e){for(var t=1>8)/o,r[n+1]=255*(i*t>>8)/o,r[n+2]=255*(a*t>>8)/o}},dilate:function(e){for(var t,r,o,n,s,i,a,l,u,c=V._toPixels(e),d=0,h=c.length?c.length/4:0,f=new Int32Array(h);d>16&255)+151*(n>>8&255)+28*(255&n))<(a=77*(u>>16&255)+151*(u>>8&255)+28*(255&u))&&(o=u,n=a),n<(a=77*((u=V._getARGB(c,l))>>16&255)+151*(u>>8&255)+28*(255&u))&&(o=u,n=a),n<(l=77*(s>>16&255)+151*(s>>8&255)+28*(255&s))&&(o=s,n=l),n<(u=77*(i>>16&255)+151*(i>>8&255)+28*(255&i))&&(o=i,n=u),f[d++]=o;V._setPixels(c,f)},erode:function(e){for(var t,r,o,n,s,i,a,l,u,c=V._toPixels(e),d=0,h=c.length?c.length/4:0,f=new Int32Array(h);d>16&255)+151*(u>>8&255)+28*(255&u))<(n=77*(n>>16&255)+151*(n>>8&255)+28*(255&n))&&(o=u,n=a),(a=77*((u=V._getARGB(c,l))>>16&255)+151*(u>>8&255)+28*(255&u))>16&255)+151*(s>>8&255)+28*(255&s))>16&255)+151*(i>>8&255)+28*(255&i))>>24],r+=_[(16711680&I)>>16],o+=_[(65280&I)>>8],n+=_[255&I],t+=B[b],i++}T[a=k+g]=s/t,E[a]=r/t,M[a]=o/t,F[a]=n/t}k+=h}for(u=(l=-U)*h,v=k=0;v"+p.length.toString()+" out of "+c.toString()),e.next=48,new Promise(function(e){return setTimeout(e,0)});e.next=50;break;case 48:e.next=39;break;case 50:i||m.html("Frames processed, generating color palette..."),this.loop(),this.pixelDensity(f),v=(0,A.GIFEncoder)(),b=function(e){for(var t=new Uint8Array(e.length*e[0].length),r=0;r"+S.toString()+" out of "+c.toString()),e.next=68,new Promise(function(e){return setTimeout(e,0)});case 68:S++,e.next=60;break;case 71:v.finish(),k=v.bytesView(),k=new Blob([k],{type:"image/gif"}),p=[],this._recording=!1,this.loop(),i||(m.html("Done. Downloading your gif!🌸"),0=t&&(t=Math.floor(r.timeDisplayed/t),r.timeDisplayed=0,r.lastChangeTime=e,r.displayIndex+=t,r.loopCount=Math.floor(r.displayIndex/r.numFrames),null!==r.loopLimit&&r.loopCount>=r.loopLimit?r.playing=!1:(e=r.displayIndex%r.numFrames,this.drawingContext.putImageData(r.frames[e].image,0,0),r.displayIndex=e,this.setModified(!0))))}},{key:"_setProperty",value:function(e,t){this[e]=t,this.setModified(!0)}},{key:"loadPixels",value:function(){s.default.Renderer2D.prototype.loadPixels.call(this),this.setModified(!0)}},{key:"updatePixels",value:function(e,t,r,o){s.default.Renderer2D.prototype.updatePixels.call(this,e,t,r,o),this.setModified(!0)}},{key:"get",value:function(e,t,r,o){return s.default._validateParameters("p5.Image.get",arguments),s.default.Renderer2D.prototype.get.apply(this,arguments)}},{key:"_getPixel",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r/g,">").replace(/"/g,""").replace(/'/g,"'")}function i(e,t){t&&!0!==t&&"true"!==t||(t="");var r="";return(e=e||"untitled")&&e.includes(".")&&(r=e.split(".").pop()),t&&r!==t&&(r=t,e="".concat(e,".").concat(r)),[e,r]}e("../core/friendly_errors/validate_params"),e("../core/friendly_errors/file_errors"),e("../core/friendly_errors/fes_core"),v.default.prototype.loadJSON=function(){for(var e=arguments.length,t=new Array(e),r=0;r"),n.print("");if(n.print(' '),n.print(""),n.print(""),n.print(" "),"0"!==s[0]){n.print(" ");for(var c=0;c".concat(d)),n.print(" ")}n.print(" ")}for(var h=0;h");for(var f=0;f".concat(p)),n.print(" ")}n.print(" ")}n.print("
        "),n.print(""),n.print("")}n.close(),n.clear()},v.default.prototype.writeFile=function(e,t,r){var o="application/octet-stream",e=(v.default.prototype._isSafari()&&(o="text/plain"),new Blob(e,{type:o}));v.default.prototype.downloadFile(e,t,r)},v.default.prototype.downloadFile=function(e,t,r){var o,t=i(t,r),r=t[0];e instanceof Blob?n.default.saveAs(e,r):((o=document.createElement("a")).href=e,o.download=r,o.onclick=function(e){document.body.removeChild(e.target),e.stopPropagation()},o.style.display="none",document.body.appendChild(o),v.default.prototype._isSafari()&&(e=(e='Hello, Safari user! To download this file...\n1. Go to File --\x3e Save As.\n2. Choose "Page Source" as the Format.\n')+'3. Name it with this extension: ."'.concat(t[1],'"'),alert(e)),o.click())},v.default.prototype._checkFileExtension=i,v.default.prototype._isSafari=function(){return window.HTMLElement.toString().includes("Constructor")};e=v.default;r.default=e},{"../core/friendly_errors/fes_core":271,"../core/friendly_errors/file_errors":272,"../core/friendly_errors/validate_params":275,"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.includes":162,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.last-index-of":166,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.array.splice":170,"core-js/modules/es.function.name":173,"core-js/modules/es.object.from-entries":182,"core-js/modules/es.object.to-string":187,"core-js/modules/es.promise":188,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.includes":196,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.replace":201,"core-js/modules/es.string.split":203,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.typed-array.copy-within":210,"core-js/modules/es.typed-array.every":211,"core-js/modules/es.typed-array.fill":212,"core-js/modules/es.typed-array.filter":213,"core-js/modules/es.typed-array.find":215,"core-js/modules/es.typed-array.find-index":214,"core-js/modules/es.typed-array.for-each":218,"core-js/modules/es.typed-array.includes":219,"core-js/modules/es.typed-array.index-of":220,"core-js/modules/es.typed-array.iterator":223,"core-js/modules/es.typed-array.join":224,"core-js/modules/es.typed-array.last-index-of":225,"core-js/modules/es.typed-array.map":226,"core-js/modules/es.typed-array.reduce":228,"core-js/modules/es.typed-array.reduce-right":227,"core-js/modules/es.typed-array.reverse":229,"core-js/modules/es.typed-array.set":230,"core-js/modules/es.typed-array.slice":231,"core-js/modules/es.typed-array.some":232,"core-js/modules/es.typed-array.sort":233,"core-js/modules/es.typed-array.subarray":234,"core-js/modules/es.typed-array.to-locale-string":235,"core-js/modules/es.typed-array.to-string":236,"core-js/modules/es.typed-array.uint8-array":239,"core-js/modules/web.dom-collections.iterator":243,"core-js/modules/web.url":245,"es6-promise/auto":246,"fetch-jsonp":248,"file-saver":249,"whatwg-fetch":258}],307:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.splice"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.splice"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.replace"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=(e=e("../core/main"))&&e.__esModule?e:{default:e};function s(e,t){for(var r=0;r>>0},getSeed:function(){return t},rand:function(){return(r=(1664525*r+1013904223)%o)/o}};n.setSeed(e),_=new Array(4096);for(var s=0;s<4096;s++)_[s]=n.rand()},e.default);r.default=e},{"../core/main":280}],313:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.math.sign"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.number.is-finite"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.sub"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.math.sign"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.number.is-finite"),e("core-js/modules/es.string.sub"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var a=(n=e("../core/main"))&&n.__esModule?n:{default:n},s=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants"));function l(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,l=function(){return e},e)}function u(e,t){for(var r=0;r>>0},n.default.prototype.randomSeed=function(e){this._lcgSetSeed(s,e),this._gaussian_previous=!1},n.default.prototype.random=function(e,t){var r,o;return n.default._validateParameters("random",arguments),r=null!=this[s]?this._lcg(s):Math.random(),void 0===e?r:void 0===t?Array.isArray(e)?e[Math.floor(r*e.length)]:r*e:(tf&&(b=d,v=a,s=l,d=x+f*(i&&x=t?r.substring(r.length-t,r.length):r}},o.default.prototype.unhex=function(e){return e instanceof Array?e.map(o.default.prototype.unhex):parseInt("0x".concat(e),16)};e=o.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.map":167,"core-js/modules/es.number.constructor":178,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.repeat":200}],321:[function(e,t,r){"use strict";e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.filter"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.pad-start"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.string.split"),e("core-js/modules/es.string.trim"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.filter"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.pad-start"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.string.split"),e("core-js/modules/es.string.trim"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var s=(u=e("../core/main"))&&u.__esModule?u:{default:u};function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],o=!0,n=!1,s=void 0;try{for(var i,a=e[Symbol.iterator]();!(o=(i=a.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){n=!0,s=e}finally{try{o||null==a.return||a.return()}finally{if(n)throw s}}return r}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function o(e,t,r){var o=i(e.toString().split("."),2),n=o[0],o=o[1];return void 0===r?(n=n.padStart(t,"0"),o?n+"."+o:n):(n=(e=i(e.toFixed(r).toString().split("."),2))[0],o=e[1],n=n.padStart(t,"0"),void 0===o?n:n+"."+o)}function n(e,t){var r=(e=e.toString()).indexOf("."),o=-1!==r?e.substring(r):"",e=(e=-1!==r?e.substring(0,r):e).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");if(0===t)o="";else if(void 0!==t)if(t>o.length)for(var n=t-(o+=-1===r?".":"").length+1,s=0;s=j.TWO_PI?"".concat(c="ellipse","|"):"".concat(c="arc","|").concat(s,"|").concat(i,"|").concat(a,"|")).concat(l,"|"),c=(this.geometryInHash(u)||((e=new S.default.Geometry(l,1,function(){if(s.toFixed(10)!==i.toFixed(10)){a!==j.PIE&&void 0!==a||(this.vertices.push(new S.default.Vector(.5,.5,0)),this.uvs.push([.5,.5]));for(var e=0;e<=l;e++){var t=(i-s)*(e/l)+s,r=.5+Math.cos(t)/2,t=.5+Math.sin(t)/2;this.vertices.push(new S.default.Vector(r,t,0)),this.uvs.push([r,t]),e>5&31)/31,(p>>10&31)/31):(r=i,o=a,l)),new x.default.Vector(y,g,v)),_=1;_<=3;_++){var j=m+12*_,j=new x.default.Vector(u.getFloat32(j,!0),u.getFloat32(4+j,!0),u.getFloat32(8+j,!0));e.vertices.push(j),e.vertexNormals.push(b),d&&s.push(r,o,n)}e.faces.push([3*f,3*f+1,3*f+2]),e.uvs.push([0,0],[0,0],[0,0])}}(e,t);else{t=new DataView(t);if(!("TextDecoder"in window))return console.warn("Sorry, ASCII STL loading only works in browsers that support TextDecoder (https://caniuse.com/#feat=textencoder)");t=new TextDecoder("utf-8").decode(t).split("\n");!function(e,t){for(var r,o,n="",s=[],i=0;ithis.cameraFar&&(i=this.cameraFar),Math.acos(Math.max(-1,Math.min(1,j.default.Vector.dot(o,n))))+t),t=e;(r<=0||r>=Math.PI)&&(this.upX*=-1,this.upY*=-1,this.upZ*=-1),n.mult(Math.cos(r)),a.mult(Math.cos(t)*Math.sin(r)),s.mult(Math.sin(t)*Math.sin(r)),o.set(n).add(a).add(s),this.eyeX=i*o.x+this.centerX,this.eyeY=i*o.y+this.centerY,this.eyeZ=i*o.z+this.centerZ,this.camera(this.eyeX,this.eyeY,this.eyeZ,this.centerX,this.centerY,this.centerZ,this.upX,this.upY,this.upZ)}},{key:"_orbitFree",value:function(e,t,r){var o=this.eyeX-this.centerX,n=this.eyeY-this.centerY,s=this.eyeZ-this.centerZ,i=Math.hypot(o,n,s),o=new j.default.Vector(o,n,s).normalize(),n=new j.default.Vector(this.upX,this.upY,this.upZ),s=j.default.Vector.cross(n,o).normalize(),a=j.default.Vector.cross(o,s),l=Math.atan2(t,e),l=(a.mult(Math.sin(l)),s.mult(Math.cos(l)).add(a),Math.sqrt(e*e+t*t)),a=j.default.Vector.cross(o,s),e=((i=(i*=Math.pow(10,r))this.cameraFar&&(i=this.cameraFar),Math.cos(l)),t=Math.sin(l),r=n.dot(o),l=n.dot(s),u=r*e+l*t,r=-r*t+l*e,l=n.dot(a);n.x=u*o.x+r*s.x+l*a.x,n.y=u*o.y+r*s.y+l*a.y,n.z=u*o.z+r*s.z+l*a.z,s.mult(-t),o.mult(e).add(s).mult(i),this.camera(o.x+this.centerX,o.y+this.centerY,o.z+this.centerZ,this.centerX,this.centerY,this.centerZ,n.x,n.y,n.z)}},{key:"_isActive",value:function(){return this===this._renderer._curCamera}}])&&n(e.prototype,r),o&&n(e,o),t}(),j.default.prototype.setCamera=function(e){this._renderer._curCamera=e,this._renderer.uPMatrix.set(e.projMatrix)};e=j.default.Camera;r.default=e},{"../core/main":280,"core-js/modules/es.array.slice":168,"core-js/modules/es.math.hypot":175,"core-js/modules/es.string.sub":205}],330:[function(e,t,r){"use strict";e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.math.log2"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.math.log2"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};function n(e,t){for(var r=0;r=this.width||t>=this.height)&&(console.warn("The x and y values passed to p5.Framebuffer.get are outside of its range and will be clamped."),e=this.target.constrain(e,0,this.width-1),t=this.target.constrain(t,0,this.height-1)),(0,p.readPixelWebGL)(this.gl,this.framebuffer,e*this.density,t*this.density,n.format,n.type);e=this.target.constrain(e,0,this.width-1),t=this.target.constrain(t,0,this.height-1),r=this.target.constrain(r,1,this.width-e),o=this.target.constrain(o,1,this.height-t);for(var s=(0,p.readPixelsWebGL)(void 0,this.gl,this.framebuffer,e*this.density,t*this.density,r*this.density,o*this.density,n.format,n.type),i=new Uint8ClampedArray(r*o*this.density*this.density*4),a=(i.fill(255),n.type===this.gl.RGB?3:4),l=0;lthis.vertices.length-1-this.detailX;o--)e.add(this.vertexNormals[o]);e=m.default.Vector.div(e,this.detailX);for(var n=this.vertices.length-1;n>this.vertices.length-1-this.detailX;n--)this.vertexNormals[n]=e;return this}},{key:"_makeTriangleEdges",value:function(){for(var e=this.edges.length=0;e 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.");r.drawElements(r.TRIANGLES,t.vertexCount,t.indexBufferType,0)}else r.drawArrays(e||r.TRIANGLES,0,t.vertexCount)},a.default.RendererGL.prototype._drawPoints=function(e,t){var r=this.GL,o=this._getImmediatePointShader();this._setPointUniforms(o),this._bindBuffer(t,r.ARRAY_BUFFER,this._vToNArray(e),Float32Array,r.STATIC_DRAW),o.enableAttrib(o.attributes.aPosition,3),this._applyColorBlend(this.curStrokeColor),r.drawArrays(r.Points,0,e.length),o.unbindShader()};var s=a.default.RendererGL;r.default=s},{"../core/constants":269,"../core/main":280,"./p5.RenderBuffer":334,"./p5.RendererGL":337,"core-js/modules/es.array.fill":155,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.some":169,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.keys":186,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.typed-array.copy-within":210,"core-js/modules/es.typed-array.every":211,"core-js/modules/es.typed-array.fill":212,"core-js/modules/es.typed-array.filter":213,"core-js/modules/es.typed-array.find":215,"core-js/modules/es.typed-array.find-index":214,"core-js/modules/es.typed-array.float32-array":216,"core-js/modules/es.typed-array.for-each":218,"core-js/modules/es.typed-array.includes":219,"core-js/modules/es.typed-array.index-of":220,"core-js/modules/es.typed-array.iterator":223,"core-js/modules/es.typed-array.join":224,"core-js/modules/es.typed-array.last-index-of":225,"core-js/modules/es.typed-array.map":226,"core-js/modules/es.typed-array.reduce":228,"core-js/modules/es.typed-array.reduce-right":227,"core-js/modules/es.typed-array.reverse":229,"core-js/modules/es.typed-array.set":230,"core-js/modules/es.typed-array.slice":231,"core-js/modules/es.typed-array.some":232,"core-js/modules/es.typed-array.sort":233,"core-js/modules/es.typed-array.subarray":234,"core-js/modules/es.typed-array.to-locale-string":235,"core-js/modules/es.typed-array.to-string":236,"core-js/modules/es.typed-array.uint16-array":237,"core-js/modules/es.typed-array.uint32-array":238,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],337:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.copy-within"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.flat"),e("core-js/modules/es.array.flat-map"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.array.unscopables.flat"),e("core-js/modules/es.array.unscopables.flat-map"),e("core-js/modules/es.map"),e("core-js/modules/es.object.assign"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.get-prototype-of"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.reflect.construct"),e("core-js/modules/es.reflect.get"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.float64-array"),e("core-js/modules/es.typed-array.int16-array"),e("core-js/modules/es.typed-array.uint8-array"),e("core-js/modules/es.typed-array.uint16-array"),e("core-js/modules/es.typed-array.uint32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.copy-within"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.flat"),e("core-js/modules/es.array.flat-map"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.array.unscopables.flat"),e("core-js/modules/es.array.unscopables.flat-map"),e("core-js/modules/es.map"),e("core-js/modules/es.object.assign"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.float64-array"),e("core-js/modules/es.typed-array.int16-array"),e("core-js/modules/es.typed-array.uint8-array"),e("core-js/modules/es.typed-array.uint16-array"),e("core-js/modules/es.typed-array.uint32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.readPixelsWebGL=C,r.readPixelWebGL=O,r.default=void 0;var g=n(e("../core/main")),l=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=d();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants")),a=n(e("./GeometryBuilder")),u=n(e("libtess")),c=(e("./p5.Shader"),e("./p5.Camera"),e("../core/p5.Renderer"),e("./p5.Matrix"),e("./p5.Framebuffer"),e("path"),e("./p5.Texture"));function d(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,d=function(){return e},e)}function n(e){return e&&e.__esModule?e:{default:e}}function h(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n OUT_COLOR *= saturate(max(antialias, cover));\n}\n",lineVert:T+"/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nprecision mediump int;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nIN vec4 aPosition;\nIN vec3 aTangentIn;\nIN vec3 aTangentOut;\nIN float aSide;\nIN vec4 aVertexColor;\n\nOUT vec4 vColor;\nOUT vec2 vTangent;\nOUT vec2 vCenter;\nOUT vec2 vPosition;\nOUT float vMaxDist;\nOUT float vCap;\nOUT float vJoin;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n // Rotate and translate so a starts at the origin and goes out to the right\n bPoint -= aPoint;\n vec2 rotatedBFrom = vec2(\n bPoint.x*aDir.x + bPoint.y*aDir.y,\n bPoint.y*aDir.x - bPoint.x*aDir.y\n );\n vec2 bTo = bPoint + bDir;\n vec2 rotatedBTo = vec2(\n bTo.x*aDir.x + bTo.y*aDir.y,\n bTo.y*aDir.x - bTo.x*aDir.y\n );\n float intersectionDistance =\n rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n (rotatedBTo.y - rotatedBFrom.y);\n return aPoint + aDir * intersectionDistance;\n}\n\nvoid main() {\n // Caps have one of either the in or out tangent set to 0\n vCap = (aTangentIn == vec3(0.)) != (aTangentOut == (vec3(0.)))\n ? 1. : 0.;\n\n // Joins have two unique, defined tangents\n vJoin = (\n aTangentIn != vec3(0.) &&\n aTangentOut != vec3(0.) &&\n aTangentIn != aTangentOut\n ) ? 1. : 0.;\n\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));\n vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));\n\n float facingCamera = pow(\n // The word space tangent's z value is 0 if it's facing the camera\n abs(normalize(posqIn-posp).z),\n\n // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n // so most lines get scaled and don't get clipped\n 0.25\n );\n\n // using a scale <1 moves the lines towards the camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n float scale = mix(1., 0.995, facingCamera);\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n posp.xyz = posp.xyz * scale;\n posqIn.xyz = posqIn.xyz * scale;\n posqOut.xyz = posqOut.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n vCenter = p.xy;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don't care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can't remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n // Multiplying again by its sign here negates the flip to get just the scale.\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n if (vJoin == 1.) {\n vTangent = normalize(tangentIn + tangentOut);\n vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n float side = sign(aSide);\n float sideEnum = abs(aSide);\n\n // We generate vertices for joins on either side of the centerline, but\n // the \"elbow\" side is the only one needing a join. By not setting the\n // offset for the other side, all its vertices will end up in the same\n // spot and not render, effectively discarding it.\n if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n // Side enums:\n // 1: the side going into the join\n // 2: the middle of the join\n // 3: the side going out of the join\n if (sideEnum == 2.) {\n // Calculate the position + tangent on either side of the join, and\n // find where the lines intersect to find the elbow of the join\n vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n vec2 intersection = lineIntersection(\n c + (side * normalIn * uStrokeWeight / 2.),\n tangentIn,\n c + (side * normalOut * uStrokeWeight / 2.),\n tangentOut\n );\n offset = (intersection - c);\n\n // When lines are thick and the angle of the join approaches 180, the\n // elbow might be really far from the center. We'll apply a limit to\n // the magnitude to avoid lines going across the whole screen when this\n // happens.\n float mag = length(offset);\n float maxMag = 3. * uStrokeWeight;\n if (mag > maxMag) {\n offset *= maxMag / mag;\n }\n } else if (sideEnum == 1.) {\n offset = side * normalIn * uStrokeWeight / 2.;\n } else if (sideEnum == 3.) {\n offset = side * normalOut * uStrokeWeight / 2.;\n }\n }\n if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n vMaxDist = abs(dot(avgNormal, normalIn * uStrokeWeight / 2.));\n } else {\n vMaxDist = uStrokeWeight / 2.;\n }\n } else {\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n vTangent = tangent;\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float normalOffset = sign(aSide);\n // Caps will have side values of -2 or 2 on the edge of the cap that\n // extends out from the line\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n uStrokeWeight * 0.5;\n vMaxDist = uStrokeWeight / 2.;\n }\n vPosition = vCenter + offset;\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n \n vColor = (uUseLineColor ? aVertexColor : uMaterialColor);\n}\n",lineFrag:T+"precision mediump int;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\nuniform float uStrokeWeight;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n vec2 aToB = b - a;\n return dot(aToB, aToB);\n}\n\nvoid main() {\n if (vCap > 0.) {\n if (\n uStrokeCap == STROKE_CAP_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (\n uStrokeCap == STROKE_CAP_SQUARE &&\n dot(vPosition - vCenter, vTangent) > 0.\n ) {\n discard;\n }\n // Use full area for PROJECT\n } else if (vJoin > 0.) {\n if (\n uStrokeJoin == STROKE_JOIN_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 normal = vec2(-vTangent.y, vTangent.x);\n if (abs(dot(vPosition - vCenter, normal)) > vMaxDist) {\n discard;\n }\n }\n // Use full area for MITER\n }\n OUT_COLOR = vec4(vColor.rgb, 1.) * vColor.a;\n}\n",pointVert:"IN vec3 aPosition;\nuniform float uPointSize;\nOUT float vStrokeWeight;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvoid main() {\n\tvec4 positionVec4 = vec4(aPosition, 1.0);\n\tgl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\tgl_PointSize = uPointSize;\n\tvStrokeWeight = uPointSize;\n}\n",pointFrag:"precision mediump int;\nuniform vec4 uMaterialColor;\nIN float vStrokeWeight;\n\nvoid main(){\n float mask = 0.0;\n\n // make a circular mask using the gl_PointCoord (goes from 0 - 1 on a point)\n // might be able to get a nicer edge on big strokeweights with smoothstep but slightly less performant\n\n mask = step(0.98, length(gl_PointCoord * 2.0 - 1.0));\n\n // if strokeWeight is 1 or less lets just draw a square\n // this prevents weird artifacting from carving circles when our points are really small\n // if strokeWeight is larger than 1, we just use it as is\n\n mask = mix(0.0, mask, clamp(floor(vStrokeWeight - 0.5),0.0,1.0));\n\n // throw away the borders of the mask\n // otherwise we get weird alpha blending issues\n\n if(mask > 0.98){\n discard;\n }\n\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n}\n",imageLightVert:"precision highp float;\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nvarying vec3 localPos;\nvarying vec3 vWorldNormal;\nvarying vec3 vWorldPosition;\nvarying vec2 vTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvoid main() {\n // Multiply the position by the matrix.\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition; \n \n // orient the normals and pass to the fragment shader\n vWorldNormal = uNormalMatrix * aNormal;\n \n // send the view position to the fragment shader\n vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;\n \n localPos = vWorldPosition;\n vTexCoord = aTexCoord;\n}\n\n\n/*\nin the vertex shader we'll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.\n*/\n",imageLightDiffusedFrag:"precision highp float;\nvarying vec3 localPos;\n\n// the HDR cubemap converted (can be from an equirectangular environment map.)\nuniform sampler2D environmentMap;\nvarying vec2 vTexCoord;\n\nconst float PI = 3.14159265359;\n\nvec2 nTOE( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( phi, theta );\n return angles;\n}\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\nvoid main()\n{ \t \n\t// the sample direction equals the hemisphere's orientation\n float phi = vTexCoord.x * 2.0 * PI;\n float theta = vTexCoord.y * PI;\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 normal = vec3( x, y, z);\n\n\t// Discretely sampling the hemisphere given the integral's\n // spherical coordinates translates to the following fragment code:\n\tvec3 irradiance = vec3(0.0); \n\tvec3 up\t= vec3(0.0, 1.0, 0.0);\n\tvec3 right = normalize(cross(up, normal));\n\tup = normalize(cross(normal, right));\n\n\t// We specify a fixed sampleDelta delta value to traverse\n // the hemisphere; decreasing or increasing the sample delta\n // will increase or decrease the accuracy respectively.\n\tconst float sampleDelta = 0.100;\n\tfloat nrSamples = 0.0;\n float randomOffset = random(gl_FragCoord.xy) * sampleDelta;\n\tfor(float rawPhi = 0.0; rawPhi < 2.0 * PI; rawPhi += sampleDelta)\n\t{\n float phi = rawPhi + randomOffset;\n for(float rawTheta = 0.0; rawTheta < ( 0.5 ) * PI; rawTheta += sampleDelta)\n {\n float theta = rawTheta + randomOffset;\n // spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 tangentSample = vec3( x, y, z);\n \n vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;\n irradiance += (texture2D(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);\n nrSamples++;\n }\n\t}\n\t// divide by the total number of samples taken, giving us the average sampled irradiance.\n\tirradiance = PI * irradiance * (1.0 / float(nrSamples )) ;\n \n \n\tgl_FragColor = vec4(irradiance, 1.0);\n}",imageLightSpecularFrag:"precision highp float;\r\nvarying vec3 localPos;\r\nvarying vec2 vTexCoord;\r\n\r\n// our texture\r\nuniform sampler2D environmentMap;\r\nuniform float roughness;\r\n\r\nconst float PI = 3.14159265359;\r\n\r\nfloat VanDerCorput(int bits);\r\nvec2 HammersleyNoBitOps(int i, int N);\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness);\r\n\r\n\r\nvec2 nTOE( vec3 v ){\r\n // x = r sin(phi) cos(theta) \r\n // y = r cos(phi) \r\n // z = r sin(phi) sin(theta)\r\n float phi = acos( v.y );\r\n // if phi is 0, then there are no x, z components\r\n float theta = 0.0;\r\n // else \r\n theta = acos(v.x / sin(phi));\r\n float sinTheta = v.z / sin(phi);\r\n if (sinTheta < 0.0) {\r\n // Turn it into -theta, but in the 0-2PI range\r\n theta = 2.0 * PI - theta;\r\n }\r\n theta = theta / (2.0 * 3.14159);\r\n phi = phi / 3.14159 ;\r\n \r\n vec2 angles = vec2( phi, theta );\r\n return angles;\r\n}\r\n\r\n\r\nvoid main(){\r\n const int SAMPLE_COUNT = 400; // 4096\r\n int lowRoughnessLimit = int(pow(2.0,(roughness+0.1)*20.0));\r\n float totalWeight = 0.0;\r\n vec3 prefilteredColor = vec3(0.0);\r\n float phi = vTexCoord.x * 2.0 * PI;\r\n float theta = vTexCoord.y * PI;\r\n float x = sin(theta) * cos(phi);\r\n float y = sin(theta) * sin(phi);\r\n float z = cos(theta);\r\n vec3 N = vec3(x,y,z);\r\n vec3 V = N;\r\n for (int i = 0; i < SAMPLE_COUNT; ++i)\r\n {\r\n // break at smaller sample numbers for low roughness levels\r\n if(i == lowRoughnessLimit)\r\n {\r\n break;\r\n }\r\n vec2 Xi = HammersleyNoBitOps(i, SAMPLE_COUNT);\r\n vec3 H = ImportanceSampleGGX(Xi, N, roughness);\r\n vec3 L = normalize(2.0 * dot(V, H) * H - V);\r\n\r\n float NdotL = max(dot(N, L), 0.0);\r\n if (NdotL > 0.0)\r\n {\r\n prefilteredColor += texture2D(environmentMap, nTOE(L)).xyz * NdotL;\r\n totalWeight += NdotL;\r\n }\r\n }\r\n prefilteredColor = prefilteredColor / totalWeight;\r\n\r\n gl_FragColor = vec4(prefilteredColor, 1.0);\r\n}\r\n\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){\r\n float a = roughness * roughness;\r\n\r\n float phi = 2.0 * PI * Xi.x;\r\n float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a * a - 1.0) * Xi.y));\r\n float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\r\n // from spherical coordinates to cartesian coordinates\r\n vec3 H;\r\n H.x = cos(phi) * sinTheta;\r\n H.y = sin(phi) * sinTheta;\r\n H.z = cosTheta;\r\n\r\n // from tangent-space vector to world-space sample vector\r\n vec3 up = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);\r\n vec3 tangent = normalize(cross(up, N));\r\n vec3 bitangent = cross(N, tangent);\r\n\r\n vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;\r\n return normalize(sampleVec);\r\n}\r\n\r\n\r\nfloat VanDerCorput(int n, int base)\r\n{\r\n#ifdef WEBGL2\r\n\r\n uint bits = uint(n);\r\n bits = (bits << 16u) | (bits >> 16u);\r\n bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);\r\n bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);\r\n bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);\r\n bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);\r\n return float(bits) * 2.3283064365386963e-10; // / 0x100000000\r\n\r\n#else\r\n\r\n float invBase = 1.0 / float(base);\r\n float denom = 1.0;\r\n float result = 0.0;\r\n\r\n\r\n for (int i = 0; i < 32; ++i)\r\n {\r\n if (n > 0)\r\n {\r\n denom = mod(float(n), 2.0);\r\n result += denom * invBase;\r\n invBase = invBase / 2.0;\r\n n = int(float(n) / 2.0);\r\n }\r\n }\r\n\r\n\r\n return result;\r\n\r\n#endif\r\n}\r\n\r\nvec2 HammersleyNoBitOps(int i, int N)\r\n{\r\n return vec2(float(i) / float(N), VanDerCorput(i, 2));\r\n}\r\n"},M=E.sphereMappingFrag;for(x in E)E[x]="#ifdef WEBGL2\n\n#define IN in\n#define OUT out\n\n#ifdef FRAGMENT_SHADER\nout vec4 outColor;\n#define OUT_COLOR outColor\n#endif\n#define TEXTURE texture\n\n#else\n\n#ifdef FRAGMENT_SHADER\n#define IN varying\n#else\n#define IN attribute\n#endif\n#define OUT varying\n#define TEXTURE texture2D\n\n#ifdef FRAGMENT_SHADER\n#define OUT_COLOR gl_FragColor\n#endif\n\n#endif\n"+E[x];_(e={},l.GRAY,"precision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 tex = texture2D(tex0, vTexCoord);\n float gray = luma(tex.rgb);\n gl_FragColor = vec4(gray, gray, gray, tex.a);\n}\n"),_(e,l.ERODE,"// Reduces the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the darkest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum < lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n"),_(e,l.DILATE,"// Increase the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the brightest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum > lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n"),_(e,l.BLUR,"precision highp float;\n\n// Two-pass blur filter, unweighted kernel.\n// See also a similar blur at Adam Ferriss' repo of shader examples:\n// https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-9_single-pass-blur/effect.frag\n\n\nuniform sampler2D tex0;\nvarying vec2 vTexCoord;\nuniform vec2 direction;\nuniform vec2 canvasSize;\nuniform float radius;\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\n// This isn't a real Gaussian weight, it's a quadratic weight. It's what the\n// CPU mode's blur uses though, so we also use it here to match.\nfloat quadWeight(float x, float e) {\n return pow(e-abs(x), 2.);\n}\n\nvoid main(){\n vec2 uv = vTexCoord;\n\n // A reasonable maximum number of samples\n const float maxSamples = 64.0;\n\n float numSamples = floor(7. * radius);\n if (fract(numSamples / 2.) == 0.) {\n numSamples++;\n }\n vec4 avg = vec4(0.0);\n float total = 0.0;\n\n // Calculate the spacing to avoid skewing if numSamples > maxSamples\n float spacing = 1.0;\n if (numSamples > maxSamples) {\n spacing = numSamples / maxSamples;\n numSamples = maxSamples;\n }\n\n float randomOffset = (spacing - 1.0) * mix(-0.5, 0.5, random(gl_FragCoord.xy));\n for (float i = 0.0; i < maxSamples; i++) {\n if (i >= numSamples) break;\n\n float sample = i * spacing - (numSamples - 1.0) * 0.5 * spacing + randomOffset;\n vec2 sampleCoord = uv + vec2(sample, sample) / canvasSize * direction;\n float weight = quadWeight(sample, (numSamples - 1.0) * 0.5 * spacing);\n\n avg += weight * texture2D(tex0, sampleCoord);\n total += weight;\n }\n\n avg /= total;\n gl_FragColor = avg;\n}\n"),_(e,l.POSTERIZE,"// Limit color space for a stylized cartoon / poster effect\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nvec3 quantize(vec3 color, float n) {\n // restrict values to N options/bins\n // and floor each channel to nearest value\n //\n // eg. when N = 5, values = 0.0, 0.25, 0.50, 0.75, 1.0\n // then quantize (0.1, 0.7, 0.9) -> (0.0, 0.5, 1.0)\n\n color = color * n;\n color = floor(color);\n color = color / (n - 1.0);\n return color;\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n\n vec3 restrictedColor = quantize(color.rgb / color.a, filterParameter);\n\n gl_FragColor = vec4(restrictedColor.rgb * color.a, color.a);\n}\n"),_(e,l.OPAQUE,"// Set alpha channel to entirely opaque\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n gl_FragColor = vec4(color.rgb / color.a, 1.0);\n}\n"),_(e,l.INVERT,"// Set each pixel to inverse value\n// Note that original INVERT does not change the opacity, so this follows suit\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\nvec4 color = texture2D(tex0, vTexCoord);\nvec3 origColor = color.rgb / color.a;\nvec3 invertedColor = vec3(1.0) - origColor;\ngl_FragColor = vec4(invertedColor * color.a, color.a);\n}\n"),_(e,l.THRESHOLD,"// Convert pixels to either white or black, \n// depending on if their luma is above or below filterParameter\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float gray = luma(color.rgb / color.a);\n // floor() used to match src/image/filters.js\n float threshold = floor(filterParameter * 255.0) / 255.0;\n float blackOrWhite = step(threshold, gray);\n gl_FragColor = vec4(vec3(blackOrWhite) * color.a, color.a);\n}\n");var k=e;function C(e,t,r,o,n,s,i,a,l,u){var c=t.getParameter(t.FRAMEBUFFER_BINDING),r=(t.bindFramebuffer(t.FRAMEBUFFER,r),a===t.RGBA?4:3),d=s*i*r,h=l===t.UNSIGNED_BYTE?Uint8Array:Float32Array;if(e instanceof h&&e.length===d||(e=new h(d)),t.readPixels(o,u?u-n-i:n,s,i,a,l,e),t.bindFramebuffer(t.FRAMEBUFFER,c),u)for(var f=Math.floor(i/2),p=new h(s*r),m=0;m>7,127&d,c>>7,127&c);for(var h=0;h>7,127&f,0,0)}}return{cellImageInfo:a,dimOffset:t,dimImageInfo:n}}}}]),t}();B.default.RendererGL.prototype._renderText=function(e,t,r,o,n){if(this._textFont&&"string"!=typeof this._textFont){if(!(n<=o)&&this._doFill){if(this._isOpenType()){e.push();var n=this._doStroke,s=this.drawMode,i=(this._doStroke=!1,this.drawMode=E.TEXTURE,this._textFont.font),a=(a=this._textFont._fontInfo)||(this._textFont._fontInfo=new M(i)),r=this._textFont._handleAlignment(this,t,r,o),o=this._textSize/i.unitsPerEm,l=(this.translate(r.x,r.y,0),this.scale(o,o,1),this.GL),r=!this._defaultFontShader,u=this._getFontShader(),c=(u.init(),u.bindShader(),r&&(u.setUniform("uGridImageSize",[64,64]),u.setUniform("uCellsImageSize",[64,64]),u.setUniform("uStrokeImageSize",[64,64]),u.setUniform("uGridSize",[9,9])),this._applyColorBlend(this.curFillColor),this.retainedMode.geometry.glyph),d=(c||((o=this._textGeom=new B.default.Geometry(1,1,function(){for(var e=0;e<=1;e++)for(var t=0;t<=1;t++)this.vertices.push(new B.default.Vector(t,e,0)),this.uvs.push(t,e)})).computeFaces().computeNormals(),c=this.createBuffers("glyph",o)),!0),r=!1,o=void 0;try{for(var h,f=this.retainedMode.buffers.text[Symbol.iterator]();!(d=(h=f.next()).done);d=!0)h.value._prepareBuffer(c,u)}catch(e){r=!0,o=e}finally{try{d||null==f.return||f.return()}finally{if(r)throw o}}this._bindBuffer(c.indexBuffer,l.ELEMENT_ARRAY_BUFFER),u.setUniform("uMaterialColor",this.curFillColor),l.pixelStorei(l.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{var p=0,m=null,y=i.stringToGlyphs(t),g=!0,v=!1,b=void 0;try{for(var _,j=y[Symbol.iterator]();!(g=(_=j.next()).done);g=!0){var x,w,S=_.value,T=(m&&(p+=i.getKerningValue(m,S)),a.getGlyphInfo(S));T.uGlyphRect&&(x=T.rowInfo,w=T.colInfo,u.setUniform("uSamplerStrokes",T.strokeImageInfo.imageData),u.setUniform("uSamplerRowStrokes",x.cellImageInfo.imageData),u.setUniform("uSamplerRows",x.dimImageInfo.imageData),u.setUniform("uSamplerColStrokes",w.cellImageInfo.imageData),u.setUniform("uSamplerCols",w.dimImageInfo.imageData),u.setUniform("uGridOffset",T.uGridOffset),u.setUniform("uGlyphRect",T.uGlyphRect),u.setUniform("uGlyphOffset",p),u.bindTextures(),l.drawElements(l.TRIANGLES,6,this.GL.UNSIGNED_SHORT,0)),p+=S.advanceWidth,m=S}}catch(e){v=!0,b=e}finally{try{g||null==j.return||j.return()}finally{if(v)throw b}}}finally{u.unbindShader(),this._doStroke=n,this.drawMode=s,l.pixelStorei(l.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.pop()}}else console.log("WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported");return e}}else console.log("WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.")}},{"../core/constants":269,"../core/main":280,"./p5.RendererGL.Retained":336,"./p5.Shader":338,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.split":203,"core-js/modules/es.string.sub":205,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}]},{},[264])(264)}); \ No newline at end of file +/*! p5.js v1.9.3 April 24, 2024 */ +!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).p5=e()}(function(){var s,t,r;return function o(n,s,i){function a(t,e){if(!s[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(l)return l(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=s[t]={exports:{}},n[t][0].call(r.exports,function(e){return a(n[t][1][e]||e)},r,r.exports,o,n,s,i)}return s[t].exports}for(var l="function"==typeof require&&require,e=0;e>16&255,s[i++]=t>>8&255,s[i++]=255&t;2===o&&(t=l[e.charCodeAt(r)]<<2|l[e.charCodeAt(r+1)]>>4,s[i++]=255&t);1===o&&(t=l[e.charCodeAt(r)]<<10|l[e.charCodeAt(r+1)]<<4|l[e.charCodeAt(r+2)]>>2,s[i++]=t>>8&255,s[i++]=255&t);return s},r.fromByteArray=function(e){for(var t,r=e.length,o=r%3,n=[],s=0,i=r-o;s>18&63]+a[e>>12&63]+a[e>>6&63]+a[63&e]}(o));return n.join("")}(e,s,i>2]+a[t<<4&63]+"==")):2==o&&(t=(e[r-2]<<8)+e[r-1],n.push(a[t>>10]+a[t>>4&63]+a[t<<2&63]+"="));return n.join("")};for(var a=[],l=[],u="undefined"!=typeof Uint8Array?Uint8Array:Array,o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n=0,s=o.length;n>>1;case"base64":return M(e).length;default:if(n)return o?-1:E(e).length;t=(""+t).toLowerCase(),n=!0}}function r(e,t,r){var o,n=!1;if((t=void 0===t||t<0?0:t)>this.length)return"";if((r=void 0===r||r>this.length?this.length:r)<=0)return"";if((r>>>=0)<=(t>>>=0))return"";for(e=e||"utf8";;)switch(e){case"hex":var s=this,i=t,a=r,l=s.length;(!a||a<0||l=e.length){if(n)return-1;r=e.length-1}else if(r<0){if(!n)return-1;r=0}if("string"==typeof t&&(t=d.from(t,o)),d.isBuffer(t))return 0===t.length?-1:p(e,t,r,o,n);if("number"==typeof t)return t&=255,"function"==typeof Uint8Array.prototype.indexOf?(n?Uint8Array.prototype.indexOf:Uint8Array.prototype.lastIndexOf).call(e,t,r):p(e,[t],r,o,n);throw new TypeError("val must be string, number or Buffer")}function p(e,t,r,o,n){var s=1,i=e.length,a=t.length;if(void 0!==o&&("ucs2"===(o=String(o).toLowerCase())||"ucs-2"===o||"utf16le"===o||"utf-16le"===o)){if(e.length<2||t.length<2)return-1;i/=s=2,a/=2,r/=2}function l(e,t){return 1===s?e[t]:e.readUInt16BE(t*s)}if(n)for(var u=-1,c=r;c>8,o=o%256,n.push(o),n.push(r);return n}(t,e.length-r),e,r,o)}function T(e,t,r){r=Math.min(e.length,r);for(var o=[],n=t;n>>10&1023|55296),c=56320|1023&c),o.push(c),n+=d}var h=o,f=h.length;if(f<=v)return String.fromCharCode.apply(String,h);for(var p="",m=0;mt&&(e+=" ... "),""},e&&(d.prototype[e]=d.prototype.inspect),d.prototype.compare=function(e,t,r,o,n){if(C(e,Uint8Array)&&(e=d.from(e,e.offset,e.byteLength)),!d.isBuffer(e))throw new TypeError('The "target" argument must be one of type Buffer or Uint8Array. Received type '+typeof e);if(void 0===r&&(r=e?e.length:0),void 0===o&&(o=0),void 0===n&&(n=this.length),(t=void 0===t?0:t)<0||r>e.length||o<0||n>this.length)throw new RangeError("out of range index");if(n<=o&&r<=t)return 0;if(n<=o)return-1;if(r<=t)return 1;if(this===e)return 0;for(var s=(n>>>=0)-(o>>>=0),i=(r>>>=0)-(t>>>=0),a=Math.min(s,i),l=this.slice(o,n),u=e.slice(t,r),c=0;c>>=0,isFinite(r)?(r>>>=0,void 0===o&&(o="utf8")):(o=r,r=void 0)}var n=this.length-t;if((void 0===r||nthis.length)throw new RangeError("Attempt to write outside buffer bounds");o=o||"utf8";for(var s,i,a,l=!1;;)switch(o){case"hex":var u=this,c=e,d=t,h=r,f=(d=Number(d)||0,u.length-d);(!h||f<(h=Number(h)))&&(h=f),(f=c.length)/2e.length)throw new RangeError("Index out of range")}function _(e,t,r,o){if(r+o>e.length)throw new RangeError("Index out of range");if(r<0)throw new RangeError("Index out of range")}function j(e,t,r,o,n){return t=+t,r>>>=0,n||_(e,0,r,4),s.write(e,t,r,o,23,4),r+4}function x(e,t,r,o,n){return t=+t,r>>>=0,n||_(e,0,r,8),s.write(e,t,r,o,52,8),r+8}d.prototype.slice=function(e,t){var r=this.length,r=((e=~~e)<0?(e+=r)<0&&(e=0):r>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e],n=1,s=0;++s>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e+--t],n=1;0>>=0,t||m(e,1,this.length),this[e]},d.prototype.readUInt16LE=function(e,t){return e>>>=0,t||m(e,2,this.length),this[e]|this[e+1]<<8},d.prototype.readUInt16BE=function(e,t){return e>>>=0,t||m(e,2,this.length),this[e]<<8|this[e+1]},d.prototype.readUInt32LE=function(e,t){return e>>>=0,t||m(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},d.prototype.readUInt32BE=function(e,t){return e>>>=0,t||m(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},d.prototype.readIntLE=function(e,t,r){e>>>=0,t>>>=0,r||m(e,t,this.length);for(var o=this[e],n=1,s=0;++s>>=0,t>>>=0,r||m(e,t,this.length);for(var o=t,n=1,s=this[e+--o];0>>=0,t||m(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},d.prototype.readInt16LE=function(e,t){e>>>=0,t||m(e,2,this.length);t=this[e]|this[e+1]<<8;return 32768&t?4294901760|t:t},d.prototype.readInt16BE=function(e,t){e>>>=0,t||m(e,2,this.length);t=this[e+1]|this[e]<<8;return 32768&t?4294901760|t:t},d.prototype.readInt32LE=function(e,t){return e>>>=0,t||m(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},d.prototype.readInt32BE=function(e,t){return e>>>=0,t||m(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},d.prototype.readFloatLE=function(e,t){return e>>>=0,t||m(e,4,this.length),s.read(this,e,!0,23,4)},d.prototype.readFloatBE=function(e,t){return e>>>=0,t||m(e,4,this.length),s.read(this,e,!1,23,4)},d.prototype.readDoubleLE=function(e,t){return e>>>=0,t||m(e,8,this.length),s.read(this,e,!0,52,8)},d.prototype.readDoubleBE=function(e,t){return e>>>=0,t||m(e,8,this.length),s.read(this,e,!1,52,8)},d.prototype.writeUIntLE=function(e,t,r,o){e=+e,t>>>=0,r>>>=0,o||b(this,e,t,r,Math.pow(2,8*r)-1,0);var n=1,s=0;for(this[t]=255&e;++s>>=0,r>>>=0,o||b(this,e,t,r,Math.pow(2,8*r)-1,0);var n=r-1,s=1;for(this[t+n]=255&e;0<=--n&&(s*=256);)this[t+n]=e/s&255;return t+r},d.prototype.writeUInt8=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,1,255,0),this[t]=255&e,t+1},d.prototype.writeUInt16LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,65535,0),this[t]=255&e,this[t+1]=e>>>8,t+2},d.prototype.writeUInt16BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,65535,0),this[t]=e>>>8,this[t+1]=255&e,t+2},d.prototype.writeUInt32LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,4294967295,0),this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e,t+4},d.prototype.writeUInt32BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,4294967295,0),this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},d.prototype.writeIntLE=function(e,t,r,o){e=+e,t>>>=0,o||b(this,e,t,r,(o=Math.pow(2,8*r-1))-1,-o);var n=0,s=1,i=0;for(this[t]=255&e;++n>0)-i&255;return t+r},d.prototype.writeIntBE=function(e,t,r,o){e=+e,t>>>=0,o||b(this,e,t,r,(o=Math.pow(2,8*r-1))-1,-o);var n=r-1,s=1,i=0;for(this[t+n]=255&e;0<=--n&&(s*=256);)e<0&&0===i&&0!==this[t+n+1]&&(i=1),this[t+n]=(e/s>>0)-i&255;return t+r},d.prototype.writeInt8=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,1,127,-128),this[t]=255&(e=e<0?255+e+1:e),t+1},d.prototype.writeInt16LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,32767,-32768),this[t]=255&e,this[t+1]=e>>>8,t+2},d.prototype.writeInt16BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,2,32767,-32768),this[t]=e>>>8,this[t+1]=255&e,t+2},d.prototype.writeInt32LE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,2147483647,-2147483648),this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24,t+4},d.prototype.writeInt32BE=function(e,t,r){return e=+e,t>>>=0,r||b(this,e,t,4,2147483647,-2147483648),this[t]=(e=e<0?4294967295+e+1:e)>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},d.prototype.writeFloatLE=function(e,t,r){return j(this,e,t,!0,r)},d.prototype.writeFloatBE=function(e,t,r){return j(this,e,t,!1,r)},d.prototype.writeDoubleLE=function(e,t,r){return x(this,e,t,!0,r)},d.prototype.writeDoubleBE=function(e,t,r){return x(this,e,t,!1,r)},d.prototype.copy=function(e,t,r,o){if(!d.isBuffer(e))throw new TypeError("argument should be a Buffer");if(r=r||0,o||0===o||(o=this.length),t>=e.length&&(t=e.length),(o=0=this.length)throw new RangeError("Index out of range");if(o<0)throw new RangeError("sourceEnd out of bounds");o>this.length&&(o=this.length);var n=(o=e.length-t>>=0,r=void 0===r?this.length:r>>>0,"number"==typeof(e=e||0))for(s=t;s>6|192,63&r|128)}else if(r<65536){if((t-=3)<0)break;s.push(r>>12|224,r>>6&63|128,63&r|128)}else{if(!(r<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;s.push(r>>18|240,r>>12&63|128,r>>6&63|128,63&r|128)}}return s}function M(e){return S.toByteArray(function(e){if((e=(e=e.split("=")[0]).trim().replace(w,"")).length<2)return"";for(;e.length%4!=0;)e+="=";return e}(e))}function k(e,t,r,o){for(var n=0;n=t.length||n>=e.length);++n)t[n+r]=e[n];return n}function C(e,t){return e instanceof t||null!=e&&null!=e.constructor&&null!=e.constructor.name&&e.constructor.name===t.name}function O(e){return e!=e}var A=function(){for(var e="0123456789abcdef",t=new Array(256),r=0;r<16;++r)for(var o=16*r,n=0;n<16;++n)t[o+n]=e[r]+e[n];return t}()}.call(this,P("buffer").Buffer)},{"base64-js":1,buffer:4,ieee754:251}],5:[function(e,t,r){t.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},{}],6:[function(e,t,r){var o=e("../internals/is-object");t.exports=function(e){if(o(e)||null===e)return e;throw TypeError("Can't set "+String(e)+" as a prototype")}},{"../internals/is-object":75}],7:[function(e,t,r){var o=e("../internals/well-known-symbol"),n=e("../internals/object-create"),e=e("../internals/object-define-property"),s=o("unscopables"),i=Array.prototype;null==i[s]&&e.f(i,s,{configurable:!0,value:n(null)}),t.exports=function(e){i[s][e]=!0}},{"../internals/object-create":91,"../internals/object-define-property":93,"../internals/well-known-symbol":149}],8:[function(e,t,r){"use strict";var o=e("../internals/string-multibyte").charAt;t.exports=function(e,t,r){return t+(r?o(e,t).length:1)}},{"../internals/string-multibyte":124}],9:[function(e,t,r){t.exports=function(e,t,r){if(e instanceof t)return e;throw TypeError("Incorrect "+(r?r+" ":"")+"invocation")}},{}],10:[function(e,t,r){var o=e("../internals/is-object");t.exports=function(e){if(o(e))return e;throw TypeError(String(e)+" is not an object")}},{"../internals/is-object":75}],11:[function(e,t,r){t.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},{}],12:[function(e,t,r){"use strict";function o(e){return l(e)&&u(E,c(e))}var n,s=e("../internals/array-buffer-native"),i=e("../internals/descriptors"),a=e("../internals/global"),l=e("../internals/is-object"),u=e("../internals/has"),c=e("../internals/classof"),d=e("../internals/create-non-enumerable-property"),h=e("../internals/redefine"),f=e("../internals/object-define-property").f,p=e("../internals/object-get-prototype-of"),m=e("../internals/object-set-prototype-of"),y=e("../internals/well-known-symbol"),e=e("../internals/uid"),g=a.Int8Array,v=g&&g.prototype,b=a.Uint8ClampedArray,b=b&&b.prototype,_=g&&p(g),j=v&&p(v),x=Object.prototype,w=x.isPrototypeOf,y=y("toStringTag"),S=e("TYPED_ARRAY_TAG"),T=s&&!!m&&"Opera"!==c(a.opera),e=!1,E={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8};for(n in E)a[n]||(T=!1);if((!T||"function"!=typeof _||_===Function.prototype)&&(_=function(){throw TypeError("Incorrect invocation")},T))for(n in E)a[n]&&m(a[n],_);if((!T||!j||j===x)&&(j=_.prototype,T))for(n in E)a[n]&&m(a[n].prototype,j);if(T&&p(b)!==j&&m(b,j),i&&!u(j,y))for(n in e=!0,f(j,y,{get:function(){return l(this)?this[S]:void 0}}),E)a[n]&&d(a[n],S,n);t.exports={NATIVE_ARRAY_BUFFER_VIEWS:T,TYPED_ARRAY_TAG:e&&S,aTypedArray:function(e){if(o(e))return e;throw TypeError("Target is not a typed array")},aTypedArrayConstructor:function(e){if(m){if(w.call(_,e))return e}else for(var t in E)if(u(E,n)){t=a[t];if(t&&(e===t||w.call(t,e)))return e}throw TypeError("Target is not a typed array constructor")},exportTypedArrayMethod:function(e,t,r){if(i){if(r)for(var o in E){o=a[o];o&&u(o.prototype,e)&&delete o.prototype[e]}j[e]&&!r||h(j,e,!r&&T&&v[e]||t)}},exportTypedArrayStaticMethod:function(e,t,r){var o,n;if(i){if(m){if(r)for(o in E)(n=a[o])&&u(n,e)&&delete n[e];if(_[e]&&!r)return;try{return h(_,e,!r&&T&&g[e]||t)}catch(e){}}for(o in E)!(n=a[o])||n[e]&&!r||h(n,e,t)}},isView:function(e){e=c(e);return"DataView"===e||u(E,e)},isTypedArray:o,TypedArray:_,TypedArrayPrototype:j}},{"../internals/array-buffer-native":11,"../internals/classof":29,"../internals/create-non-enumerable-property":38,"../internals/descriptors":43,"../internals/global":60,"../internals/has":61,"../internals/is-object":75,"../internals/object-define-property":93,"../internals/object-get-prototype-of":98,"../internals/object-set-prototype-of":102,"../internals/redefine":109,"../internals/uid":146,"../internals/well-known-symbol":149}],13:[function(e,t,D){"use strict";function r(e){return[255&e]}function o(e){return[255&e,e>>8&255]}function n(e){return[255&e,e>>8&255,e>>16&255,e>>24&255]}function s(e){return e[3]<<24|e[2]<<16|e[1]<<8|e[0]}function i(e){return O(e,23,4)}function F(e){return O(e,52,8)}function a(e,t){H(e[w],t,{get:function(){return b(this)[t]}})}function l(e,t,r,o){if(r=m(r),e=b(e),r+t>e.byteLength)throw C(S);var n=b(e.buffer).bytes,r=r+e.byteOffset,e=n.slice(r,r+t);return o?e:e.reverse()}function u(e,t,r,o,n,s){if(r=m(r),e=b(e),r+t>e.byteLength)throw C(S);for(var i=b(e.buffer).bytes,a=r+e.byteOffset,l=o(+n),u=0;uR;)(P=L[R++])in E||N(E,P,T[P]);c.constructor=E}g&&V(e)!==k&&g(e,k);var y=new M(new E(2)),I=e.setInt8;y.setInt8(0,2147483648),y.setInt8(1,2147483649),!y.getInt8(0)&&y.getInt8(1)||h(e,{setInt8:function(e,t){I.call(this,e,t<<24>>24)},setUint8:function(e,t){I.call(this,e,t<<24>>24)}},{unsafe:!0})}else E=function(e){p(this,E,j);e=m(e);_(this,{bytes:W.call(new Array(e),0),byteLength:e}),d||(this.byteLength=e)},M=function(e,t,r){p(this,M,x),p(e,E,x);var o=b(e).byteLength,t=B(t);if(t<0||o>24},getUint8:function(e){return l(this,1,e)[0]},getInt16:function(e){e=l(this,2,e,1>16},getUint16:function(e){e=l(this,2,e,1>>0},getFloat32:function(e){return A(l(this,4,e,1"+e+""}},{"../internals/require-object-coercible":114}],37:[function(e,t,r){"use strict";function o(){return this}var n=e("../internals/iterators-core").IteratorPrototype,s=e("../internals/object-create"),i=e("../internals/create-property-descriptor"),a=e("../internals/set-to-string-tag"),l=e("../internals/iterators");t.exports=function(e,t,r){t+=" Iterator";return e.prototype=s(n,{next:i(1,r)}),a(e,t,!1,!0),l[t]=o,e}},{"../internals/create-property-descriptor":39,"../internals/iterators":80,"../internals/iterators-core":79,"../internals/object-create":91,"../internals/set-to-string-tag":118}],38:[function(e,t,r){var o=e("../internals/descriptors"),n=e("../internals/object-define-property"),s=e("../internals/create-property-descriptor");t.exports=o?function(e,t,r){return n.f(e,t,s(1,r))}:function(e,t,r){return e[t]=r,e}},{"../internals/create-property-descriptor":39,"../internals/descriptors":43,"../internals/object-define-property":93}],39:[function(e,t,r){t.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},{}],40:[function(e,t,r){"use strict";var o=e("../internals/to-primitive"),n=e("../internals/object-define-property"),s=e("../internals/create-property-descriptor");t.exports=function(e,t,r){t=o(t);t in e?n.f(e,t,s(0,r)):e[t]=r}},{"../internals/create-property-descriptor":39,"../internals/object-define-property":93,"../internals/to-primitive":141}],41:[function(e,t,r){"use strict";function m(){return this}var y=e("../internals/export"),g=e("../internals/create-iterator-constructor"),v=e("../internals/object-get-prototype-of"),b=e("../internals/object-set-prototype-of"),_=e("../internals/set-to-string-tag"),j=e("../internals/create-non-enumerable-property"),x=e("../internals/redefine"),o=e("../internals/well-known-symbol"),w=e("../internals/is-pure"),S=e("../internals/iterators"),e=e("../internals/iterators-core"),T=e.IteratorPrototype,E=e.BUGGY_SAFARI_ITERATORS,M=o("iterator"),k="values",C="entries";t.exports=function(e,t,r,o,n,s,i){g(r,t,o);function a(e){if(e===n&&f)return f;if(!E&&e in d)return d[e];switch(e){case"keys":case k:case C:return function(){return new r(this,e)}}return function(){return new r(this)}}var l,u,o=t+" Iterator",c=!1,d=e.prototype,h=d[M]||d["@@iterator"]||n&&d[n],f=!E&&h||a(n),p="Array"==t&&d.entries||h;if(p&&(p=v(p.call(new e)),T!==Object.prototype&&p.next&&(w||v(p)===T||(b?b(p,T):"function"!=typeof p[M]&&j(p,M,m)),_(p,o,!0,!0),w&&(S[o]=m))),n==k&&h&&h.name!==k&&(c=!0,f=function(){return h.call(this)}),w&&!i||d[M]===f||j(d,M,f),S[t]=f,n)if(l={values:a(k),keys:s?f:a("keys"),entries:a(C)},i)for(u in l)!E&&!c&&u in d||x(d,u,l[u]);else y({target:t,proto:!0,forced:E||c},l);return l}},{"../internals/create-iterator-constructor":37,"../internals/create-non-enumerable-property":38,"../internals/export":50,"../internals/is-pure":76,"../internals/iterators":80,"../internals/iterators-core":79,"../internals/object-get-prototype-of":98,"../internals/object-set-prototype-of":102,"../internals/redefine":109,"../internals/set-to-string-tag":118,"../internals/well-known-symbol":149}],42:[function(e,t,r){var o=e("../internals/path"),n=e("../internals/has"),s=e("../internals/well-known-symbol-wrapped"),i=e("../internals/object-define-property").f;t.exports=function(e){var t=o.Symbol||(o.Symbol={});n(t,e)||i(t,e,{value:s.f(e)})}},{"../internals/has":61,"../internals/object-define-property":93,"../internals/path":105,"../internals/well-known-symbol-wrapped":148}],43:[function(e,t,r){e=e("../internals/fails");t.exports=!e(function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})},{"../internals/fails":51}],44:[function(e,t,r){var o=e("../internals/global"),e=e("../internals/is-object"),n=o.document,s=e(n)&&e(n.createElement);t.exports=function(e){return s?n.createElement(e):{}}},{"../internals/global":60,"../internals/is-object":75}],45:[function(e,t,r){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},{}],46:[function(e,t,r){e=e("../internals/engine-user-agent");t.exports=/(iphone|ipod|ipad).*applewebkit/i.test(e)},{"../internals/engine-user-agent":47}],47:[function(e,t,r){e=e("../internals/get-built-in");t.exports=e("navigator","userAgent")||""},{"../internals/get-built-in":57}],48:[function(e,t,r){var o,n,s=e("../internals/global"),e=e("../internals/engine-user-agent"),s=s.process,s=s&&s.versions,s=s&&s.v8;s?n=(o=s.split("."))[0]+o[1]:e&&(!(o=e.match(/Edge\/(\d+)/))||74<=o[1])&&(o=e.match(/Chrome\/(\d+)/))&&(n=o[1]),t.exports=n&&+n},{"../internals/engine-user-agent":47,"../internals/global":60}],49:[function(e,t,r){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},{}],50:[function(e,t,r){var u=e("../internals/global"),c=e("../internals/object-get-own-property-descriptor").f,d=e("../internals/create-non-enumerable-property"),h=e("../internals/redefine"),f=e("../internals/set-global"),p=e("../internals/copy-constructor-properties"),m=e("../internals/is-forced");t.exports=function(e,t){var r,o,n,s=e.target,i=e.global,a=e.stat,l=i?u:a?u[s]||f(s,{}):(u[s]||{}).prototype;if(l)for(r in t){if(o=t[r],n=e.noTargetGet?(n=c(l,r))&&n.value:l[r],!m(i?r:s+(a?".":"#")+r,e.forced)&&void 0!==n){if(typeof o==typeof n)continue;p(o,n)}(e.sham||n&&n.sham)&&d(o,"sham",!0),h(l,r,o,e)}}},{"../internals/copy-constructor-properties":33,"../internals/create-non-enumerable-property":38,"../internals/global":60,"../internals/is-forced":74,"../internals/object-get-own-property-descriptor":94,"../internals/redefine":109,"../internals/set-global":116}],51:[function(e,t,r){t.exports=function(e){try{return!!e()}catch(e){return!0}}},{}],52:[function(e,t,r){"use strict";e("../modules/es.regexp.exec");var u=e("../internals/redefine"),c=e("../internals/fails"),d=e("../internals/well-known-symbol"),h=e("../internals/regexp-exec"),f=e("../internals/create-non-enumerable-property"),p=d("species"),m=!c(function(){var e=/./;return e.exec=function(){var e=[];return e.groups={a:"7"},e},"7"!=="".replace(e,"$")}),y="$0"==="a".replace(/./,"$0"),e=d("replace"),g=!!/./[e]&&""===/./[e]("a","$0"),v=!c(function(){var e=/(?:)/,t=e.exec,e=(e.exec=function(){return t.apply(this,arguments)},"ab".split(e));return 2!==e.length||"a"!==e[0]||"b"!==e[1]});t.exports=function(r,e,t,o){var s,n,i=d(r),a=!c(function(){var e={};return e[i]=function(){return 7},7!=""[r](e)}),l=a&&!c(function(){var e=!1,t=/a/;return"split"===r&&((t={constructor:{}}).constructor[p]=function(){return t},t.flags="",t[i]=/./[i]),t.exec=function(){return e=!0,null},t[i](""),!e});a&&l&&("replace"!==r||m&&y&&!g)&&("split"!==r||v)||(s=/./[i],t=(l=t(i,""[r],function(e,t,r,o,n){return t.exec===h?a&&!n?{done:!0,value:s.call(t,r,o)}:{done:!0,value:e.call(r,t,o)}:{done:!1}},{REPLACE_KEEPS_$0:y,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:g}))[0],n=l[1],u(String.prototype,r,t),u(RegExp.prototype,i,2==e?function(e,t){return n.call(e,this,t)}:function(e){return n.call(e,this)})),o&&f(RegExp.prototype[i],"sham",!0)}},{"../internals/create-non-enumerable-property":38,"../internals/fails":51,"../internals/redefine":109,"../internals/regexp-exec":111,"../internals/well-known-symbol":149,"../modules/es.regexp.exec":192}],53:[function(e,t,r){"use strict";function h(e,t,r,o,n,s,i,a){for(var l,u=n,c=0,d=!!i&&m(i,a,3);c>1,u=23===t?f(2,-24)-f(2,-77):0,c=e<0||0===e&&1/e<0?1:0,d=0;for((e=h(e))!=e||e===1/0?(n=e!=e?1:0,o=r):(o=p(m(e)/y),e*(s=f(2,-o))<1&&(o--,s*=2),2<=(e+=1<=o+l?u/s:u*f(2,1-l))*s&&(o++,s/=2),r<=o+l?(n=0,o=r):1<=o+l?(n=(e*s-1)*f(2,t),o+=l):(n=e*f(2,l-1)*f(2,t),o=0));8<=t;i[d++]=255&n,n/=256,t-=8);for(o=o<>1,a=n-7,l=o-1,n=e[l--],u=127&n;for(n>>=7;0>=-a,a+=t;0"+e+""},m=function(){try{n=document.domain&&new ActiveXObject("htmlfile")}catch(e){}m=n?((e=n).write(p("")),e.close(),t=e.parentWindow.Object,e=null,t):(e=c("iframe"),t="java"+h+":",e.style.display="none",u.appendChild(e),e.src=String(t),(t=e.contentWindow.document).open(),t.write(p("document.F=Object")),t.close(),t.F);for(var e,t,r=a.length;r--;)delete m[d][a[r]];return m()};l[f]=!0,t.exports=Object.create||function(e,t){var r;return null!==e?(o[d]=s(e),r=new o,o[d]=null,r[f]=e):r=m(),void 0===t?r:i(r,t)}},{"../internals/an-object":10,"../internals/document-create-element":44,"../internals/enum-bug-keys":49,"../internals/hidden-keys":62,"../internals/html":64,"../internals/object-define-properties":92,"../internals/shared-key":119}],92:[function(e,t,r){var o=e("../internals/descriptors"),i=e("../internals/object-define-property"),a=e("../internals/an-object"),l=e("../internals/object-keys");t.exports=o?Object.defineProperties:function(e,t){a(e);for(var r,o=l(t),n=o.length,s=0;sn;)!i(o,r=t[n++])||~l(s,r)||s.push(r);return s}},{"../internals/array-includes":18,"../internals/has":61,"../internals/hidden-keys":62,"../internals/to-indexed-object":135}],100:[function(e,t,r){var o=e("../internals/object-keys-internal"),n=e("../internals/enum-bug-keys");t.exports=Object.keys||function(e){return o(e,n)}},{"../internals/enum-bug-keys":49,"../internals/object-keys-internal":99}],101:[function(e,t,r){"use strict";var o={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,s=n&&!o.call({1:2},1);r.f=s?function(e){e=n(this,e);return!!e&&e.enumerable}:o},{}],102:[function(e,t,r){var n=e("../internals/an-object"),s=e("../internals/a-possible-prototype");t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var r,o=!1,e={};try{(r=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(e,[]),o=e instanceof Array}catch(e){}return function(e,t){return n(e),s(t),o?r.call(e,t):e.__proto__=t,e}}():void 0)},{"../internals/a-possible-prototype":6,"../internals/an-object":10}],103:[function(e,t,r){"use strict";var o=e("../internals/to-string-tag-support"),n=e("../internals/classof");t.exports=o?{}.toString:function(){return"[object "+n(this)+"]"}},{"../internals/classof":29,"../internals/to-string-tag-support":142}],104:[function(e,t,r){var o=e("../internals/get-built-in"),n=e("../internals/object-get-own-property-names"),s=e("../internals/object-get-own-property-symbols"),i=e("../internals/an-object");t.exports=o("Reflect","ownKeys")||function(e){var t=n.f(i(e)),r=s.f;return r?t.concat(r(e)):t}},{"../internals/an-object":10,"../internals/get-built-in":57,"../internals/object-get-own-property-names":96,"../internals/object-get-own-property-symbols":97}],105:[function(e,t,r){e=e("../internals/global");t.exports=e},{"../internals/global":60}],106:[function(e,t,r){t.exports=function(e){try{return{error:!1,value:e()}}catch(e){return{error:!0,value:e}}}},{}],107:[function(e,t,r){var o=e("../internals/an-object"),n=e("../internals/is-object"),s=e("../internals/new-promise-capability");t.exports=function(e,t){return o(e),n(t)&&t.constructor===e?t:((0,(e=s.f(e)).resolve)(t),e.promise)}},{"../internals/an-object":10,"../internals/is-object":75,"../internals/new-promise-capability":87}],108:[function(e,t,r){var n=e("../internals/redefine");t.exports=function(e,t,r){for(var o in t)n(e,o,t[o],r);return e}},{"../internals/redefine":109}],109:[function(e,t,r){var i=e("../internals/global"),a=e("../internals/create-non-enumerable-property"),l=e("../internals/has"),u=e("../internals/set-global"),o=e("../internals/inspect-source"),e=e("../internals/internal-state"),n=e.get,c=e.enforce,d=String(String).split("String");(t.exports=function(e,t,r,o){var n=!!o&&!!o.unsafe,s=!!o&&!!o.enumerable,o=!!o&&!!o.noTargetGet;"function"==typeof r&&("string"!=typeof t||l(r,"name")||a(r,"name",t),c(r).source=d.join("string"==typeof t?t:"")),e===i?s?e[t]=r:u(t,r):(n?!o&&e[t]&&(s=!0):delete e[t],s?e[t]=r:a(e,t,r))})(Function.prototype,"toString",function(){return"function"==typeof this&&n(this).source||o(this)})},{"../internals/create-non-enumerable-property":38,"../internals/global":60,"../internals/has":61,"../internals/inspect-source":69,"../internals/internal-state":71,"../internals/set-global":116}],110:[function(e,t,r){var o=e("./classof-raw"),n=e("./regexp-exec");t.exports=function(e,t){var r=e.exec;if("function"==typeof r){r=r.call(e,t);if("object"!=typeof r)throw TypeError("RegExp exec method returned something other than an Object or null");return r}if("RegExp"!==o(e))throw TypeError("RegExp#exec called on incompatible receiver");return n.call(e,t)}},{"./classof-raw":28,"./regexp-exec":111}],111:[function(e,t,r){"use strict";var o,n,d=e("./regexp-flags"),e=e("./regexp-sticky-helpers"),h=RegExp.prototype.exec,f=String.prototype.replace,s=h,p=(o=/a/,n=/b*/g,h.call(o,"a"),h.call(n,"a"),0!==o.lastIndex||0!==n.lastIndex),m=e.UNSUPPORTED_Y||e.BROKEN_CARET,y=void 0!==/()??/.exec("")[1];t.exports=s=p||y||m?function(e){var t,r,o,n,s=this,i=m&&s.sticky,a=d.call(s),l=s.source,u=0,c=e;return i&&(-1===(a=a.replace("y","")).indexOf("g")&&(a+="g"),c=String(e).slice(s.lastIndex),0t&&(o=o.slice(0,t)),n?e+o:o+e)}}var s=e("../internals/to-length"),i=e("../internals/string-repeat"),a=e("../internals/require-object-coercible"),l=Math.ceil;t.exports={start:o(!1),end:o(!0)}},{"../internals/require-object-coercible":114,"../internals/string-repeat":128,"../internals/to-length":137}],127:[function(e,t,r){"use strict";function g(e){return e+22+75*(e<26)}function s(e){var t,r=[],o=(e=function(e){for(var t=[],r=0,o=e.length;rT((v-s)/d))throw RangeError(w);for(s+=(u-n)*d,n=u,c=0;cv)throw RangeError(w);if(t==n){for(var h=s,f=b;;f+=b){var p=f<=i?1:i+_<=f?_:f-i;if(h>1,e+=T(e/t);S*_>>1>>=1)&&(t+=t))1&o&&(r+=t);return r}},{"../internals/require-object-coercible":114,"../internals/to-integer":136}],129:[function(e,t,r){var o=e("../internals/fails"),n=e("../internals/whitespaces");t.exports=function(e){return o(function(){return!!n[e]()||"​…᠎"!="​…᠎"[e]()||n[e].name!==e})}},{"../internals/fails":51,"../internals/whitespaces":150}],130:[function(e,t,r){function o(t){return function(e){e=String(n(e));return 1&t&&(e=e.replace(s,"")),e=2&t?e.replace(i,""):e}}var n=e("../internals/require-object-coercible"),e="["+e("../internals/whitespaces")+"]",s=RegExp("^"+e+e+"*"),i=RegExp(e+e+"*$");t.exports={start:o(1),end:o(2),trim:o(3)}},{"../internals/require-object-coercible":114,"../internals/whitespaces":150}],131:[function(e,t,r){function o(e){return function(){x(e)}}function n(e){x(e.data)}function s(e){a.postMessage(e+"",f.protocol+"//"+f.host)}var i,a=e("../internals/global"),l=e("../internals/fails"),u=e("../internals/classof-raw"),c=e("../internals/function-bind-context"),d=e("../internals/html"),h=e("../internals/document-create-element"),e=e("../internals/engine-is-ios"),f=a.location,p=a.setImmediate,m=a.clearImmediate,y=a.process,g=a.MessageChannel,v=a.Dispatch,b=0,_={},j="onreadystatechange",x=function(e){var t;_.hasOwnProperty(e)&&(t=_[e],delete _[e],t())};p&&m||(p=function(e){for(var t=[],r=1;r=t.length?{value:e.target=void 0,done:!0}:"keys"==r?{value:o,done:!1}:"values"==r?{value:t[o],done:!1}:{value:[o,t[o]],done:!1}},"values"),s.Arguments=s.Array,n("keys"),n("values"),n("entries")},{"../internals/add-to-unscopables":7,"../internals/define-iterator":41,"../internals/internal-state":71,"../internals/iterators":80,"../internals/to-indexed-object":135}],165:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/indexed-object"),s=e("../internals/to-indexed-object"),e=e("../internals/array-method-is-strict"),i=[].join,n=n!=Object,e=e("join",",");o({target:"Array",proto:!0,forced:n||!e},{join:function(e){return i.call(s(this),void 0===e?",":e)}})},{"../internals/array-method-is-strict":22,"../internals/export":50,"../internals/indexed-object":67,"../internals/to-indexed-object":135}],166:[function(e,t,r){var o=e("../internals/export"),e=e("../internals/array-last-index-of");o({target:"Array",proto:!0,forced:e!==[].lastIndexOf},{lastIndexOf:e})},{"../internals/array-last-index-of":20,"../internals/export":50}],167:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/array-iteration").map,s=e("../internals/array-method-has-species-support"),e=e("../internals/array-method-uses-to-length"),s=s("map"),e=e("map");o({target:"Array",proto:!0,forced:!s||!e},{map:function(e){return n(this,e,1T;T++)l(b,x=S[T])&&!l(w,x)&&y(w,x,m(b,x));(w.prototype=_).constructor=w,a(s,v,w)}},{"../internals/classof-raw":28,"../internals/descriptors":43,"../internals/fails":51,"../internals/global":60,"../internals/has":61,"../internals/inherit-if-required":68,"../internals/is-forced":74,"../internals/object-create":91,"../internals/object-define-property":93,"../internals/object-get-own-property-descriptor":94,"../internals/object-get-own-property-names":96,"../internals/redefine":109,"../internals/string-trim":130,"../internals/to-primitive":141}],179:[function(e,t,r){e("../internals/export")({target:"Number",stat:!0},{isFinite:e("../internals/number-is-finite")})},{"../internals/export":50,"../internals/number-is-finite":89}],180:[function(e,t,r){"use strict";function c(e,t,r){return 0===t?r:t%2==1?c(e,t-1,r*e):c(e*e,t/2,r)}var o=e("../internals/export"),d=e("../internals/to-integer"),h=e("../internals/this-number-value"),f=e("../internals/string-repeat"),e=e("../internals/fails"),n=1..toFixed,p=Math.floor;o({target:"Number",proto:!0,forced:n&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==0xde0b6b3a7640080.toFixed(0))||!e(function(){n.call({})})},{toFixed:function(e){function t(e,t){for(var r=-1,o=t;++r<6;)o+=e*a[r],a[r]=o%1e7,o=p(o/1e7)}function r(e){for(var t=6,r=0;0<=--t;)r+=a[t],a[t]=p(r/e),r=r%e*1e7}function o(){for(var e,t=6,r="";0<=--t;)""===r&&0!==t&&0===a[t]||(e=String(a[t]),r=""===r?e:r+f.call("0",7-e.length)+e);return r}var n,s,i=h(this),e=d(e),a=[0,0,0,0,0,0],l="",u="0";if(e<0||20n;){var s,i,a,l=y[n++],u=t?l.ok:l.fail,c=l.resolve,d=l.reject,h=l.domain;try{u?(t||(p.rejection===oe&&function(e,t){v.call(g,function(){if(k)T.emit("rejectionHandled",e);else se(te,e,t.value)})}(f,p),p.rejection=A),!0===u?s=e:(h&&h.enter(),s=u(e),h&&(h.exit(),a=!0)),s===l.promise?d(w("Promise-chain cycle")):(i=ne(s))?i.call(s,c,d):c(s)):d(e)}catch(e){h&&!a&&h.exit(),d(e)}}p.reactions=[],p.notified=!1,m&&!p.rejection&&(r=f,o=p,v.call(g,function(){var e=o.value,t=ie(o);if(t&&(t=b(function(){k?T.emit("unhandledRejection",e,r):se(C,r,e)}),o.rejection=k||ie(o)?oe:A,t.error))throw t.value}))}))},se=function(e,t,r){var o;ee?((o=S.createEvent("Event")).promise=t,o.reason=r,o.initEvent(e,!1,!0),g.dispatchEvent(o)):o={promise:t,reason:r},(t=g["on"+e])?t(o):e===C&&Y("Unhandled promise rejection",r)},ie=function(e){return e.rejection!==A&&!e.parent},L=function(t,r,o,n){return function(e){t(r,o,e,n)}},R=function(e,t,r,o){t.done||(t.done=!0,(t=o?o:t).value=r,t.state=re,P(e,t,!0))},I=function(r,o,e,t){if(!o.done){o.done=!0,t&&(o=t);try{if(r===e)throw w("Promise can't be resolved itself");var n=ne(e);n?u(function(){var t={done:!1};try{n.call(e,L(I,r,t,o),L(R,r,t,o))}catch(e){R(r,t,e,o)}}):(o.value=e,o.state=O,P(r,o,!1))}catch(e){R(r,{done:!1},e,o)}}};e&&(x=function(e){z(this,x,_),c(e),r.call(this);var t=j(this);try{e(L(I,this,t),L(R,this,t))}catch(e){R(this,t,e)}},(r=function(e){K(this,{type:_,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:0,value:void 0})}).prototype=N(x.prototype,{then:function(e,t){var r=J(this),o=M(X(this,x));return o.ok="function"!=typeof e||e,o.fail="function"==typeof t&&t,o.domain=k?T.domain:void 0,r.parent=!0,r.reactions.push(o),0!=r.state&&P(this,r,!1),o.promise},catch:function(e){return this.then(void 0,e)}}),t=function(){var e=new r,t=j(e);this.promise=e,this.resolve=L(I,e,t),this.reject=L(R,e,t)},f.f=M=function(e){return e===x||e===o?new t:$(e)},i||"function"!=typeof l||(n=l.prototype.then,U(l.prototype,"then",function(e,t){var r=this;return new x(function(e,t){n.call(r,e,t)}).then(e,t)},{unsafe:!0}),"function"==typeof E&&s({global:!0,enumerable:!0,forced:!0},{fetch:function(e){return h(x,E.apply(g,arguments))}}))),s({global:!0,wrap:!0,forced:e},{Promise:x}),B(x,_,!1,!0),G(_),o=a(_),s({target:_,stat:!0,forced:e},{reject:function(e){var t=M(this);return t.reject.call(void 0,e),t.promise}}),s({target:_,stat:!0,forced:i||e},{resolve:function(e){return h(i&&this===o?x:this,e)}}),s({target:_,stat:!0,forced:m},{all:function(e){var a=this,t=M(a),l=t.resolve,u=t.reject,r=b(function(){var o=c(a.resolve),n=[],s=0,i=1;d(e,function(e){var t=s++,r=!1;n.push(void 0),i++,o.call(a,e).then(function(e){r||(r=!0,n[t]=e,--i||l(n))},u)}),--i||l(n)});return r.error&&u(r.value),t.promise},race:function(e){var r=this,o=M(r),n=o.reject,t=b(function(){var t=c(r.resolve);d(e,function(e){t.call(r,e).then(o.resolve,n)})});return t.error&&n(t.value),o.promise}})},{"../internals/a-function":5,"../internals/an-instance":9,"../internals/check-correctness-of-iteration":27,"../internals/classof-raw":28,"../internals/engine-v8-version":48,"../internals/export":50,"../internals/get-built-in":57,"../internals/global":60,"../internals/host-report-errors":63,"../internals/inspect-source":69,"../internals/internal-state":71,"../internals/is-forced":74,"../internals/is-object":75,"../internals/is-pure":76,"../internals/iterate":78,"../internals/microtask":82,"../internals/native-promise-constructor":83,"../internals/new-promise-capability":87,"../internals/perform":106,"../internals/promise-resolve":107,"../internals/redefine":109,"../internals/redefine-all":108,"../internals/set-species":117,"../internals/set-to-string-tag":118,"../internals/species-constructor":122,"../internals/task":131,"../internals/well-known-symbol":149}],189:[function(e,t,r){var o=e("../internals/export"),n=e("../internals/get-built-in"),s=e("../internals/a-function"),i=e("../internals/an-object"),a=e("../internals/is-object"),l=e("../internals/object-create"),u=e("../internals/function-bind"),e=e("../internals/fails"),c=n("Reflect","construct"),d=e(function(){function e(){}return!(c(function(){},[],e)instanceof e)}),h=!e(function(){c(function(){})}),n=d||h;o({target:"Reflect",stat:!0,forced:n,sham:n},{construct:function(e,t){s(e),i(t);var r=arguments.length<3?e:s(arguments[2]);if(h&&!d)return c(e,t,r);if(e==r){switch(t.length){case 0:return new e;case 1:return new e(t[0]);case 2:return new e(t[0],t[1]);case 3:return new e(t[0],t[1],t[2]);case 4:return new e(t[0],t[1],t[2],t[3])}var o=[null];return o.push.apply(o,t),new(u.apply(e,o))}o=r.prototype,r=l(a(o)?o:Object.prototype),o=Function.apply.call(e,r,t);return a(o)?o:r}})},{"../internals/a-function":5,"../internals/an-object":10,"../internals/export":50,"../internals/fails":51,"../internals/function-bind":56,"../internals/get-built-in":57,"../internals/is-object":75,"../internals/object-create":91}],190:[function(e,t,r){var o=e("../internals/export"),s=e("../internals/is-object"),i=e("../internals/an-object"),a=e("../internals/has"),l=e("../internals/object-get-own-property-descriptor"),u=e("../internals/object-get-prototype-of");o({target:"Reflect",stat:!0},{get:function e(t,r){var o,n=arguments.length<3?t:arguments[2];return i(t)===n?t[r]:(o=l.f(t,r))?a(o,"value")?o.value:void 0===o.get?void 0:o.get.call(n):s(o=u(t))?e(o,r,n):void 0}})},{"../internals/an-object":10,"../internals/export":50,"../internals/has":61,"../internals/is-object":75,"../internals/object-get-own-property-descriptor":94,"../internals/object-get-prototype-of":98}],191:[function(e,t,r){var o=e("../internals/descriptors"),n=e("../internals/global"),s=e("../internals/is-forced"),i=e("../internals/inherit-if-required"),a=e("../internals/object-define-property").f,l=e("../internals/object-get-own-property-names").f,u=e("../internals/is-regexp"),c=e("../internals/regexp-flags"),d=e("../internals/regexp-sticky-helpers"),h=e("../internals/redefine"),f=e("../internals/fails"),p=e("../internals/internal-state").set,m=e("../internals/set-species"),y=e("../internals/well-known-symbol")("match"),g=n.RegExp,v=g.prototype,b=/a/g,_=/a/g,j=new g(b)!==b,x=d.UNSUPPORTED_Y;if(o&&s("RegExp",!j||x||f(function(){return _[y]=!1,g(b)!=b||g(_)==_||"/a/i"!=g(b,"i")}))){for(var w=function(e,t){var r,o=this instanceof w,n=u(e),s=void 0===t;if(!o&&n&&e.constructor===w&&s)return e;j?n&&!s&&(e=e.source):e instanceof w&&(s&&(t=c.call(e)),e=e.source),x&&(r=!!t&&-1T;)!function(t){t in w||a(w,t,{configurable:!0,get:function(){return g[t]},set:function(e){g[t]=e}})}(S[T++]);(v.constructor=w).prototype=v,h(n,"RegExp",w)}m("RegExp")},{"../internals/descriptors":43,"../internals/fails":51,"../internals/global":60,"../internals/inherit-if-required":68,"../internals/internal-state":71,"../internals/is-forced":74,"../internals/is-regexp":77,"../internals/object-define-property":93,"../internals/object-get-own-property-names":96,"../internals/redefine":109,"../internals/regexp-flags":112,"../internals/regexp-sticky-helpers":113,"../internals/set-species":117,"../internals/well-known-symbol":149}],192:[function(e,t,r){"use strict";var o=e("../internals/export"),e=e("../internals/regexp-exec");o({target:"RegExp",proto:!0,forced:/./.exec!==e},{exec:e})},{"../internals/export":50,"../internals/regexp-exec":111}],193:[function(e,t,r){"use strict";var o=e("../internals/redefine"),n=e("../internals/an-object"),s=e("../internals/fails"),i=e("../internals/regexp-flags"),e="toString",a=RegExp.prototype,l=a[e],s=s(function(){return"/a/b"!=l.call({source:"a",flags:"b"})}),u=l.name!=e;(s||u)&&o(RegExp.prototype,e,function(){var e=n(this),t=String(e.source),r=e.flags;return"/"+t+"/"+String(void 0===r&&e instanceof RegExp&&!("flags"in a)?i.call(e):r)},{unsafe:!0})},{"../internals/an-object":10,"../internals/fails":51,"../internals/redefine":109,"../internals/regexp-flags":112}],194:[function(e,t,r){"use strict";var o=e("../internals/collection"),e=e("../internals/collection-strong");t.exports=o("Set",function(e){return function(){return e(this,arguments.length?arguments[0]:void 0)}},e)},{"../internals/collection":32,"../internals/collection-strong":30}],195:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/object-get-own-property-descriptor").f,s=e("../internals/to-length"),i=e("../internals/not-a-regexp"),a=e("../internals/require-object-coercible"),l=e("../internals/correct-is-regexp-logic"),e=e("../internals/is-pure"),u="".endsWith,c=Math.min,l=l("endsWith");o({target:"String",proto:!0,forced:!!(e||l||(!(o=n(String.prototype,"endsWith"))||o.writable))&&!l},{endsWith:function(e){var t=String(a(this)),r=(i(e),1=t.length?{value:void 0,done:!0}:(t=o(t,r),e.index+=t.length,{value:t,done:!1})})},{"../internals/define-iterator":41,"../internals/internal-state":71,"../internals/string-multibyte":124}],198:[function(e,t,r){"use strict";var o=e("../internals/fix-regexp-well-known-symbol-logic"),c=e("../internals/an-object"),d=e("../internals/to-length"),n=e("../internals/require-object-coercible"),h=e("../internals/advance-string-index"),f=e("../internals/regexp-exec-abstract");o("match",1,function(o,l,u){return[function(e){var t=n(this),r=null==e?void 0:e[o];return void 0!==r?r.call(e,t):new RegExp(e)[o](String(t))},function(e){var t=u(l,e,this);if(t.done)return t.value;var r=c(e),o=String(this);if(!r.global)return f(r,o);for(var n=r.unicode,s=[],i=r.lastIndex=0;null!==(a=f(r,o));){var a=String(a[0]);""===(s[i]=a)&&(r.lastIndex=h(o,d(r.lastIndex),n)),i++}return 0===i?null:s}]})},{"../internals/advance-string-index":8,"../internals/an-object":10,"../internals/fix-regexp-well-known-symbol-logic":52,"../internals/regexp-exec-abstract":110,"../internals/require-object-coercible":114,"../internals/to-length":137}],199:[function(e,t,r){"use strict";var o=e("../internals/export"),n=e("../internals/string-pad").start;o({target:"String",proto:!0,forced:e("../internals/string-pad-webkit-bug")},{padStart:function(e){return n(this,e,1]*>)/g,I=/\$([$&'`]|\d\d?)/g;o("replace",2,function(n,_,j,e){var x=e.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,w=e.REPLACE_KEEPS_$0,S=x?"$":"$0";return[function(e,t){var r=s(this),o=null==e?void 0:e[n];return void 0!==o?o.call(e,r,t):_.call(String(r),e,t)},function(e,t){if(!x&&w||"string"==typeof t&&-1===t.indexOf(S)){var r=j(_,e,this,t);if(r.done)return r.value}for(var o,n=T(e),s=String(this),i="function"==typeof t,a=(i||(t=String(t)),n.global),l=(a&&(o=n.unicode,n.lastIndex=0),[]);null!==(f=O(n,s))&&(l.push(f),a);)""===String(f[0])&&(n.lastIndex=C(s,M(n.lastIndex),o));for(var u,c="",d=0,h=0;h>>0;if(0==o)return[];if(void 0===e)return[r];if(!c(e))return p.call(r,e,o);for(var n,s,i,a=[],t=(e.ignoreCase?"i":"")+(e.multiline?"m":"")+(e.unicode?"u":"")+(e.sticky?"y":""),l=0,u=new RegExp(e.source,t+"g");(n=h.call(u,r))&&!(l<(s=u.lastIndex)&&(a.push(r.slice(l,n.index)),1=o));)u.lastIndex===n.index&&u.lastIndex++;return l===r.length?!i&&u.test("")||a.push(""):a.push(r.slice(l)),a.length>o?a.slice(0,o):a}:"0".split(void 0,0).length?function(e,t){return void 0===e&&0===t?[]:p.call(this,e,t)}:p;return[function(e,t){var r=d(this),o=null==e?void 0:e[n];return void 0!==o?o.call(e,r,t):y.call(String(r),e,t)},function(e,t){var r=m(y,e,this,t,y!==p);if(r.done)return r.value;var r=g(e),o=String(this),e=v(r,RegExp),n=r.unicode,s=(r.ignoreCase?"i":"")+(r.multiline?"m":"")+(r.unicode?"u":"")+(S?"y":"g"),i=new e(S?r:"^(?:"+r.source+")",s),a=void 0===t?w:t>>>0;if(0==a)return[];if(0===o.length)return null===j(i,o)?[o]:[];for(var l=0,u=0,c=[];ue.key){o.splice(t,0,e);break}t===s&&o.push(e)}r.updateURL()},forEach:function(e){for(var t,r=A(this).entries,o=v(e,16)return;a=0;while(h()){l=null;if(a>0)if(h()=="."&&a<4)n++;else return;if(!x.test(h()))return;while(x.test(h())){u=parseInt(h(),10);if(l===null)l=u;else if(l==0)return;else l=l*10+u;if(l>255)return;n++}t[r]=t[r]*256+l;a++;if(a==2||a==4)r++}if(a!=4)return;break}else if(h()==":"){n++;if(!h())return}else if(h())return;t[r++]=s}if(o!==null){c=r-o;r=7;while(r!=0&&c>0){d=t[r];t[r--]=t[o+c-1];t[o+--c]=d}}else if(r!=8)return;return t}(t.slice(1,-1)))?void(e.host=r):j;if(k(e))return t=z(t),ne.test(t)||null===(r=function(e){var t=e.split("."),r,o,n,s,i,a,l;if(t.length&&t[t.length-1]=="")t.pop();if((r=t.length)>4)return e;for(o=[],n=0;n1&&s.charAt(0)=="0"){i=ee.test(s)?16:8;s=s.slice(i==8?1:2)}if(s==="")a=0;else{if(!(i==10?re:i==8?te:oe).test(s))return e;a=parseInt(s,i)}o.push(a)}for(n=0;n=Z(256,5-r))return null}else if(a>255)return null}for(l=o.pop(),n=0;n":1,"`":1}),ce=d({},ue,{"#":1,"?":1,"{":1,"}":1}),T=d({},ce,{"/":1,":":1,";":1,"=":1,"@":1,"[":1,"\\":1,"]":1,"^":1,"|":1}),E=function(e,t){var r=V(e,0);return 32h,applyPalette:()=>function(e,t,r="rgb565"){if(!e||!e.buffer)throw new Error("quantize() expected RGBA Uint8Array data");if(!(e instanceof Uint8Array||e instanceof Uint8ClampedArray))throw new Error("quantize() expected RGBA Uint8Array data");if(256>24&255,c=l>>16&255,d=l>>8&255,l=255&l,h=A(l,d,c,u),h=h in a?a[h]:a[h]=function(t,r,o,n,s){let i=0,a=1e100;for(let e=0;ea||(l=u[0],(c+=v(l-t))>a||(l=u[1],(c+=v(l-r))>a||(l=u[2],(c+=v(l-o))>a||(a=c,i=e))))}return i}(l,d,c,u,t);i[e]=h}else{const g="rgb444"===r?P:O;for(let e=0;e>16&255,m=f>>8&255,f=255&f,y=g(f,m,p),y=y in a?a[y]:a[y]=function(t,r,o,n){let s=0,i=1e100;for(let e=0;ei||(a=l[1],(u+=v(a-r))>i||(a=l[2],(u+=v(a-o))>i||(i=u,s=e)))}return s}(f,m,p,t);i[e]=y}}return i},default:()=>f,nearestColor:()=>function(e,t,r=u){return e[l(e,t,r)]},nearestColorIndex:()=>l,nearestColorIndexWithDistance:()=>d,prequantize:()=>function(e,{roundRGB:r=5,roundAlpha:o=10,oneBitAlpha:n=null}={}){const s=new Uint32Array(e.buffer);for(let t=0;t>24&255;var a,l=i>>16&255,u=i>>8&255,i=255&i;e=c(e,o),n&&(a="number"==typeof n?n:127,e=e<=a?0:255),i=c(i,r),u=c(u,r),l=c(l,r),s[t]=e<<24|l<<16|u<<8|i<<0}},quantize:()=>function(e,t,r={}){var{format:o="rgb565",clearAlpha:n=!0,clearAlphaColor:s=0,clearAlphaThreshold:i=0,oneBitAlpha:a=!1}=r;if(!e||!e.buffer)throw new Error("quantize() expected RGBA Uint8Array data");if(!(e instanceof Uint8Array||e instanceof Uint8ClampedArray))throw new Error("quantize() expected RGBA Uint8Array data");e=new Uint32Array(e.buffer);let l=!1!==r.useSqrt;const u="rgba4444"===o,c=function(r,e){const t="rgb444"===e?4096:65536,o=new Array(t),n=r.length;if("rgba4444"===e)for(let t=0;t>24&255,a=s>>16&255,l=s>>8&255,s=255&s,u=A(s,l,a,i);let e=u in o?o[u]:o[u]=D();e.rc+=s,e.gc+=l,e.bc+=a,e.ac+=i,e.cnt++}else if("rgb444"===e)for(let t=0;t>16&255,h=c>>8&255,c=255&c,f=P(c,h,d);let e=f in o?o[f]:o[f]=D();e.rc+=c,e.gc+=h,e.bc+=d,e.cnt++}else for(let t=0;t>16&255,y=p>>8&255,p=255&p,g=O(p,y,m);let e=g in o?o[g]:o[g]=D();e.rc+=p,e.gc+=y,e.bc+=m,e.cnt++}return o}(e,o),d=c.length,h=d-1,f=new Uint32Array(d+1);for(var p=0,m=0;m>1,!(c[y=f[v]].err<=b));g=v)f[g]=y;f[g]=m}var _,j=p-t;for(m=0;m=_.mtm&&c[_.nn].mtm<=_.tm)break;_.mtm==h?x=f[1]=f[f[0]--]:(I(c,x,!1),_.tm=m);b=c[x].err;for(g=1;(v=g+g)<=f[0]&&(vc[f[v+1]].err&&v++,!(b<=c[y=f[v]].err));g=v)f[g]=y;f[g]=x}var w=c[_.nn],S=_.cnt,T=w.cnt,E=1/(S+T);u&&(_.ac=E*(S*_.ac+T*w.ac)),_.rc=E*(S*_.rc+T*w.rc),_.gc=E*(S*_.gc+T*w.gc),_.bc=E*(S*_.bc+T*w.bc),_.cnt+=w.cnt,_.mtm=++m,c[w.bk].fw=w.fw,c[w.fw].bk=w.bk,w.mtm=h}let M=[];for(m=0;;0){let e=L(Math.round(c[m].rc),0,255),t=L(Math.round(c[m].gc),0,255),r=L(Math.round(c[m].bc),0,255),o=255;u&&(o=L(Math.round(c[m].ac),0,255),a&&(k="number"==typeof a?a:127,o=o<=k?0:255),n&&o<=i&&(e=t=r=s,o=0));var k=u?[e,t,r,o]:[e,t,r];if(function(t,r){for(let e=0;efunction(r,o,e=5){if(r.length&&o.length){var n=r.map(e=>e.slice(0,3)),s=e*e,i=r[0].length;for(let t=0;ti?e.slice(0,3):e.slice();var a=d(n,e.slice(0,3),u),l=a[0],a=a[1];0>>0),0!=t&&(e=Math.max(e,256));const r=s;s=new Uint8Array(e),0>=8,c-=8;if((v>m||f)&&(f?(p=h,m=(1<>=8,c-=8;0>3}function A(e,t,r,o){return e>>4|240&t|(240&r)<<4|(240&o)<<8}function P(e,t,r){return e>>4<<8|240&t|r>>4}function L(e,t,r){return e>8&255)}function C(e,t){for(var r=0;r>1,c=-7,d=r?n-1:0,h=r?-1:1,n=e[t+d];for(d+=h,s=n&(1<<-c)-1,n>>=-c,c+=a;0>=-c,c+=o;0>1,d=23===n?Math.pow(2,-24)-Math.pow(2,-77):0,h=o?0:s-1,f=o?1:-1,s=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(a=isNaN(t)?1:0,i=u):(i=Math.floor(Math.log(t)/Math.LN2),t*(o=Math.pow(2,-i))<1&&(i--,o*=2),2<=(t+=1<=i+c?d/o:d*Math.pow(2,1-c))*o&&(i++,o/=2),u<=i+c?(a=0,i=u):1<=i+c?(a=(t*o-1)*Math.pow(2,n),i+=c):(a=t*Math.pow(2,c-1)*Math.pow(2,n),i=0));8<=n;e[r+h]=255&a,h+=f,a/=256,n-=8);for(i=i<Math.abs(e[0])&&(t=1),t=Math.abs(e[2])>Math.abs(e[t])?2:t}function M(e,t){e.f+=t.f,e.b.f+=t.b.f}function h(e,t,r){return e=e.a,t=t.a,r=r.a,t.b.a===e?r.b.a===e?g(t.a,r.a)?b(r.b.a,t.a,r.a)<=0:0<=b(t.b.a,r.a,t.a):b(r.b.a,e,r.a)<=0:r.b.a===e?0<=b(t.b.a,e,t.a):(t=v(t.b.a,e,t.a),(e=v(r.b.a,e,r.a))<=t)}function k(e){e.a.i=null;var t=e.e;t.a.c=t.c,t.c.a=t.a,e.e=null}function C(e,t){m(e.a),e.c=!1,(e.a=t).i=e}function O(e){for(var t=e.a.a;(e=G(e)).a.a===t;);return e.c&&(C(e,t=S(B(e).a.b,e.a.e)),e=G(e)),e}function q(e,t,r){var o=new N;return o.a=r,o.e=p(e.f,t.e,o),r.i=o}function X(e,t){switch(e.s){case 100130:return 0!=(1&t);case 100131:return 0!==t;case 100132:return 0>1]],a[i[u]])?U:ue)(r,u),a[s]=null,l[s]=r.b,r.b=s}else for(r.c[-(s+1)]=null;0Math.max(i.a,l.a))){if(g(s,i)){if(0r.f&&(r.f*=2,r.c=ae(r.c,r.f+1)),0===r.b?n=o:(n=r.b,r.b=r.c[r.b]),r.e[n]=t,r.c[n]=o,r.d[o]=n,r.h&&ue(r,o),n):(r=e.a++,e.c[r]=t,-(r+1))}function se(e){if(0===e.a)return le(e.b);var t=e.c[e.d[e.a-1]];if(0!==e.b.a&&g(F(e.b),t))return le(e.b);for(;--e.a,0e.a||g(o[i],o[l])){n[r[s]=i]=s;break}n[r[s]=l]=s,s=a}}function ue(e,t){for(var r=e.d,o=e.e,n=e.c,s=t,i=r[s];;){var a=s>>1,l=r[a];if(0==a||g(o[l],o[i])){n[r[s]=i]=s;break}n[r[s]=l]=s,s=a}}function N(){this.e=this.a=null,this.f=0,this.c=this.b=this.h=this.d=!1}function B(e){return e.e.c.b}function G(e){return e.e.a.b}(t=r.prototype).x=function(){I(this,0)},t.B=function(e,t){switch(e){case 100142:return;case 100140:switch(t){case 100130:case 100131:case 100132:case 100133:case 100134:return void(this.s=t)}break;case 100141:return void(this.m=!!t);default:return void l(this,100900)}l(this,100901)},t.y=function(e){switch(e){case 100142:return 0;case 100140:return this.s;case 100141:return this.m;default:l(this,100900)}return!1},t.A=function(e,t,r){this.j[0]=e,this.j[1]=t,this.j[2]=r},t.z=function(e,t){var r=t||null;switch(e){case 100100:case 100106:this.h=r;break;case 100104:case 100110:this.l=r;break;case 100101:case 100107:this.k=r;break;case 100102:case 100108:this.i=r;break;case 100103:case 100109:this.p=r;break;case 100105:case 100111:this.o=r;break;case 100112:this.r=r;break;default:l(this,100900)}},t.C=function(e,t){var r=!1,o=[0,0,0];I(this,2);for(var n=0;n<3;++n){var s=e[n];s<-1e150&&(s=-1e150,r=!0),1e150o[u]&&(o[u]=c,n[u]=r)}if(o[1]-a[1]>o[r=0]-a[0]&&(r=1),a[r=o[2]-a[2]>o[r]-a[r]?2:r]>=o[r])i[0]=0,i[1]=0,i[2]=1;else{for(a=l[r],n=n[r],l=[o=0,0,0],a=[a.g[0]-n.g[0],a.g[1]-n.g[1],a.g[2]-n.g[2]],u=[0,0,0],r=s.e;r!==s;r=r.e)u[0]=r.g[0]-n.g[0],u[1]=r.g[1]-n.g[1],u[2]=r.g[2]-n.g[2],l[0]=a[1]*u[2]-a[2]*u[1],l[1]=a[2]*u[0]-a[0]*u[2],l[2]=a[0]*u[1]-a[1]*u[0],o<(c=l[0]*l[0]+l[1]*l[1]+l[2]*l[2])&&(o=c,i[0]=l[0],i[1]=l[1],i[2]=l[2]);o<=0&&(i[0]=i[1]=i[2]=0,i[W(a)]=1)}s=!0}for(l=W(i),r=this.b.c,o=(l+1)%3,n=(l+2)%3,l=0>=1;)++n;if(i=1<>8&255,g[v++]=255&t,g[v++]=t>>8&255,g[v++]=(null!==b?128:0)|n,g[v++]=s,g[v++]=0,null!==b)for(var a=0,l=b.length;a>16&255,g[v++]=u>>8&255,g[v++]=255&u}if(null!==o){if(o<0||65535>8&255,g[v++]=0}var j=!1;this.addFrame=function(e,t,r,o,n,s){if(!0===j&&(--v,j=!1),s=void 0===s?{}:s,e<0||t<0||65535>=1;)++u;var l=1<>8&255,g[v++]=f,g[v++]=0),g[v++]=44,g[v++]=255&e,g[v++]=e>>8&255,g[v++]=255&t,g[v++]=t>>8&255,g[v++]=255&r,g[v++]=r>>8&255,g[v++]=255&o,g[v++]=o>>8&255,g[v++]=!0===i?128|u-1:0,!0===i)for(var p=0,m=a.length;p>16&255,g[v++]=y>>8&255,g[v++]=255&y}return v=function(t,r,e,o){t[r++]=e;var n=r++,s=1<>=8,c-=8,r===n+256&&(t[n]=255,n=r++)}function f(e){d|=e<>=8,c-=8,r===n+256&&(t[n]=255,n=r++);4096===l?(f(s),l=1+a,u=e+1,m={}):(1<>=l,c-=l,y==s)a=1+i,u=(1<<(l=n+1))-1,m=null;else{if(y==i)break;for(var g=y>8,++v;var _=b;if(o>=8;null!==m&&a<4096&&(p[a++]=m<<8|_,u+1<=a&&l<12&&(++l,u=u<<1|1)),m=y}}h!==o&&console.log("Warning, gif stream shorter than expected.")}try{r.GifWriter=o,r.GifReader=function(b){var e=0;if(71!==b[e++]||73!==b[e++]||70!==b[e++]||56!==b[e++]||56!=(b[e++]+1&253)||97!==b[e++])throw new Error("Invalid GIF 87a/89a header.");var _=b[e++]|b[e++]<<8,t=b[e++]|b[e++]<<8,r=b[e++],o=1<<1+(7&r),n=(b[e++],b[e++],null),s=null,i=(r>>7&&(n=e,e+=3*(s=o)),!0),a=[],l=0,u=null,c=0,d=null;for(this.width=_,this.height=t;i&&e>2&7,e++;break;case 254:for(;;){if(!(0<=(f=b[e++])))throw Error("Invalid block size");if(0===f)break;e+=f}break;default:throw new Error("Unknown graphic control label: 0x"+b[e-1].toString(16))}break;case 44:var f,p=b[e++]|b[e++]<<8,m=b[e++]|b[e++]<<8,y=b[e++]|b[e++]<<8,g=b[e++]|b[e++]<<8,v=b[e++],j=v>>6&1,x=1<<1+(7&v),w=n,S=s,T=!1,v=(v>>7&&(T=!0,w=e,e+=3*(S=x)),e);for(e++;;){if(!(0<=(f=b[e++])))throw Error("Invalid block size");if(0===f)break;e+=f}a.push({x:p,y:m,width:y,height:g,has_local_palette:T,palette_offset:w,palette_size:S,data_offset:v,data_length:e-v,transparent_index:u,interlaced:!!j,delay:l,disposal:c});break;case 59:i=!1;break;default:throw new Error("Unknown gif block: 0x"+b[e-1].toString(16))}this.numFrames=function(){return a.length},this.loopCount=function(){return d},this.frameInfo=function(e){if(e<0||e>=a.length)throw new Error("Frame index out of range.");return a[e]},this.decodeAndBlitFrameBGRA=function(e,t){for(var e=this.frameInfo(e),r=e.width*e.height,o=new Uint8Array(r),n=(E(b,e.data_offset,o,r),e.palette_offset),s=e.transparent_index,i=(null===s&&(s=256),e.width),a=_-i,l=i,u=4*(e.y*_+e.x),c=4*((e.y+e.height)*_+e.x),d=u,h=4*a,f=(!0===e.interlaced&&(h+=4*_*7),8),p=0,m=o.length;p>=1)),v===s?d+=4:(y=b[n+3*v],g=b[n+3*v+1],v=b[n+3*v+2],t[d++]=v,t[d++]=g,t[d++]=y,t[d++]=255),--l}},this.decodeAndBlitFrameRGBA=function(e,t){for(var e=this.frameInfo(e),r=e.width*e.height,o=new Uint8Array(r),n=(E(b,e.data_offset,o,r),e.palette_offset),s=e.transparent_index,i=(null===s&&(s=256),e.width),a=_-i,l=i,u=4*(e.y*_+e.x),c=4*((e.y+e.height)*_+e.x),d=u,h=4*a,f=(!0===e.interlaced&&(h+=4*_*7),8),p=0,m=o.length;p>=1)),v===s?d+=4:(y=b[n+3*v],g=b[n+3*v+1],v=b[n+3*v+2],t[d++]=y,t[d++]=g,t[d++]=v,t[d++]=255),--l}}}}catch(e){}},{}],254:[function(Pr,r,o){!function(Ar){var e,t;e=this,t=function(_){"use strict";function D(e){if(null==this)throw TypeError();var t,r=String(this),o=r.length,e=e?Number(e):0;if(!((e=e!=e?0:e)<0||o<=e))return 55296<=(t=r.charCodeAt(e))&&t<=56319&&e+1>>16-t;return e.tag>>>=t,e.bitcount-=t,o+r}function $(e,t){for(;e.bitcount<24;)e.tag|=e.source[e.sourceIndex++]<>>=1,r+=t.table[++n],0<=(o-=t.table[n]););return e.tag=s,e.bitcount-=n,t.trans[r+o]}function ee(e,t,r){for(;;){var o=$(e,t);if(256===o)return U;if(o<256)e.dest[e.destLen++]=o;else for(var n,s=b(e,H[o-=257],W[o]),o=$(e,r),i=n=e.destLen-b(e,q[o],X[o]);i>>=1,o=n,b(s,2,0)){case 0:r=function(e){for(var t,r;8this.x2&&(this.x2=e)),"number"==typeof t&&((isNaN(this.y1)||isNaN(this.y2))&&(this.y1=t,this.y2=t),tthis.y2&&(this.y2=t))},a.prototype.addX=function(e){this.addPoint(e,null)},a.prototype.addY=function(e){this.addPoint(null,e)},a.prototype.addBezier=function(e,t,r,o,n,s,i,a){var l=[e,t],u=[r,o],c=[n,s],d=[i,a];this.addPoint(e,t),this.addPoint(i,a);for(var h=0;h<=1;h++){var f,p=6*l[h]-12*u[h]+6*c[h],m=-3*l[h]+9*u[h]-9*c[h]+3*d[h],y=3*u[h]-3*l[h];0==m?0==p||0<(f=-y/p)&&f<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],f)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],f))):(f=Math.pow(p,2)-4*y*m)<0||(0<(y=(-p+Math.sqrt(f))/(2*m))&&y<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],y)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],y))),0<(y=(-p-Math.sqrt(f))/(2*m))&&y<1&&(0===h&&this.addX(g(l[h],u[h],c[h],d[h],y)),1===h&&this.addY(g(l[h],u[h],c[h],d[h],y))))}},a.prototype.addQuad=function(e,t,r,o,n,s){r=e+2/3*(r-e),o=t+2/3*(o-t);this.addBezier(e,t,r,o,r+1/3*(n-e),o+1/3*(s-t),n,s)},h.prototype.moveTo=function(e,t){this.commands.push({type:"M",x:e,y:t})},h.prototype.lineTo=function(e,t){this.commands.push({type:"L",x:e,y:t})},h.prototype.curveTo=h.prototype.bezierCurveTo=function(e,t,r,o,n,s){this.commands.push({type:"C",x1:e,y1:t,x2:r,y2:o,x:n,y:s})},h.prototype.quadTo=h.prototype.quadraticCurveTo=function(e,t,r,o){this.commands.push({type:"Q",x1:e,y1:t,x:r,y:o})},h.prototype.close=h.prototype.closePath=function(){this.commands.push({type:"Z"})},h.prototype.extend=function(e){var t;if(e.commands)e=e.commands;else if(e instanceof a)return t=e,this.moveTo(t.x1,t.y1),this.lineTo(t.x2,t.y1),this.lineTo(t.x2,t.y2),this.lineTo(t.x1,t.y2),void this.close();Array.prototype.push.apply(this.commands,e)},h.prototype.getBoundingBox=function(){for(var e=new a,t=0,r=0,o=0,n=0,s=0;s>8&255,255&e]},l.USHORT=r(2),w.SHORT=function(e){return[(e=32768<=e?-(65536-e):e)>>8&255,255&e]},l.SHORT=r(2),w.UINT24=function(e){return[e>>16&255,e>>8&255,255&e]},l.UINT24=r(3),w.ULONG=function(e){return[e>>24&255,e>>16&255,e>>8&255,255&e]},l.ULONG=r(4),w.LONG=function(e){return[(e=2147483648<=e?-(4294967296-e):e)>>24&255,e>>16&255,e>>8&255,255&e]},l.LONG=r(4),w.FIXED=w.ULONG,l.FIXED=l.ULONG,w.FWORD=w.SHORT,l.FWORD=l.SHORT,w.UFWORD=w.USHORT,l.UFWORD=l.USHORT,w.LONGDATETIME=function(e){return[0,0,0,0,e>>24&255,e>>16&255,e>>8&255,255&e]},l.LONGDATETIME=r(8),w.TAG=function(e){return L.argument(4===e.length,"Tag should be exactly 4 ASCII characters."),[e.charCodeAt(0),e.charCodeAt(1),e.charCodeAt(2),e.charCodeAt(3)]},l.TAG=r(4),w.Card8=w.BYTE,l.Card8=l.BYTE,w.Card16=w.USHORT,l.Card16=l.USHORT,w.OffSize=w.BYTE,l.OffSize=l.BYTE,w.SID=w.USHORT,l.SID=l.USHORT,w.NUMBER=function(e){return-107<=e&&e<=107?[e+139]:108<=e&&e<=1131?[247+((e-=108)>>8),255&e]:-1131<=e&&e<=-108?[251+((e=-e-108)>>8),255&e]:-32768<=e&&e<=32767?w.NUMBER16(e):w.NUMBER32(e)},l.NUMBER=function(e){return w.NUMBER(e).length},w.NUMBER16=function(e){return[28,e>>8&255,255&e]},l.NUMBER16=r(3),w.NUMBER32=function(e){return[29,e>>24&255,e>>16&255,e>>8&255,255&e]},l.NUMBER32=r(5),w.REAL=function(e){for(var t=e.toString(),r=/\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(t),o=(r&&(r=parseFloat("1e"+((r[2]?+r[2]:0)+r[1].length)),t=(Math.round(e*r)/r).toString()),""),n=0,s=t.length;n>8&255,t[t.length]=255&o}return t},l.UTF16=function(e){return 2*e.length};var se,ie={"x-mac-croatian":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®Š™´¨≠ŽØ∞±≤≥∆µ∂∑∏š∫ªºΩžø¿¡¬√ƒ≈Ć«Č… ÀÃÕŒœĐ—“”‘’÷◊©⁄€‹›Æ»–·‚„‰ÂćÁčÈÍÎÏÌÓÔđÒÚÛÙıˆ˜¯πË˚¸Êæˇ","x-mac-cyrillic":"АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°Ґ£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµґЈЄєЇїЉљЊњјЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю","x-mac-gaelic":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØḂ±≤≥ḃĊċḊḋḞḟĠġṀæøṁṖṗɼƒſṠ«»… ÀÃÕŒœ–—“”‘’ṡẛÿŸṪ€‹›Ŷŷṫ·Ỳỳ⁊ÂÊÁËÈÍÎÏÌÓÔ♣ÒÚÛÙıÝýŴŵẄẅẀẁẂẃ","x-mac-greek":"Ĺ²É³ÖÜ΅àâä΄¨çéèê룙î‰ôö¦€ùûü†ΓΔΘΛΞΠß®©ΣΪ§≠°·Α±≤≥¥ΒΕΖΗΙΚΜΦΫΨΩάΝ¬ΟΡ≈Τ«»… ΥΧΆΈœ–―“”‘’÷ΉΊΌΎέήίόΏύαβψδεφγηιξκλμνοπώρστθωςχυζϊϋΐΰ­","x-mac-icelandic":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûüÝ°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€ÐðÞþý·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-inuit":"ᐃᐄᐅᐆᐊᐋᐱᐲᐳᐴᐸᐹᑉᑎᑏᑐᑑᑕᑖᑦᑭᑮᑯᑰᑲᑳᒃᒋᒌᒍᒎᒐᒑ°ᒡᒥᒦ•¶ᒧ®©™ᒨᒪᒫᒻᓂᓃᓄᓅᓇᓈᓐᓯᓰᓱᓲᓴᓵᔅᓕᓖᓗᓘᓚᓛᓪᔨᔩᔪᔫᔭ… ᔮᔾᕕᕖᕗ–—“”‘’ᕘᕙᕚᕝᕆᕇᕈᕉᕋᕌᕐᕿᖀᖁᖂᖃᖄᖅᖏᖐᖑᖒᖓᖔᖕᙱᙲᙳᙴᙵᙶᖖᖠᖡᖢᖣᖤᖥᖦᕼŁł","x-mac-ce":"ÄĀāÉĄÖÜáąČäčĆć鏟ĎíďĒēĖóėôöõúĚěü†°Ę£§•¶ß®©™ę¨≠ģĮįĪ≤≥īĶ∂∑łĻļĽľĹĺŅņѬ√ńŇ∆«»… ňŐÕőŌ–—“”‘’÷◊ōŔŕŘ‹›řŖŗŠ‚„šŚśÁŤťÍŽžŪÓÔūŮÚůŰűŲųÝýķŻŁżĢˇ",macintosh:"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-romanian":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ĂȘ∞±≤≥¥µ∂∑∏π∫ªºΩăș¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›Țț‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ","x-mac-turkish":"ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸĞğİıŞş‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙˆ˜¯˘˙˚¸˝˛ˇ"},ae=(m.MACSTRING=function(e,t,r,o){var n=ie[o];if(void 0!==n){for(var s="",i=0;i>8&255,l+256&255)}return s})(e,t,r);return r},w.INDEX=function(e){for(var t=1,r=[t],o=[],n=0;n>8,t[c+1]=255&d,t=t.concat(o[u])}return t},l.TABLE=function(e){for(var t=0,r=e.fields.length,o=0;o>1,a.skip("uShort",3),y.glyphIndexMap={};for(var _,j=new R.Parser(g,v+b+14),x=new R.Parser(g,v+b+16+2*_),w=new R.Parser(g,v+b+16+4*_),S=new R.Parser(g,v+b+16+6*_),T=v+b+16+8*_,E=0;E<_-1;E+=1)for(var M=void 0,k=j.parseUShort(),C=x.parseUShort(),O=w.parseShort(),A=S.parseUShort(),P=C;P<=k;P+=1)0!==A?(T=(T=S.offset+S.relativeOffset-2)+A+2*(P-C),0!==(M=R.getUShort(g,T))&&(M=M+O&65535)):M=P+O&65535,y.glyphIndexMap[P]=M}return r},make:function(e){for(var t=!0,r=e.length-1;0>4,s=15&s;if(15==i)break;if(o+=n[i],15==s)break;o+=n[s]}return parseFloat(o)}if(32<=t&&t<=246)return t-139;if(247<=t&&t<=250)return 256*(t-247)+e.parseByte()+108;if(251<=t&&t<=254)return 256*-(t-251)-e.parseByte()-108;throw new Error("Invalid b0 "+t)}function Ie(e,t,r){var o=new R.Parser(e,t=void 0!==t?t:0),n=[],s=[];for(r=void 0!==r?r:e.length;o.relativeOffset>1,E.length=0,k=!0}return function e(t){for(var r,o,n,s,i,a,l,u,c,d,h,f,p=0;pMath.abs(f-A)?O=h+E.shift():A=f+E.shift(),T.curveTo(v,b,_,j,l,u),T.curveTo(c,d,h,f,O,A);break;default:console.log("Glyph "+g.index+": unknown operator 1200"+m),E.length=0}break;case 14:0>3;break;case 21:2>16),p+=2;break;case 29:i=E.pop()+y.gsubrsBias,(a=y.gsubrs[i])&&e(a);break;case 30:for(;0=r.begin&&e=c.length&&(s=o.parseChar(),r.names.push(o.parseString(s)));break;case 2.5:r.numberOfGlyphs=o.parseUShort(),r.offset=new Array(r.numberOfGlyphs);for(var a=0;at.value.tag?1:-1}),t.fields=t.fields.concat(o),t.fields=t.fields.concat(n),t}function xt(e,t,r){for(var o=0;o 123 are reserved for internal usage");f|=1<>>1,s=e[n].tag;if(s===t)return n;s>>1,s=e[n];if(s===t)return n;s>>1,i=(n=e[s]).start;if(i===t)return n;i(n=e[r-1]).end?0:n}function Mt(e,t){this.font=e,this.tableName=t}function kt(e){Mt.call(this,e,"gpos")}function i(e){Mt.call(this,e,"gsub")}function Ct(e,t,r){for(var o=e.subtables,n=0;nt.points.length-1||o.matchedPoints[1]>n.points.length-1)throw Error("Matched points out of range in "+t.name);var i=t.points[o.matchedPoints[0]],a=n.points[o.matchedPoints[1]],o={xScale:o.xScale,scale01:o.scale01,scale10:o.scale10,yScale:o.yScale,dx:0,dy:0},a=Lt([a],o)[0];o.dx=i.x-a.x,o.dy=i.y-a.y,s=Lt(n.points,o)}t.points=t.points.concat(s)}}return Rt(t.points)}(kt.prototype=Mt.prototype={searchTag:St,binSearch:Tt,getTable:function(e){var t=this.font.tables[this.tableName];return t=!t&&e?this.font.tables[this.tableName]=this.createDefaultTable():t},getScriptNames:function(){var e=this.getTable();return e?e.scripts.map(function(e){return e.tag}):[]},getDefaultScriptName:function(){var e=this.getTable();if(e){for(var t=!1,r=0;r=i[t-1].tag,"Features must be added in alphabetical order."),i.push(n={tag:r,feature:{params:0,lookupListIndexes:[]}}),s.push(t),n.feature}},getLookupTables:function(e,t,r,o,n){var e=this.getFeatureTable(e,t,r,n),s=[];if(e){for(var i,a=e.lookupListIndexes,l=this.font.tables[this.tableName].lookups,u=0;u",s),t.stack.push(Math.round(64*s))}function hr(e,t){var r=t.stack,o=r.pop(),n=t.fv,s=t.pv,i=t.ppem,a=t.deltaBase+16*(e-1),l=t.deltaShift,u=t.z0;_.DEBUG&&console.log(t.step,"DELTAP["+e+"]",o,r);for(var c=0;c>4)===i&&(0<=(h=(15&h)-8)&&h++,_.DEBUG&&console.log(t.step,"DELTAPFIX",d,"by",h*l),d=u[d],n.setRelative(d,d,h*l,s))}}function fr(e,t){var r=t.stack,o=r.pop();_.DEBUG&&console.log(t.step,"ROUND[]"),r.push(64*t.round(o/64))}function pr(e,t){var r=t.stack,o=r.pop(),n=t.ppem,s=t.deltaBase+16*(e-1),i=t.deltaShift;_.DEBUG&&console.log(t.step,"DELTAC["+e+"]",o,r);for(var a=0;a>4)===n&&(0<=(u=(15&u)-8)&&u++,u=u*i,_.DEBUG&&console.log(t.step,"DELTACFIX",l,"by",u),t.cvt[l]+=u)}}function mr(e,t){var r,o=t.stack,n=o.pop(),o=o.pop(),s=t.z2[n],i=t.z1[o];_.DEBUG&&console.log(t.step,"SDPVTL["+e+"]",n,o),n=e?(r=s.y-i.y,i.x-s.x):(r=i.x-s.x,i.y-s.y),t.dpv=qt(r,n)}function k(e,t){var r=t.stack,o=t.prog,n=t.ip;_.DEBUG&&console.log(t.step,"PUSHB["+e+"]");for(var s=0;s":"_")+(o?"R":"_")+(0===n?"Gr":1===n?"Bl":2===n?"Wh":"")+"]",e?u+"("+s.cvt[u]+","+a+")":"",l,"(d =",i,"->",y*m,")"),s.rp1=s.rp0,s.rp2=l,t&&(s.rp0=l)}Ft.prototype.exec=function(e,t){if("number"!=typeof t)throw new Error("Point size is not a number!");if(!(2",o),a.interpolate(d,s,i,l),a.touch(d)}e.loop=1},lr.bind(void 0,0),lr.bind(void 0,1),function(e){for(var t=e.stack,r=e.rp0,o=e.z0[r],n=e.loop,s=e.fv,i=e.pv,a=e.z1;n--;){var l=t.pop(),u=a[l];_.DEBUG&&console.log(e.step,(1'.concat(n,"").concat(t,""),this.dummyDOM||(this.dummyDOM=document.getElementById(o).parentNode),this.descriptions?this.descriptions.fallbackElements||(this.descriptions.fallbackElements={}):this.descriptions={fallbackElements:{}},this.descriptions.fallbackElements[e]?this.descriptions.fallbackElements[e].innerHTML!==n&&(this.descriptions.fallbackElements[e].innerHTML=n):this._describeElementHTML("fallback",e,n),r===this.LABEL&&(this.descriptions.labelElements||(this.descriptions.labelElements={}),this.descriptions.labelElements[e]?this.descriptions.labelElements[e].innerHTML!==n&&(this.descriptions.labelElements[e].innerHTML=n):this._describeElementHTML("label",e,n)))},s.default.prototype._describeHTML=function(e,t){var r,o=this.canvas.id;"fallback"===e?(this.dummyDOM.querySelector("#".concat(o+i))?this.dummyDOM.querySelector("#"+o+l).insertAdjacentHTML("beforebegin",'

        ')):(r='

        '),this.dummyDOM.querySelector("#".concat(o,"accessibleOutput"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutput")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#".concat(o)).innerHTML=r),this.descriptions.fallback=this.dummyDOM.querySelector("#".concat(o).concat(a)),this.descriptions.fallback.innerHTML=t):"label"===e&&(this.dummyDOM.querySelector("#".concat(o+u))?this.dummyDOM.querySelector("#".concat(o+d))&&this.dummyDOM.querySelector("#".concat(o+d)).insertAdjacentHTML("beforebegin",'

        ')):(r='

        '),this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#"+o).insertAdjacentHTML("afterend",r)),this.descriptions.label=this.dummyDOM.querySelector("#"+o+c),this.descriptions.label.innerHTML=t)},s.default.prototype._describeElementHTML=function(e,t,r){var o,n=this.canvas.id;"fallback"===e?(this.dummyDOM.querySelector("#".concat(n+i))?this.dummyDOM.querySelector("#"+n+l)||this.dummyDOM.querySelector("#"+n+a).insertAdjacentHTML("afterend",'
        Canvas elements and their descriptions
        ')):(o='
        Canvas elements and their descriptions
        '),this.dummyDOM.querySelector("#".concat(n,"accessibleOutput"))?this.dummyDOM.querySelector("#".concat(n,"accessibleOutput")).insertAdjacentHTML("beforebegin",o):this.dummyDOM.querySelector("#"+n).innerHTML=o),(o=document.createElement("tr")).id=n+"_fte_"+t,this.dummyDOM.querySelector("#"+n+l).appendChild(o),this.descriptions.fallbackElements[t]=this.dummyDOM.querySelector("#".concat(n).concat("_fte_").concat(t)),this.descriptions.fallbackElements[t].innerHTML=r):"label"===e&&(this.dummyDOM.querySelector("#".concat(n+u))?this.dummyDOM.querySelector("#".concat(n+d))||this.dummyDOM.querySelector("#"+n+c).insertAdjacentHTML("afterend",'
        ')):(o='
        '),this.dummyDOM.querySelector("#".concat(n,"accessibleOutputLabel"))?this.dummyDOM.querySelector("#".concat(n,"accessibleOutputLabel")).insertAdjacentHTML("beforebegin",o):this.dummyDOM.querySelector("#"+n).insertAdjacentHTML("afterend",o)),(e=document.createElement("tr")).id=n+"_lte_"+t,this.dummyDOM.querySelector("#"+n+d).appendChild(e),this.descriptions.labelElements[t]=this.dummyDOM.querySelector("#".concat(n).concat("_lte_").concat(t)),this.descriptions.labelElements[t].innerHTML=r)};e=s.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.ends-with":195,"core-js/modules/es.string.replace":201}],261:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.map"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.map"),e("core-js/modules/es.string.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.prototype._updateGridOutput=function(e){var t,r,o,n;this.dummyDOM.querySelector("#".concat(e,"_summary"))&&(t=this._accessibleOutputs[e],o=function(e,t,r,o){t="".concat(t," canvas, ").concat(r," by ").concat(o," pixels, contains ").concat(e[0]);t=(1===e[0]?"".concat(t," shape: "):"".concat(t," shapes: ")).concat(e[1]);return t}((r=function(e,t){var r,o="",n="",s=0;for(r in t){var i,a=0;for(i in t[r]){var l='
      • ').concat(t[r][i].color," ").concat(r,",");"line"===r?l+=" location = ".concat(t[r][i].pos,", length = ").concat(t[r][i].length," pixels"):(l+=" location = ".concat(t[r][i].pos),"point"!==r&&(l+=", area = ".concat(t[r][i].area," %")),l+="
        • "),o+=l,a++,s++}n=1').concat(t[r][a].color," ").concat(r,"        "):'').concat(t[r][a].color," ").concat(r," midpoint"),i[t[r][a].loc.locY][t[r][a].loc.locX]?i[t[r][a].loc.locY][t[r][a].loc.locX]=i[t[r][a].loc.locY][t[r][a].loc.locX]+" "+l:i[t[r][a].loc.locY][t[r][a].loc.locX]=l,n++}for(o in i){var u,c="";for(u in i[o])c+="",void 0!==i[o][u]&&(c+=i[o][u]),c+="";s=s+c+""}return s}(e,this.ingredients.shapes),o!==t.summary.innerHTML&&(t.summary.innerHTML=o),n!==t.map.innerHTML&&(t.map.innerHTML=n),r.details!==t.shapeDetails.innerHTML&&(t.shapeDetails.innerHTML=r.details),this._accessibleOutputs[e]=t)};e=e.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.from":161,"core-js/modules/es.array.map":167,"core-js/modules/es.string.iterator":197}],262:[function(e,t,r){"use strict";e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.map"),e("core-js/modules/es.number.to-fixed"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var o=(e=e("../core/main"))&&e.__esModule?e:{default:e};function l(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t')):this.dummyDOM.querySelector("#".concat(s)).innerHTML='
        '))):"Label"===t&&(r=s+e+(i=t),this.dummyDOM.querySelector("#".concat(o=s+"accessibleOutput"+t))||(this.dummyDOM.querySelector("#".concat(s,"_Label"))?this.dummyDOM.querySelector("#".concat(s,"_Label")):this.dummyDOM.querySelector("#".concat(s))).insertAdjacentHTML("afterend",'
        '))),this._accessibleOutputs[r]={},"textOutput"===e?(i="#".concat(s,"gridOutput").concat(i),n='
        Text Output

          '),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("beforebegin",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].list=this.dummyDOM.querySelector("#".concat(r,"_list"))):"gridOutput"===e&&(i="#".concat(s,"textOutput").concat(i),n='
          Grid Output

            '),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("afterend",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].map=this.dummyDOM.querySelector("#".concat(r,"_map"))),this._accessibleOutputs[r].shapeDetails=this.dummyDOM.querySelector("#".concat(r,"_shapeDetails")),this._accessibleOutputs[r].summary=this.dummyDOM.querySelector("#".concat(r,"_summary"))},o.default.prototype._updateAccsOutput=function(){var e=this.canvas.id;JSON.stringify(this.ingredients.shapes)===this.ingredients.pShapes&&this.ingredients.colors.background===this.ingredients.pBackground||(this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this._accessibleOutputs.text&&this._updateTextOutput(e+"textOutput"),this._accessibleOutputs.grid&&this._updateGridOutput(e+"gridOutput"),this._accessibleOutputs.textLabel&&this._updateTextOutput(e+"textOutputLabel"),this._accessibleOutputs.gridLabel&&this._updateGridOutput(e+"gridOutputLabel"))},o.default.prototype._accsBackground=function(e){this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this.ingredients.pBackground=this.ingredients.colors.background,this.ingredients.shapes={},this.ingredients.colors.backgroundRGBA!==e&&(this.ingredients.colors.backgroundRGBA=e,this.ingredients.colors.background=this._rgbColorName(e))},o.default.prototype._accsCanvasColors=function(e,t){"fill"===e?this.ingredients.colors.fillRGBA!==t&&(this.ingredients.colors.fillRGBA=t,this.ingredients.colors.fill=this._rgbColorName(t)):"stroke"===e&&this.ingredients.colors.strokeRGBA!==t&&(this.ingredients.colors.strokeRGBA=t,this.ingredients.colors.stroke=this._rgbColorName(t))},o.default.prototype._accsOutput=function(e,t){"ellipse"===e&&t[2]===t[3]?e="circle":"rectangle"===e&&t[2]===t[3]&&(e="square");var r,o,n={},s=!0,i=function(e,t){var r;e="rectangle"===e||"ellipse"===e||"arc"===e||"circle"===e||"square"===e?(r=Math.round(t[0]+t[2]/2),Math.round(t[1]+t[3]/2)):"triangle"===e?(r=(t[0]+t[2]+t[4])/3,(t[1]+t[3]+t[5])/3):"quadrilateral"===e?(r=(t[0]+t[2]+t[4]+t[6])/4,(t[1]+t[3]+t[5]+t[7])/4):"line"===e?(r=(t[0]+t[2])/2,(t[1]+t[3])/2):(r=t[0],t[1]);return[r,e]}(e,t);if("line"===e?(n.color=this.ingredients.colors.stroke,n.length=Math.round(this.dist(t[0],t[1],t[2],t[3])),r=this._getPos(t[0],[1]),o=this._getPos(t[2],[3]),n.loc=u(i,this.width,this.height),n.pos=r===o?"at ".concat(r):"from ".concat(r," to ").concat(o)):("point"===e?n.color=this.ingredients.colors.stroke:(n.color=this.ingredients.colors.fill,n.area=this._getArea(e,t)),n.pos=this._getPos.apply(this,l(i)),n.loc=u(i,this.width,this.height)),this.ingredients.shapes[e]){if(this.ingredients.shapes[e]!==[n]){for(var a in this.ingredients.shapes[e])JSON.stringify(this.ingredients.shapes[e][a])===JSON.stringify(n)&&(s=!1);!0===s&&this.ingredients.shapes[e].push(n)}}else this.ingredients.shapes[e]=[n]},o.default.prototype._getPos=function(e,t){var e=new DOMPointReadOnly(e,t),t=this._renderer.isP3D?new DOMMatrix(this._renderer.uMVMatrix.mat4):this.drawingContext.getTransform(),e=e.matrixTransform(t),t=e.x,e=e.y,r=this.width*this._pixelDensity,o=this.height*this._pixelDensity;return t<.4*r?e<.4*o?"top left":.6*oMath.PI?n+=o:n-=o)):"ellipse"===e||"circle"===e?n=3.14*t[2]/2*t[3]/2:"line"===e||"point"===e?n=0:"quadrilateral"===e?n=Math.abs((t[6]+t[0])*(t[7]-t[1])+(t[0]+t[2])*(t[1]-t[3])+(t[2]+t[4])*(t[3]-t[5])+(t[4]+t[6])*(t[5]-t[7]))/2:"rectangle"===e||"square"===e?n=t[2]*t[3]:"triangle"===e&&(n=Math.abs(t[0]*(t[3]-t[5])+t[2]*(t[5]-t[1])+t[4]*(t[1]-t[3]))/2),this.width*this._pixelDensity),i=this.height*this._pixelDensity,a=[new DOMPoint(0,0),new DOMPoint(s,0),new DOMPoint(s,i),new DOMPoint(0,i)],l=(this._renderer.isP3D?new DOMMatrix(this._renderer.uMVMatrix.mat4):this.drawingContext.getTransform()).inverse(),u=a.map(function(e){return e.matrixTransform(l)}),c=Math.abs((u[3].x+u[0].x)*(u[3].y-u[0].y)+(u[0].x+u[1].x)*(u[0].y-u[1].y)+(u[1].x+u[2].x)*(u[1].y-u[2].y)+(u[2].x+u[3].x)*(u[2].y-u[3].y))/2;return Math.round(100*n/c)};e=o.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.fill":155,"core-js/modules/es.array.from":161,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.map":167,"core-js/modules/es.number.to-fixed":180,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/web.dom-collections.iterator":243}],263:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.concat"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.prototype._updateTextOutput=function(e){var t,r,o,n;this.dummyDOM.querySelector("#".concat(e,"_summary"))&&(t=this._accessibleOutputs[e],o=function(e,t,r,o){r="Your output is a, ".concat(r," by ").concat(o," pixels, ").concat(t," canvas containing the following");r=1===e?"".concat(r," shape:"):"".concat(r," ").concat(e," shapes:");return r}((r=function(e,t){var r,o="",n=0;for(r in t)for(var s in t[r]){var i='
          • ').concat(t[r][s].color," ").concat(r,"");"line"===r?i+=", ".concat(t[r][s].pos,", ").concat(t[r][s].length," pixels long.
            • "):(i+=", at ".concat(t[r][s].pos),"point"!==r&&(i+=", covering ".concat(t[r][s].area,"% of the canvas")),i+="."),o+=i,n++}return{numShapes:n,listShapes:o}}(e,this.ingredients.shapes)).numShapes,this.ingredients.colors.background,this.width,this.height),n=function(e,t){var r,o="",n=0;for(r in t)for(var s in t[r]){var i='').concat(t[r][s].color," ").concat(r,"");"line"===r?i+="location = ".concat(t[r][s].pos,"length = ").concat(t[r][s].length," pixels"):(i+="location = ".concat(t[r][s].pos,""),"point"!==r&&(i+=" area = ".concat(t[r][s].area,"%")),i+=""),o+=i,n++}return o}(e,this.ingredients.shapes),o!==t.summary.innerHTML&&(t.summary.innerHTML=o),r.listShapes!==t.list.innerHTML&&(t.list.innerHTML=r.listShapes),n!==t.shapeDetails.innerHTML&&(t.shapeDetails.innerHTML=n),this._accessibleOutputs[e]=t)};e=e.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.concat":152}],264:[function(e,t,r){"use strict";var o=(o=e("./core/main"))&&o.__esModule?o:{default:o};e("./core/constants"),e("./core/environment"),e("./core/friendly_errors/stacktrace"),e("./core/friendly_errors/validate_params"),e("./core/friendly_errors/file_errors"),e("./core/friendly_errors/fes_core"),e("./core/friendly_errors/sketch_reader"),e("./core/helpers"),e("./core/legacy"),e("./core/preload"),e("./core/p5.Element"),e("./core/p5.Graphics"),e("./core/p5.Renderer"),e("./core/p5.Renderer2D"),e("./core/rendering"),e("./core/shim"),e("./core/structure"),e("./core/transform"),e("./core/shape/2d_primitives"),e("./core/shape/attributes"),e("./core/shape/curves"),e("./core/shape/vertex"),e("./accessibility/outputs"),e("./accessibility/textOutput"),e("./accessibility/gridOutput"),e("./accessibility/color_namer"),e("./color/color_conversion"),e("./color/creating_reading"),e("./color/p5.Color"),e("./color/setting"),e("./data/p5.TypedDict"),e("./data/local_storage.js"),e("./dom/dom"),e("./accessibility/describe"),e("./events/acceleration"),e("./events/keyboard"),e("./events/mouse"),e("./events/touch"),e("./image/filters"),e("./image/image"),e("./image/loading_displaying"),e("./image/p5.Image"),e("./image/pixels"),e("./io/files"),e("./io/p5.Table"),e("./io/p5.TableRow"),e("./io/p5.XML"),e("./math/calculation"),e("./math/math"),e("./math/noise"),e("./math/p5.Vector"),e("./math/random"),e("./math/trigonometry"),e("./typography/attributes"),e("./typography/loading_displaying"),e("./typography/p5.Font"),e("./utilities/array_functions"),e("./utilities/conversion"),e("./utilities/string_functions"),e("./utilities/time_date"),e("./webgl/3d_primitives"),e("./webgl/interaction"),e("./webgl/light"),e("./webgl/loading"),e("./webgl/material"),e("./webgl/p5.Camera"),e("./webgl/p5.DataArray"),e("./webgl/p5.Geometry"),e("./webgl/p5.Matrix"),e("./webgl/p5.RendererGL.Immediate"),e("./webgl/p5.RendererGL"),e("./webgl/p5.RendererGL.Retained"),e("./webgl/p5.Framebuffer"),e("./webgl/p5.Shader"),e("./webgl/p5.RenderBuffer"),e("./webgl/p5.Texture"),e("./webgl/text"),e("./core/init"),t.exports=o.default},{"./accessibility/color_namer":259,"./accessibility/describe":260,"./accessibility/gridOutput":261,"./accessibility/outputs":262,"./accessibility/textOutput":263,"./color/color_conversion":265,"./color/creating_reading":266,"./color/p5.Color":267,"./color/setting":268,"./core/constants":269,"./core/environment":270,"./core/friendly_errors/fes_core":271,"./core/friendly_errors/file_errors":272,"./core/friendly_errors/sketch_reader":273,"./core/friendly_errors/stacktrace":274,"./core/friendly_errors/validate_params":275,"./core/helpers":276,"./core/init":277,"./core/legacy":279,"./core/main":280,"./core/p5.Element":281,"./core/p5.Graphics":282,"./core/p5.Renderer":283,"./core/p5.Renderer2D":284,"./core/preload":285,"./core/rendering":286,"./core/shape/2d_primitives":287,"./core/shape/attributes":288,"./core/shape/curves":289,"./core/shape/vertex":290,"./core/shim":291,"./core/structure":292,"./core/transform":293,"./data/local_storage.js":294,"./data/p5.TypedDict":295,"./dom/dom":296,"./events/acceleration":297,"./events/keyboard":298,"./events/mouse":299,"./events/touch":300,"./image/filters":301,"./image/image":302,"./image/loading_displaying":303,"./image/p5.Image":304,"./image/pixels":305,"./io/files":306,"./io/p5.Table":307,"./io/p5.TableRow":308,"./io/p5.XML":309,"./math/calculation":310,"./math/math":311,"./math/noise":312,"./math/p5.Vector":313,"./math/random":314,"./math/trigonometry":315,"./typography/attributes":316,"./typography/loading_displaying":317,"./typography/p5.Font":318,"./utilities/array_functions":319,"./utilities/conversion":320,"./utilities/string_functions":321,"./utilities/time_date":322,"./webgl/3d_primitives":323,"./webgl/interaction":325,"./webgl/light":326,"./webgl/loading":327,"./webgl/material":328,"./webgl/p5.Camera":329,"./webgl/p5.DataArray":330,"./webgl/p5.Framebuffer":331,"./webgl/p5.Geometry":332,"./webgl/p5.Matrix":333,"./webgl/p5.RenderBuffer":334,"./webgl/p5.RendererGL":337,"./webgl/p5.RendererGL.Immediate":335,"./webgl/p5.RendererGL.Retained":336,"./webgl/p5.Shader":338,"./webgl/p5.Texture":339,"./webgl/text":340}],265:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};e.default.ColorConversion={_hsbaToHSLA:function(e){var t=e[0],r=e[1],o=e[2],n=(2-r)*o/2;return 0!=n&&(1==n?r=0:n<.5?r/=2-r:r=r*o/(2-2*n)),[t,r,n,e[3]]},_hsbaToRGBA:function(e){var t,r,o,n,s,i=6*e[0],a=e[1],l=e[2];return 0===a?[l,l,l,e[3]]:(r=l*(1-a),o=l*(1-a*(i-(t=Math.floor(i)))),a=l*(1-a*(1+t-i)),i=1===t?(n=o,s=l,r):2===t?(n=r,s=l,a):3===t?(n=r,s=o,l):4===t?(n=a,s=r,l):5===t?(n=l,s=r,o):(n=l,s=a,r),[n,s,i,e[3]])},_hslaToHSBA:function(e){var t=e[0],r=e[1],o=e[2],n=o<.5?(1+r)*o:o+r-o*r;return[t,r=2*(n-o)/n,n,e[3]]},_hslaToRGBA:function(e){var t,r=6*e[0],o=e[1],n=e[2];return 0===o?[n,n,n,e[3]]:[(t=function(e,t,r){return e<0?e+=6:6<=e&&(e-=6),e<1?t+(r-t)*e:e<3?r:e<4?t+(r-t)*(4-e):t})(2+r,o=2*n-(n=n<.5?(1+o)*n:n+o-n*o),n),t(r,o,n),t(r-2,o,n),e[3]]},_rgbaToHSBA:function(e){var t,r,o=e[0],n=e[1],s=e[2],i=Math.max(o,n,s),a=i-Math.min(o,n,s);return 0==a?r=t=0:(r=a/i,o===i?t=(n-s)/a:n===i?t=2+(s-o)/a:s===i&&(t=4+(o-n)/a),t<0?t+=6:6<=t&&(t-=6)),[t/6,r,i,e[3]]},_rgbaToHSLA:function(e){var t,r,o=e[0],n=e[1],s=e[2],i=Math.max(o,n,s),a=Math.min(o,n,s),l=i+a,a=i-a;return 0==a?r=t=0:(r=l<1?a/l:a/(2-l),o===i?t=(n-s)/a:n===i?t=2+(s-o)/a:s===i&&(t=4+(o-n)/a),t<0?t+=6:6<=t&&(t-=6)),[t/6,r,l/2,e[3]]}};e=e.default.ColorConversion;r.default=e},{"../core/main":280}],266:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.map"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var l=(n=e("../core/main"))&&n.__esModule?n:{default:n},u=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}e("./p5.Color"),e("../core/friendly_errors/validate_params"),e("../core/friendly_errors/file_errors"),e("../core/friendly_errors/fes_core"),l.default.prototype.alpha=function(e){return l.default._validateParameters("alpha",arguments),this.color(e)._getAlpha()},l.default.prototype.blue=function(e){return l.default._validateParameters("blue",arguments),this.color(e)._getBlue()},l.default.prototype.brightness=function(e){return l.default._validateParameters("brightness",arguments),this.color(e)._getBrightness()},l.default.prototype.color=function(){for(var e,t=arguments.length,r=new Array(t),o=0;os[0]?s[0]+=1:n[0]+=1),1<=(o=this.lerp(n[0],s[0],r))&&--o),e=this.lerp(n[1],s[1],r),t=this.lerp(n[2],s[2],r),n=this.lerp(n[3],s[3],r),o*=a[i][0],e*=a[i][1],t*=a[i][2],n*=a[i][3],this.color(o,e,t,n)},l.default.prototype.lightness=function(e){return l.default._validateParameters("lightness",arguments),this.color(e)._getLightness()},l.default.prototype.red=function(e){return l.default._validateParameters("red",arguments),this.color(e)._getRed()},l.default.prototype.saturation=function(e){return l.default._validateParameters("saturation",arguments),this.color(e)._getSaturation()};var n=l.default;r.default=n},{"../core/constants":269,"../core/friendly_errors/fes_core":271,"../core/friendly_errors/file_errors":272,"../core/friendly_errors/validate_params":275,"../core/main":280,"./p5.Color":267,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.map":167,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],267:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.trim"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.trim"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=s(e("../core/main")),d=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants")),h=s(e("./color_conversion"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}function s(e){return e&&e.__esModule?e:{default:e}}function l(e,t){for(var r=0;r"].indexOf(r[0])?void 0:r[0],lineNumber:r[1],columnNumber:r[2],source:e}},this)},parseFFOrSafari:function(e){return e.stack.split("\n").filter(function(e){return!e.match(o)},this).map(function(e){var t,r;return-1===(e=-1 eval")?e.replace(/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,":$1"):e).indexOf("@")&&-1===e.indexOf(":")?{functionName:e}:{functionName:(r=e.match(t=/((.*".+"[^@]*)?[^@]*)(?:@)/))&&r[1]?r[1]:void 0,fileName:(r=this.extractLocation(e.replace(t,"")))[0],lineNumber:r[1],columnNumber:r[2],source:e}},this)},parseOpera:function(e){return!e.stacktrace||-1e.stacktrace.split("\n").length?this.parseOpera9(e):e.stack?this.parseOpera11(e):this.parseOpera10(e)},parseOpera9:function(e){for(var t=/Line (\d+).*script (?:in )?(\S+)/i,r=e.message.split("\n"),o=[],n=2,s=r.length;n/,"$2").replace(/\([^)]*\)/g,"")||void 0,args:void 0===(t=r.match(/\(([^)]*)\)/)?r.replace(/^[^(]+\(([^)]*)\)$/,"$1"):t)||"[arguments not available]"===t?void 0:t.split(","),fileName:o[0],lineNumber:o[1],columnNumber:o[2],source:e}},this)}}}e.default._getErrorStackParser=function(){return new o};e=e.default;r.default=e},{"../main":280,"core-js/modules/es.array.filter":156,"core-js/modules/es.array.index-of":163,"core-js/modules/es.array.join":165,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.match":198,"core-js/modules/es.string.replace":201,"core-js/modules/es.string.split":203}],275:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.for-each"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.last-index-of"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.function.name"),e("core-js/modules/es.map"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.get-prototype-of"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.reflect.construct"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.for-each"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.for-each"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.last-index-of"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.function.name"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.for-each"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=(n=e("../main"))&&n.__esModule?n:{default:n};(function(e){if(e&&e.__esModule)return;if(null===e||"object"!==a(e)&&"function"!=typeof e)return;var t=i();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o)})(e("../constants")),e("../internationalization");function i(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,i=function(){return e},e)}function a(e){return(a="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}n.default._validateParameters=n.default._clearValidateParamsCache=function(){};e=n.default;r.default=e},{"../../../docs/parameterData.json":void 0,"../constants":269,"../internationalization":278,"../main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.for-each":160,"core-js/modules/es.array.includes":162,"core-js/modules/es.array.index-of":163,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.join":165,"core-js/modules/es.array.last-index-of":166,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.function.name":173,"core-js/modules/es.map":174,"core-js/modules/es.number.constructor":178,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.get-prototype-of":185,"core-js/modules/es.object.keys":186,"core-js/modules/es.object.to-string":187,"core-js/modules/es.reflect.construct":189,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.set":194,"core-js/modules/es.string.includes":196,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.split":203,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.for-each":242,"core-js/modules/web.dom-collections.iterator":243}],276:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var s=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("./constants"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}r.default={modeAdjust:function(e,t,r,o,n){return n===s.CORNER?{x:e,y:t,w:r,h:o}:n===s.CORNERS?{x:e,y:t,w:r-e,h:o-t}:n===s.RADIUS?{x:e-r,y:t-o,w:2*r,h:2*o}:n===s.CENTER?{x:e-.5*r,y:t-.5*o,w:r,h:o}:void 0}}},{"./constants":269,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],277:[function(e,t,r){"use strict";e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.string.iterator"),e("core-js/modules/web.dom-collections.iterator");var o=(n=e("../core/main"))&&n.__esModule?n:{default:n};e("./internationalization");var n=Promise.resolve();Promise.all([new Promise(function(e,t){"complete"===document.readyState?e():window.addEventListener("load",e,!1)}),n]).then(function(){void 0!==window._setupDone?console.warn("p5.js seems to have been imported multiple times. Please remove the duplicate import"):window.mocha||(window.setup&&"function"==typeof window.setup||window.draw&&"function"==typeof window.draw)&&!o.default.instance&&new o.default})},{"../core/main":280,"./internationalization":278,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.to-string":187,"core-js/modules/es.promise":188,"core-js/modules/es.string.iterator":197,"core-js/modules/web.dom-collections.iterator":243}],278:[function(e,t,r){"use strict";e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.object.keys"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.promise"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.split"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.setTranslatorLanguage=r.currentTranslatorLanguage=r.availableTranslatorLanguages=r.initialize=r.translator=void 0;var n,s,o=a(e("i18next")),i=a(e("i18next-browser-languagedetector"));function a(e){return e&&e.__esModule?e:{default:e}}function l(e,t){for(var r=0;r=i.width||t>=i.height?[0,0,0,0]:this._getPixel(e,t);n=new a.default.Image(r*s,o*s);return n.pixelDensity(s),n.canvas.getContext("2d").drawImage(i,e,t,r*s,o*s,0,0,r*s,o*s),n}},{key:"textLeading",value:function(e){return"number"==typeof e?(this._setProperty("_leadingSet",!0),this._setProperty("_textLeading",e),this._pInst):this._textLeading}},{key:"textStyle",value:function(e){return e?(e!==A.NORMAL&&e!==A.ITALIC&&e!==A.BOLD&&e!==A.BOLDITALIC||this._setProperty("_textStyle",e),this._applyTextProperties()):this._textStyle}},{key:"textAscent",value:function(){return null===this._textAscent&&this._updateTextMetrics(),this._textAscent}},{key:"textDescent",value:function(){return null===this._textDescent&&this._updateTextMetrics(),this._textDescent}},{key:"textAlign",value:function(e,t){return void 0!==e?(this._setProperty("_textAlign",e),void 0!==t&&this._setProperty("_textBaseline",t),this._applyTextProperties()):{horizontal:this._textAlign,vertical:this._textBaseline}}},{key:"textWrap",value:function(e){return this._setProperty("_textWrap",e),this._textWrap}},{key:"text",value:function(e,t,r,o,n){var s,i,a,l,u=this._pInst,c=this._textWrap,d=Number.MAX_VALUE,h=r;if((this._doFill||this._doStroke)&&void 0!==e){if(s=(e=(e="string"!=typeof e?e.toString():e).replace(/(\t)/g," ")).split("\n"),void 0!==o){switch(this._rectMode===A.CENTER&&(t-=o/2),this._textAlign){case A.CENTER:t+=o/2;break;case A.RIGHT:t+=o}if(void 0!==n){this._rectMode===A.CENTER&&(r-=n/2,h-=n/2);var e=r,f=u.textAscent();switch(this._textBaseline){case A.BOTTOM:l=r+n,r=Math.max(l,r),h+=f;break;case A.CENTER:l=r+n/2,r=Math.max(l,r),h+=f/2}d=r+n-f,this._textBaseline===A.CENTER&&(d=e+n-f/2)}else this._textBaseline!==A.BOTTOM&&this._textBaseline!==A.CENTER||(h=r-(e=u.textSize()*this._textLeading)/2,d=r+e/2);if(c===A.WORD){for(var p=[],m=0;ma.HALF_PI&&e<=3*a.HALF_PI?Math.atan(r/o*Math.tan(e))+a.PI:Math.atan(r/o*Math.tan(e))+a.TWO_PI,t=t<=a.HALF_PI?Math.atan(r/o*Math.tan(t)):t>a.HALF_PI&&t<=3*a.HALF_PI?Math.atan(r/o*Math.tan(t))+a.PI:Math.atan(r/o*Math.tan(t))+a.TWO_PI),th||Math.abs(this.accelerationY-this.pAccelerationY)>h||Math.abs(this.accelerationZ-this.pAccelerationZ)>h)&&s.deviceMoved(),"function"==typeof s.deviceTurned&&(t=this._toDegrees(this.rotationX)+180,r=this._toDegrees(this.pRotationX)+180,e=i+180,0>>16,e[1+r]=(65280&t[o])>>>8,e[2+r]=255&t[o],e[3+r]=(4278190080&t[o])>>>24},_toImageData:function(e){return e instanceof ImageData?e:e.getContext("2d").getImageData(0,0,e.width,e.height)},_createImageData:function(e,t){return V._tmpCanvas=document.createElement("canvas"),V._tmpCtx=V._tmpCanvas.getContext("2d"),this._tmpCtx.createImageData(e,t)},apply:function(e,t,r){var o=e.getContext("2d"),n=o.getImageData(0,0,e.width,e.height),t=t(n,r);t instanceof ImageData?o.putImageData(t,0,0,0,0,e.width,e.height):o.putImageData(n,0,0,0,0,e.width,e.height)},threshold:function(e){for(var t=1>8)/o,r[n+1]=255*(i*t>>8)/o,r[n+2]=255*(a*t>>8)/o}},dilate:function(e){for(var t,r,o,n,s,i,a,l,u,c=V._toPixels(e),d=0,h=c.length?c.length/4:0,f=new Int32Array(h);d>16&255)+151*(n>>8&255)+28*(255&n))<(a=77*(u>>16&255)+151*(u>>8&255)+28*(255&u))&&(o=u,n=a),n<(a=77*((u=V._getARGB(c,l))>>16&255)+151*(u>>8&255)+28*(255&u))&&(o=u,n=a),n<(l=77*(s>>16&255)+151*(s>>8&255)+28*(255&s))&&(o=s,n=l),n<(u=77*(i>>16&255)+151*(i>>8&255)+28*(255&i))&&(o=i,n=u),f[d++]=o;V._setPixels(c,f)},erode:function(e){for(var t,r,o,n,s,i,a,l,u,c=V._toPixels(e),d=0,h=c.length?c.length/4:0,f=new Int32Array(h);d>16&255)+151*(u>>8&255)+28*(255&u))<(n=77*(n>>16&255)+151*(n>>8&255)+28*(255&n))&&(o=u,n=a),(a=77*((u=V._getARGB(c,l))>>16&255)+151*(u>>8&255)+28*(255&u))>16&255)+151*(s>>8&255)+28*(255&s))>16&255)+151*(i>>8&255)+28*(255&i))>>24],r+=_[(16711680&I)>>16],o+=_[(65280&I)>>8],n+=_[255&I],t+=B[b],i++}T[a=k+g]=s/t,E[a]=r/t,M[a]=o/t,F[a]=n/t}k+=h}for(u=(l=-U)*h,v=k=0;v"+p.length.toString()+" out of "+c.toString()),e.next=48,new Promise(function(e){return setTimeout(e,0)});e.next=50;break;case 48:e.next=39;break;case 50:i||m.html("Frames processed, generating color palette..."),this.loop(),this.pixelDensity(f),v=(0,A.GIFEncoder)(),b=function(e){for(var t=new Uint8Array(e.length*e[0].length),r=0;r"+S.toString()+" out of "+c.toString()),e.next=68,new Promise(function(e){return setTimeout(e,0)});case 68:S++,e.next=60;break;case 71:v.finish(),k=v.bytesView(),k=new Blob([k],{type:"image/gif"}),p=[],this._recording=!1,this.loop(),i||(m.html("Done. Downloading your gif!🌸"),0=t&&(t=Math.floor(r.timeDisplayed/t),r.timeDisplayed=0,r.lastChangeTime=e,r.displayIndex+=t,r.loopCount=Math.floor(r.displayIndex/r.numFrames),null!==r.loopLimit&&r.loopCount>=r.loopLimit?r.playing=!1:(e=r.displayIndex%r.numFrames,this.drawingContext.putImageData(r.frames[e].image,0,0),r.displayIndex=e,this.setModified(!0))))}},{key:"_setProperty",value:function(e,t){this[e]=t,this.setModified(!0)}},{key:"loadPixels",value:function(){s.default.Renderer2D.prototype.loadPixels.call(this),this.setModified(!0)}},{key:"updatePixels",value:function(e,t,r,o){s.default.Renderer2D.prototype.updatePixels.call(this,e,t,r,o),this.setModified(!0)}},{key:"get",value:function(e,t,r,o){return s.default._validateParameters("p5.Image.get",arguments),s.default.Renderer2D.prototype.get.apply(this,arguments)}},{key:"_getPixel",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r/g,">").replace(/"/g,""").replace(/'/g,"'")}function i(e,t){t&&!0!==t&&"true"!==t||(t="");var r="";return(e=e||"untitled")&&e.includes(".")&&(r=e.split(".").pop()),t&&r!==t&&(r=t,e="".concat(e,".").concat(r)),[e,r]}e("../core/friendly_errors/validate_params"),e("../core/friendly_errors/file_errors"),e("../core/friendly_errors/fes_core"),v.default.prototype.loadJSON=function(){for(var e=arguments.length,t=new Array(e),r=0;r"),n.print("");if(n.print(' '),n.print(""),n.print(""),n.print(" "),"0"!==s[0]){n.print(" ");for(var c=0;c".concat(d)),n.print(" ")}n.print(" ")}for(var h=0;h");for(var f=0;f".concat(p)),n.print(" ")}n.print(" ")}n.print("
            "),n.print(""),n.print("")}n.close(),n.clear()},v.default.prototype.writeFile=function(e,t,r){var o="application/octet-stream",e=(v.default.prototype._isSafari()&&(o="text/plain"),new Blob(e,{type:o}));v.default.prototype.downloadFile(e,t,r)},v.default.prototype.downloadFile=function(e,t,r){var o,t=i(t,r),r=t[0];e instanceof Blob?n.default.saveAs(e,r):((o=document.createElement("a")).href=e,o.download=r,o.onclick=function(e){document.body.removeChild(e.target),e.stopPropagation()},o.style.display="none",document.body.appendChild(o),v.default.prototype._isSafari()&&(e=(e='Hello, Safari user! To download this file...\n1. Go to File --\x3e Save As.\n2. Choose "Page Source" as the Format.\n')+'3. Name it with this extension: ."'.concat(t[1],'"'),alert(e)),o.click())},v.default.prototype._checkFileExtension=i,v.default.prototype._isSafari=function(){return window.HTMLElement.toString().includes("Constructor")};e=v.default;r.default=e},{"../core/friendly_errors/fes_core":271,"../core/friendly_errors/file_errors":272,"../core/friendly_errors/validate_params":275,"../core/main":280,"core-js/modules/es.array.concat":152,"core-js/modules/es.array.includes":162,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.last-index-of":166,"core-js/modules/es.array.map":167,"core-js/modules/es.array.slice":168,"core-js/modules/es.array.splice":170,"core-js/modules/es.function.name":173,"core-js/modules/es.object.from-entries":182,"core-js/modules/es.object.to-string":187,"core-js/modules/es.promise":188,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.includes":196,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.replace":201,"core-js/modules/es.string.split":203,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.typed-array.copy-within":210,"core-js/modules/es.typed-array.every":211,"core-js/modules/es.typed-array.fill":212,"core-js/modules/es.typed-array.filter":213,"core-js/modules/es.typed-array.find":215,"core-js/modules/es.typed-array.find-index":214,"core-js/modules/es.typed-array.for-each":218,"core-js/modules/es.typed-array.includes":219,"core-js/modules/es.typed-array.index-of":220,"core-js/modules/es.typed-array.iterator":223,"core-js/modules/es.typed-array.join":224,"core-js/modules/es.typed-array.last-index-of":225,"core-js/modules/es.typed-array.map":226,"core-js/modules/es.typed-array.reduce":228,"core-js/modules/es.typed-array.reduce-right":227,"core-js/modules/es.typed-array.reverse":229,"core-js/modules/es.typed-array.set":230,"core-js/modules/es.typed-array.slice":231,"core-js/modules/es.typed-array.some":232,"core-js/modules/es.typed-array.sort":233,"core-js/modules/es.typed-array.subarray":234,"core-js/modules/es.typed-array.to-locale-string":235,"core-js/modules/es.typed-array.to-string":236,"core-js/modules/es.typed-array.uint8-array":239,"core-js/modules/web.dom-collections.iterator":243,"core-js/modules/web.url":245,"es6-promise/auto":246,"fetch-jsonp":248,"file-saver":249,"whatwg-fetch":258}],307:[function(e,t,r){"use strict";e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.splice"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.splice"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.replace"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var n=(e=e("../core/main"))&&e.__esModule?e:{default:e};function s(e,t){for(var r=0;r>>0},getSeed:function(){return t},rand:function(){return(r=(1664525*r+1013904223)%o)/o}};n.setSeed(e),_=new Array(4096);for(var s=0;s<4096;s++)_[s]=n.rand()},e.default);r.default=e},{"../core/main":280}],313:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.some"),e("core-js/modules/es.math.sign"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.number.is-finite"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.sub"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.some"),e("core-js/modules/es.math.sign"),e("core-js/modules/es.number.constructor"),e("core-js/modules/es.number.is-finite"),e("core-js/modules/es.string.sub"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var u=(n=e("../core/main"))&&n.__esModule?n:{default:n},s=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=a();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants"));function a(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,a=function(){return e},e)}function l(e,t){for(var r=0;r>>0},n.default.prototype.randomSeed=function(e){this._lcgSetSeed(s,e),this._gaussian_previous=!1},n.default.prototype.random=function(e,t){var r,o;return n.default._validateParameters("random",arguments),r=null!=this[s]?this._lcg(s):Math.random(),void 0===e?r:void 0===t?Array.isArray(e)?e[Math.floor(r*e.length)]:r*e:(tf&&(b=d,v=a,s=l,d=x+f*(i&&x=t?r.substring(r.length-t,r.length):r}},o.default.prototype.unhex=function(e){return e instanceof Array?e.map(o.default.prototype.unhex):parseInt("0x".concat(e),16)};e=o.default;r.default=e},{"../core/main":280,"core-js/modules/es.array.map":167,"core-js/modules/es.number.constructor":178,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.to-string":193,"core-js/modules/es.string.repeat":200}],321:[function(e,t,r){"use strict";e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.filter"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.pad-start"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.string.split"),e("core-js/modules/es.string.trim"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.array.filter"),e("core-js/modules/es.array.index-of"),e("core-js/modules/es.array.join"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.number.to-fixed"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.regexp.constructor"),e("core-js/modules/es.regexp.exec"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.string.match"),e("core-js/modules/es.string.pad-start"),e("core-js/modules/es.string.replace"),e("core-js/modules/es.string.split"),e("core-js/modules/es.string.trim"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var s=(u=e("../core/main"))&&u.__esModule?u:{default:u};function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],o=!0,n=!1,s=void 0;try{for(var i,a=e[Symbol.iterator]();!(o=(i=a.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){n=!0,s=e}finally{try{o||null==a.return||a.return()}finally{if(n)throw s}}return r}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function o(e,t,r){var o=i(e.toString().split("."),2),n=o[0],o=o[1];return void 0===r?(n=n.padStart(t,"0"),o?n+"."+o:n):(n=(e=i(e.toFixed(r).toString().split("."),2))[0],o=e[1],n=n.padStart(t,"0"),void 0===o?n:n+"."+o)}function n(e,t){var r=(e=e.toString()).indexOf("."),o=-1!==r?e.substring(r):"",e=(e=-1!==r?e.substring(0,r):e).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");if(0===t)o="";else if(void 0!==t)if(t>o.length)for(var n=t-(o+=-1===r?".":"").length+1,s=0;s=j.TWO_PI?"".concat(c="ellipse","|"):"".concat(c="arc","|").concat(s,"|").concat(i,"|").concat(a,"|")).concat(l,"|"),c=(this.geometryInHash(u)||((e=new S.default.Geometry(l,1,function(){if(s.toFixed(10)!==i.toFixed(10)){a!==j.PIE&&void 0!==a||(this.vertices.push(new S.default.Vector(.5,.5,0)),this.uvs.push([.5,.5]));for(var e=0;e<=l;e++){var t=(i-s)*(e/l)+s,r=.5+Math.cos(t)/2,t=.5+Math.sin(t)/2;this.vertices.push(new S.default.Vector(r,t,0)),this.uvs.push([r,t]),e>5&31)/31,(p>>10&31)/31):(r=i,o=a,l)),new x.default.Vector(y,g,v)),_=1;_<=3;_++){var j=m+12*_,j=new x.default.Vector(u.getFloat32(j,!0),u.getFloat32(4+j,!0),u.getFloat32(8+j,!0));e.vertices.push(j),e.vertexNormals.push(b),d&&s.push(r,o,n)}e.faces.push([3*f,3*f+1,3*f+2]),e.uvs.push([0,0],[0,0],[0,0])}}(e,t);else{t=new DataView(t);if(!("TextDecoder"in window))return console.warn("Sorry, ASCII STL loading only works in browsers that support TextDecoder (https://caniuse.com/#feat=textencoder)");t=new TextDecoder("utf-8").decode(t).split("\n");!function(e,t){for(var r,o,n="",s=[],i=0;ithis.cameraFar&&(i=this.cameraFar),Math.acos(Math.max(-1,Math.min(1,j.default.Vector.dot(o,n))))+t),t=e;(r<=0||r>=Math.PI)&&(this.upX*=-1,this.upY*=-1,this.upZ*=-1),n.mult(Math.cos(r)),a.mult(Math.cos(t)*Math.sin(r)),s.mult(Math.sin(t)*Math.sin(r)),o.set(n).add(a).add(s),this.eyeX=i*o.x+this.centerX,this.eyeY=i*o.y+this.centerY,this.eyeZ=i*o.z+this.centerZ,this.camera(this.eyeX,this.eyeY,this.eyeZ,this.centerX,this.centerY,this.centerZ,this.upX,this.upY,this.upZ)}},{key:"_orbitFree",value:function(e,t,r){var o=this.eyeX-this.centerX,n=this.eyeY-this.centerY,s=this.eyeZ-this.centerZ,i=Math.hypot(o,n,s),o=new j.default.Vector(o,n,s).normalize(),n=new j.default.Vector(this.upX,this.upY,this.upZ),s=j.default.Vector.cross(n,o).normalize(),a=j.default.Vector.cross(o,s),l=Math.atan2(t,e),l=(a.mult(Math.sin(l)),s.mult(Math.cos(l)).add(a),Math.sqrt(e*e+t*t)),a=j.default.Vector.cross(o,s),e=((i=(i*=Math.pow(10,r))this.cameraFar&&(i=this.cameraFar),Math.cos(l)),t=Math.sin(l),r=n.dot(o),l=n.dot(s),u=r*e+l*t,r=-r*t+l*e,l=n.dot(a);n.x=u*o.x+r*s.x+l*a.x,n.y=u*o.y+r*s.y+l*a.y,n.z=u*o.z+r*s.z+l*a.z,s.mult(-t),o.mult(e).add(s).mult(i),this.camera(o.x+this.centerX,o.y+this.centerY,o.z+this.centerZ,this.centerX,this.centerY,this.centerZ,n.x,n.y,n.z)}},{key:"_isActive",value:function(){return this===this._renderer._curCamera}}])&&n(e.prototype,r),o&&n(e,o),t}(),j.default.prototype.setCamera=function(e){this._renderer._curCamera=e,this._renderer.uPMatrix.set(e.projMatrix)};e=j.default.Camera;r.default=e},{"../core/main":280,"core-js/modules/es.array.slice":168,"core-js/modules/es.math.hypot":175,"core-js/modules/es.string.sub":205}],330:[function(e,t,r){"use strict";e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.math.log2"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.math.log2"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;e=(e=e("../core/main"))&&e.__esModule?e:{default:e};function n(e,t){for(var r=0;r=this.width||t>=this.height)&&(console.warn("The x and y values passed to p5.Framebuffer.get are outside of its range and will be clamped."),e=this.target.constrain(e,0,this.width-1),t=this.target.constrain(t,0,this.height-1)),(0,p.readPixelWebGL)(this.gl,this.framebuffer,e*this.density,t*this.density,n.format,n.type);e=this.target.constrain(e,0,this.width-1),t=this.target.constrain(t,0,this.height-1),r=this.target.constrain(r,1,this.width-e),o=this.target.constrain(o,1,this.height-t);for(var s=(0,p.readPixelsWebGL)(void 0,this.gl,this.framebuffer,e*this.density,t*this.density,r*this.density,o*this.density,n.format,n.type),i=new Uint8ClampedArray(r*o*this.density*this.density*4),a=(i.fill(255),n.type===this.gl.RGB?3:4),l=0;lthis.vertices.length-1-this.detailX;o--)e.add(this.vertexNormals[o]);e=m.default.Vector.div(e,this.detailX);for(var n=this.vertices.length-1;n>this.vertices.length-1-this.detailX;n--)this.vertexNormals[n]=e;return this}},{key:"_makeTriangleEdges",value:function(){for(var e=this.edges.length=0;e 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.");r.drawElements(r.TRIANGLES,t.vertexCount,t.indexBufferType,0)}else r.drawArrays(e||r.TRIANGLES,0,t.vertexCount)},a.default.RendererGL.prototype._drawPoints=function(e,t){var r=this.GL,o=this._getImmediatePointShader();this._setPointUniforms(o),this._bindBuffer(t,r.ARRAY_BUFFER,this._vToNArray(e),Float32Array,r.STATIC_DRAW),o.enableAttrib(o.attributes.aPosition,3),this._applyColorBlend(this.curStrokeColor),r.drawArrays(r.Points,0,e.length),o.unbindShader()};var s=a.default.RendererGL;r.default=s},{"../core/constants":269,"../core/main":280,"./p5.RenderBuffer":334,"./p5.RendererGL":337,"core-js/modules/es.array.fill":155,"core-js/modules/es.array.iterator":164,"core-js/modules/es.array.some":169,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.keys":186,"core-js/modules/es.object.to-string":187,"core-js/modules/es.string.iterator":197,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.typed-array.copy-within":210,"core-js/modules/es.typed-array.every":211,"core-js/modules/es.typed-array.fill":212,"core-js/modules/es.typed-array.filter":213,"core-js/modules/es.typed-array.find":215,"core-js/modules/es.typed-array.find-index":214,"core-js/modules/es.typed-array.float32-array":216,"core-js/modules/es.typed-array.for-each":218,"core-js/modules/es.typed-array.includes":219,"core-js/modules/es.typed-array.index-of":220,"core-js/modules/es.typed-array.iterator":223,"core-js/modules/es.typed-array.join":224,"core-js/modules/es.typed-array.last-index-of":225,"core-js/modules/es.typed-array.map":226,"core-js/modules/es.typed-array.reduce":228,"core-js/modules/es.typed-array.reduce-right":227,"core-js/modules/es.typed-array.reverse":229,"core-js/modules/es.typed-array.set":230,"core-js/modules/es.typed-array.slice":231,"core-js/modules/es.typed-array.some":232,"core-js/modules/es.typed-array.sort":233,"core-js/modules/es.typed-array.subarray":234,"core-js/modules/es.typed-array.to-locale-string":235,"core-js/modules/es.typed-array.to-string":236,"core-js/modules/es.typed-array.uint16-array":237,"core-js/modules/es.typed-array.uint32-array":238,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}],337:[function(e,t,r){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return(i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":o(e)})(e)}e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.copy-within"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.flat"),e("core-js/modules/es.array.flat-map"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.array.unscopables.flat"),e("core-js/modules/es.array.unscopables.flat-map"),e("core-js/modules/es.map"),e("core-js/modules/es.object.assign"),e("core-js/modules/es.object.get-own-property-descriptor"),e("core-js/modules/es.object.get-prototype-of"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.reflect.construct"),e("core-js/modules/es.reflect.get"),e("core-js/modules/es.regexp.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.float64-array"),e("core-js/modules/es.typed-array.int16-array"),e("core-js/modules/es.typed-array.uint8-array"),e("core-js/modules/es.typed-array.uint16-array"),e("core-js/modules/es.typed-array.uint32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/es.weak-map"),e("core-js/modules/web.dom-collections.iterator"),e("core-js/modules/es.symbol"),e("core-js/modules/es.symbol.description"),e("core-js/modules/es.symbol.iterator"),e("core-js/modules/es.array.concat"),e("core-js/modules/es.array.copy-within"),e("core-js/modules/es.array.every"),e("core-js/modules/es.array.fill"),e("core-js/modules/es.array.flat"),e("core-js/modules/es.array.flat-map"),e("core-js/modules/es.array.from"),e("core-js/modules/es.array.includes"),e("core-js/modules/es.array.iterator"),e("core-js/modules/es.array.map"),e("core-js/modules/es.array.slice"),e("core-js/modules/es.array.some"),e("core-js/modules/es.array.unscopables.flat"),e("core-js/modules/es.array.unscopables.flat-map"),e("core-js/modules/es.map"),e("core-js/modules/es.object.assign"),e("core-js/modules/es.object.to-string"),e("core-js/modules/es.set"),e("core-js/modules/es.string.includes"),e("core-js/modules/es.string.iterator"),e("core-js/modules/es.typed-array.float32-array"),e("core-js/modules/es.typed-array.float64-array"),e("core-js/modules/es.typed-array.int16-array"),e("core-js/modules/es.typed-array.uint8-array"),e("core-js/modules/es.typed-array.uint16-array"),e("core-js/modules/es.typed-array.uint32-array"),e("core-js/modules/es.typed-array.copy-within"),e("core-js/modules/es.typed-array.every"),e("core-js/modules/es.typed-array.fill"),e("core-js/modules/es.typed-array.filter"),e("core-js/modules/es.typed-array.find"),e("core-js/modules/es.typed-array.find-index"),e("core-js/modules/es.typed-array.for-each"),e("core-js/modules/es.typed-array.includes"),e("core-js/modules/es.typed-array.index-of"),e("core-js/modules/es.typed-array.iterator"),e("core-js/modules/es.typed-array.join"),e("core-js/modules/es.typed-array.last-index-of"),e("core-js/modules/es.typed-array.map"),e("core-js/modules/es.typed-array.reduce"),e("core-js/modules/es.typed-array.reduce-right"),e("core-js/modules/es.typed-array.reverse"),e("core-js/modules/es.typed-array.set"),e("core-js/modules/es.typed-array.slice"),e("core-js/modules/es.typed-array.some"),e("core-js/modules/es.typed-array.sort"),e("core-js/modules/es.typed-array.subarray"),e("core-js/modules/es.typed-array.to-locale-string"),e("core-js/modules/es.typed-array.to-string"),e("core-js/modules/web.dom-collections.iterator"),Object.defineProperty(r,"__esModule",{value:!0}),r.readPixelsWebGL=C,r.readPixelWebGL=O,r.default=void 0;var g=n(e("../core/main")),l=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==i(e)&&"function"!=typeof e)return{default:e};var t=d();if(t&&t.has(e))return t.get(e);var r,o={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e){var s;Object.prototype.hasOwnProperty.call(e,r)&&((s=n?Object.getOwnPropertyDescriptor(e,r):null)&&(s.get||s.set)?Object.defineProperty(o,r,s):o[r]=e[r])}o.default=e,t&&t.set(e,o);return o}(e("../core/constants")),a=n(e("./GeometryBuilder")),u=n(e("libtess")),c=(e("./p5.Shader"),e("./p5.Camera"),e("../core/p5.Renderer"),e("./p5.Matrix"),e("./p5.Framebuffer"),e("path"),e("./p5.Texture"));function d(){var e;return"function"!=typeof WeakMap?null:(e=new WeakMap,d=function(){return e},e)}function n(e){return e&&e.__esModule?e:{default:e}}function h(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n OUT_COLOR *= saturate(max(antialias, cover));\n}\n",lineVert:T+"/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nprecision mediump int;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nIN vec4 aPosition;\nIN vec3 aTangentIn;\nIN vec3 aTangentOut;\nIN float aSide;\nIN vec4 aVertexColor;\n\nOUT vec4 vColor;\nOUT vec2 vTangent;\nOUT vec2 vCenter;\nOUT vec2 vPosition;\nOUT float vMaxDist;\nOUT float vCap;\nOUT float vJoin;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n // Rotate and translate so a starts at the origin and goes out to the right\n bPoint -= aPoint;\n vec2 rotatedBFrom = vec2(\n bPoint.x*aDir.x + bPoint.y*aDir.y,\n bPoint.y*aDir.x - bPoint.x*aDir.y\n );\n vec2 bTo = bPoint + bDir;\n vec2 rotatedBTo = vec2(\n bTo.x*aDir.x + bTo.y*aDir.y,\n bTo.y*aDir.x - bTo.x*aDir.y\n );\n float intersectionDistance =\n rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n (rotatedBTo.y - rotatedBFrom.y);\n return aPoint + aDir * intersectionDistance;\n}\n\nvoid main() {\n // Caps have one of either the in or out tangent set to 0\n vCap = (aTangentIn == vec3(0.)) != (aTangentOut == (vec3(0.)))\n ? 1. : 0.;\n\n // Joins have two unique, defined tangents\n vJoin = (\n aTangentIn != vec3(0.) &&\n aTangentOut != vec3(0.) &&\n aTangentIn != aTangentOut\n ) ? 1. : 0.;\n\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));\n vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));\n\n float facingCamera = pow(\n // The word space tangent's z value is 0 if it's facing the camera\n abs(normalize(posqIn-posp).z),\n\n // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n // so most lines get scaled and don't get clipped\n 0.25\n );\n\n // using a scale <1 moves the lines towards the camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n float scale = mix(1., 0.995, facingCamera);\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n posp.xyz = posp.xyz * scale;\n posqIn.xyz = posqIn.xyz * scale;\n posqOut.xyz = posqOut.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n vCenter = p.xy;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don't care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can't remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n // Multiplying again by its sign here negates the flip to get just the scale.\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n if (vJoin == 1.) {\n vTangent = normalize(tangentIn + tangentOut);\n vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n float side = sign(aSide);\n float sideEnum = abs(aSide);\n\n // We generate vertices for joins on either side of the centerline, but\n // the \"elbow\" side is the only one needing a join. By not setting the\n // offset for the other side, all its vertices will end up in the same\n // spot and not render, effectively discarding it.\n if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n // Side enums:\n // 1: the side going into the join\n // 2: the middle of the join\n // 3: the side going out of the join\n if (sideEnum == 2.) {\n // Calculate the position + tangent on either side of the join, and\n // find where the lines intersect to find the elbow of the join\n vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n vec2 intersection = lineIntersection(\n c + (side * normalIn * uStrokeWeight / 2.),\n tangentIn,\n c + (side * normalOut * uStrokeWeight / 2.),\n tangentOut\n );\n offset = (intersection - c);\n\n // When lines are thick and the angle of the join approaches 180, the\n // elbow might be really far from the center. We'll apply a limit to\n // the magnitude to avoid lines going across the whole screen when this\n // happens.\n float mag = length(offset);\n float maxMag = 3. * uStrokeWeight;\n if (mag > maxMag) {\n offset *= maxMag / mag;\n }\n } else if (sideEnum == 1.) {\n offset = side * normalIn * uStrokeWeight / 2.;\n } else if (sideEnum == 3.) {\n offset = side * normalOut * uStrokeWeight / 2.;\n }\n }\n if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n vMaxDist = abs(dot(avgNormal, normalIn * uStrokeWeight / 2.));\n } else {\n vMaxDist = uStrokeWeight / 2.;\n }\n } else {\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n vTangent = tangent;\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float normalOffset = sign(aSide);\n // Caps will have side values of -2 or 2 on the edge of the cap that\n // extends out from the line\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n uStrokeWeight * 0.5;\n vMaxDist = uStrokeWeight / 2.;\n }\n vPosition = vCenter + offset;\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n \n vColor = (uUseLineColor ? aVertexColor : uMaterialColor);\n}\n",lineFrag:T+"precision mediump int;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\nuniform float uStrokeWeight;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n vec2 aToB = b - a;\n return dot(aToB, aToB);\n}\n\nvoid main() {\n if (vCap > 0.) {\n if (\n uStrokeCap == STROKE_CAP_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (\n uStrokeCap == STROKE_CAP_SQUARE &&\n dot(vPosition - vCenter, vTangent) > 0.\n ) {\n discard;\n }\n // Use full area for PROJECT\n } else if (vJoin > 0.) {\n if (\n uStrokeJoin == STROKE_JOIN_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 normal = vec2(-vTangent.y, vTangent.x);\n if (abs(dot(vPosition - vCenter, normal)) > vMaxDist) {\n discard;\n }\n }\n // Use full area for MITER\n }\n OUT_COLOR = vec4(vColor.rgb, 1.) * vColor.a;\n}\n",pointVert:"IN vec3 aPosition;\nuniform float uPointSize;\nOUT float vStrokeWeight;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvoid main() {\n\tvec4 positionVec4 = vec4(aPosition, 1.0);\n\tgl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\tgl_PointSize = uPointSize;\n\tvStrokeWeight = uPointSize;\n}\n",pointFrag:"precision mediump int;\nuniform vec4 uMaterialColor;\nIN float vStrokeWeight;\n\nvoid main(){\n float mask = 0.0;\n\n // make a circular mask using the gl_PointCoord (goes from 0 - 1 on a point)\n // might be able to get a nicer edge on big strokeweights with smoothstep but slightly less performant\n\n mask = step(0.98, length(gl_PointCoord * 2.0 - 1.0));\n\n // if strokeWeight is 1 or less lets just draw a square\n // this prevents weird artifacting from carving circles when our points are really small\n // if strokeWeight is larger than 1, we just use it as is\n\n mask = mix(0.0, mask, clamp(floor(vStrokeWeight - 0.5),0.0,1.0));\n\n // throw away the borders of the mask\n // otherwise we get weird alpha blending issues\n\n if(mask > 0.98){\n discard;\n }\n\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n}\n",imageLightVert:"precision highp float;\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nvarying vec3 localPos;\nvarying vec3 vWorldNormal;\nvarying vec3 vWorldPosition;\nvarying vec2 vTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvoid main() {\n // Multiply the position by the matrix.\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition; \n \n // orient the normals and pass to the fragment shader\n vWorldNormal = uNormalMatrix * aNormal;\n \n // send the view position to the fragment shader\n vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;\n \n localPos = vWorldPosition;\n vTexCoord = aTexCoord;\n}\n\n\n/*\nin the vertex shader we'll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.\n*/\n",imageLightDiffusedFrag:"precision highp float;\nvarying vec3 localPos;\n\n// the HDR cubemap converted (can be from an equirectangular environment map.)\nuniform sampler2D environmentMap;\nvarying vec2 vTexCoord;\n\nconst float PI = 3.14159265359;\n\nvec2 nTOE( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( phi, theta );\n return angles;\n}\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\nvoid main()\n{ \t \n\t// the sample direction equals the hemisphere's orientation\n float phi = vTexCoord.x * 2.0 * PI;\n float theta = vTexCoord.y * PI;\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 normal = vec3( x, y, z);\n\n\t// Discretely sampling the hemisphere given the integral's\n // spherical coordinates translates to the following fragment code:\n\tvec3 irradiance = vec3(0.0); \n\tvec3 up\t= vec3(0.0, 1.0, 0.0);\n\tvec3 right = normalize(cross(up, normal));\n\tup = normalize(cross(normal, right));\n\n\t// We specify a fixed sampleDelta delta value to traverse\n // the hemisphere; decreasing or increasing the sample delta\n // will increase or decrease the accuracy respectively.\n\tconst float sampleDelta = 0.100;\n\tfloat nrSamples = 0.0;\n float randomOffset = random(gl_FragCoord.xy) * sampleDelta;\n\tfor(float rawPhi = 0.0; rawPhi < 2.0 * PI; rawPhi += sampleDelta)\n\t{\n float phi = rawPhi + randomOffset;\n for(float rawTheta = 0.0; rawTheta < ( 0.5 ) * PI; rawTheta += sampleDelta)\n {\n float theta = rawTheta + randomOffset;\n // spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 tangentSample = vec3( x, y, z);\n \n vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;\n irradiance += (texture2D(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);\n nrSamples++;\n }\n\t}\n\t// divide by the total number of samples taken, giving us the average sampled irradiance.\n\tirradiance = PI * irradiance * (1.0 / float(nrSamples )) ;\n \n \n\tgl_FragColor = vec4(irradiance, 1.0);\n}",imageLightSpecularFrag:"precision highp float;\r\nvarying vec3 localPos;\r\nvarying vec2 vTexCoord;\r\n\r\n// our texture\r\nuniform sampler2D environmentMap;\r\nuniform float roughness;\r\n\r\nconst float PI = 3.14159265359;\r\n\r\nfloat VanDerCorput(int bits);\r\nvec2 HammersleyNoBitOps(int i, int N);\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness);\r\n\r\n\r\nvec2 nTOE( vec3 v ){\r\n // x = r sin(phi) cos(theta) \r\n // y = r cos(phi) \r\n // z = r sin(phi) sin(theta)\r\n float phi = acos( v.y );\r\n // if phi is 0, then there are no x, z components\r\n float theta = 0.0;\r\n // else \r\n theta = acos(v.x / sin(phi));\r\n float sinTheta = v.z / sin(phi);\r\n if (sinTheta < 0.0) {\r\n // Turn it into -theta, but in the 0-2PI range\r\n theta = 2.0 * PI - theta;\r\n }\r\n theta = theta / (2.0 * 3.14159);\r\n phi = phi / 3.14159 ;\r\n \r\n vec2 angles = vec2( phi, theta );\r\n return angles;\r\n}\r\n\r\n\r\nvoid main(){\r\n const int SAMPLE_COUNT = 400; // 4096\r\n int lowRoughnessLimit = int(pow(2.0,(roughness+0.1)*20.0));\r\n float totalWeight = 0.0;\r\n vec3 prefilteredColor = vec3(0.0);\r\n float phi = vTexCoord.x * 2.0 * PI;\r\n float theta = vTexCoord.y * PI;\r\n float x = sin(theta) * cos(phi);\r\n float y = sin(theta) * sin(phi);\r\n float z = cos(theta);\r\n vec3 N = vec3(x,y,z);\r\n vec3 V = N;\r\n for (int i = 0; i < SAMPLE_COUNT; ++i)\r\n {\r\n // break at smaller sample numbers for low roughness levels\r\n if(i == lowRoughnessLimit)\r\n {\r\n break;\r\n }\r\n vec2 Xi = HammersleyNoBitOps(i, SAMPLE_COUNT);\r\n vec3 H = ImportanceSampleGGX(Xi, N, roughness);\r\n vec3 L = normalize(2.0 * dot(V, H) * H - V);\r\n\r\n float NdotL = max(dot(N, L), 0.0);\r\n if (NdotL > 0.0)\r\n {\r\n prefilteredColor += texture2D(environmentMap, nTOE(L)).xyz * NdotL;\r\n totalWeight += NdotL;\r\n }\r\n }\r\n prefilteredColor = prefilteredColor / totalWeight;\r\n\r\n gl_FragColor = vec4(prefilteredColor, 1.0);\r\n}\r\n\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){\r\n float a = roughness * roughness;\r\n\r\n float phi = 2.0 * PI * Xi.x;\r\n float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a * a - 1.0) * Xi.y));\r\n float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\r\n // from spherical coordinates to cartesian coordinates\r\n vec3 H;\r\n H.x = cos(phi) * sinTheta;\r\n H.y = sin(phi) * sinTheta;\r\n H.z = cosTheta;\r\n\r\n // from tangent-space vector to world-space sample vector\r\n vec3 up = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);\r\n vec3 tangent = normalize(cross(up, N));\r\n vec3 bitangent = cross(N, tangent);\r\n\r\n vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;\r\n return normalize(sampleVec);\r\n}\r\n\r\n\r\nfloat VanDerCorput(int n, int base)\r\n{\r\n#ifdef WEBGL2\r\n\r\n uint bits = uint(n);\r\n bits = (bits << 16u) | (bits >> 16u);\r\n bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);\r\n bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);\r\n bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);\r\n bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);\r\n return float(bits) * 2.3283064365386963e-10; // / 0x100000000\r\n\r\n#else\r\n\r\n float invBase = 1.0 / float(base);\r\n float denom = 1.0;\r\n float result = 0.0;\r\n\r\n\r\n for (int i = 0; i < 32; ++i)\r\n {\r\n if (n > 0)\r\n {\r\n denom = mod(float(n), 2.0);\r\n result += denom * invBase;\r\n invBase = invBase / 2.0;\r\n n = int(float(n) / 2.0);\r\n }\r\n }\r\n\r\n\r\n return result;\r\n\r\n#endif\r\n}\r\n\r\nvec2 HammersleyNoBitOps(int i, int N)\r\n{\r\n return vec2(float(i) / float(N), VanDerCorput(i, 2));\r\n}\r\n"},M=E.sphereMappingFrag;for(x in E)E[x]="#ifdef WEBGL2\n\n#define IN in\n#define OUT out\n\n#ifdef FRAGMENT_SHADER\nout vec4 outColor;\n#define OUT_COLOR outColor\n#endif\n#define TEXTURE texture\n\n#else\n\n#ifdef FRAGMENT_SHADER\n#define IN varying\n#else\n#define IN attribute\n#endif\n#define OUT varying\n#define TEXTURE texture2D\n\n#ifdef FRAGMENT_SHADER\n#define OUT_COLOR gl_FragColor\n#endif\n\n#endif\n"+E[x];_(e={},l.GRAY,"precision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 tex = texture2D(tex0, vTexCoord);\n float gray = luma(tex.rgb);\n gl_FragColor = vec4(gray, gray, gray, tex.a);\n}\n"),_(e,l.ERODE,"// Reduces the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the darkest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum < lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n"),_(e,l.DILATE,"// Increase the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the brightest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum > lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n"),_(e,l.BLUR,"precision highp float;\n\n// Two-pass blur filter, unweighted kernel.\n// See also a similar blur at Adam Ferriss' repo of shader examples:\n// https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-9_single-pass-blur/effect.frag\n\n\nuniform sampler2D tex0;\nvarying vec2 vTexCoord;\nuniform vec2 direction;\nuniform vec2 canvasSize;\nuniform float radius;\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\n// This isn't a real Gaussian weight, it's a quadratic weight. It's what the\n// CPU mode's blur uses though, so we also use it here to match.\nfloat quadWeight(float x, float e) {\n return pow(e-abs(x), 2.);\n}\n\nvoid main(){\n vec2 uv = vTexCoord;\n\n // A reasonable maximum number of samples\n const float maxSamples = 64.0;\n\n float numSamples = floor(7. * radius);\n if (fract(numSamples / 2.) == 0.) {\n numSamples++;\n }\n vec4 avg = vec4(0.0);\n float total = 0.0;\n\n // Calculate the spacing to avoid skewing if numSamples > maxSamples\n float spacing = 1.0;\n if (numSamples > maxSamples) {\n spacing = numSamples / maxSamples;\n numSamples = maxSamples;\n }\n\n float randomOffset = (spacing - 1.0) * mix(-0.5, 0.5, random(gl_FragCoord.xy));\n for (float i = 0.0; i < maxSamples; i++) {\n if (i >= numSamples) break;\n\n float sample = i * spacing - (numSamples - 1.0) * 0.5 * spacing + randomOffset;\n vec2 sampleCoord = uv + vec2(sample, sample) / canvasSize * direction;\n float weight = quadWeight(sample, (numSamples - 1.0) * 0.5 * spacing);\n\n avg += weight * texture2D(tex0, sampleCoord);\n total += weight;\n }\n\n avg /= total;\n gl_FragColor = avg;\n}\n"),_(e,l.POSTERIZE,"// Limit color space for a stylized cartoon / poster effect\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nvec3 quantize(vec3 color, float n) {\n // restrict values to N options/bins\n // and floor each channel to nearest value\n //\n // eg. when N = 5, values = 0.0, 0.25, 0.50, 0.75, 1.0\n // then quantize (0.1, 0.7, 0.9) -> (0.0, 0.5, 1.0)\n\n color = color * n;\n color = floor(color);\n color = color / (n - 1.0);\n return color;\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n\n vec3 restrictedColor = quantize(color.rgb / color.a, filterParameter);\n\n gl_FragColor = vec4(restrictedColor.rgb * color.a, color.a);\n}\n"),_(e,l.OPAQUE,"// Set alpha channel to entirely opaque\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n gl_FragColor = vec4(color.rgb / color.a, 1.0);\n}\n"),_(e,l.INVERT,"// Set each pixel to inverse value\n// Note that original INVERT does not change the opacity, so this follows suit\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\nvec4 color = texture2D(tex0, vTexCoord);\nvec3 origColor = color.rgb / color.a;\nvec3 invertedColor = vec3(1.0) - origColor;\ngl_FragColor = vec4(invertedColor * color.a, color.a);\n}\n"),_(e,l.THRESHOLD,"// Convert pixels to either white or black, \n// depending on if their luma is above or below filterParameter\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float gray = luma(color.rgb / color.a);\n // floor() used to match src/image/filters.js\n float threshold = floor(filterParameter * 255.0) / 255.0;\n float blackOrWhite = step(threshold, gray);\n gl_FragColor = vec4(vec3(blackOrWhite) * color.a, color.a);\n}\n");var k=e;function C(e,t,r,o,n,s,i,a,l,u){var c=t.getParameter(t.FRAMEBUFFER_BINDING),r=(t.bindFramebuffer(t.FRAMEBUFFER,r),a===t.RGBA?4:3),d=s*i*r,h=l===t.UNSIGNED_BYTE?Uint8Array:Float32Array;if(e instanceof h&&e.length===d||(e=new h(d)),t.readPixels(o,u?u-n-i:n,s,i,a,l,e),t.bindFramebuffer(t.FRAMEBUFFER,c),u)for(var f=Math.floor(i/2),p=new h(s*r),m=0;m>7,127&d,c>>7,127&c);for(var h=0;h>7,127&f,0,0)}}return{cellImageInfo:a,dimOffset:t,dimImageInfo:n}}}}]),t}();B.default.RendererGL.prototype._renderText=function(e,t,r,o,n){if(this._textFont&&"string"!=typeof this._textFont){if(!(n<=o)&&this._doFill){if(this._isOpenType()){e.push();var n=this._doStroke,s=this.drawMode,i=(this._doStroke=!1,this.drawMode=E.TEXTURE,this._textFont.font),a=(a=this._textFont._fontInfo)||(this._textFont._fontInfo=new M(i)),r=this._textFont._handleAlignment(this,t,r,o),o=this._textSize/i.unitsPerEm,l=(this.translate(r.x,r.y,0),this.scale(o,o,1),this.GL),r=!this._defaultFontShader,u=this._getFontShader(),c=(u.init(),u.bindShader(),r&&(u.setUniform("uGridImageSize",[64,64]),u.setUniform("uCellsImageSize",[64,64]),u.setUniform("uStrokeImageSize",[64,64]),u.setUniform("uGridSize",[9,9])),this._applyColorBlend(this.curFillColor),this.retainedMode.geometry.glyph),d=(c||((o=this._textGeom=new B.default.Geometry(1,1,function(){for(var e=0;e<=1;e++)for(var t=0;t<=1;t++)this.vertices.push(new B.default.Vector(t,e,0)),this.uvs.push(t,e)})).computeFaces().computeNormals(),c=this.createBuffers("glyph",o)),!0),r=!1,o=void 0;try{for(var h,f=this.retainedMode.buffers.text[Symbol.iterator]();!(d=(h=f.next()).done);d=!0)h.value._prepareBuffer(c,u)}catch(e){r=!0,o=e}finally{try{d||null==f.return||f.return()}finally{if(r)throw o}}this._bindBuffer(c.indexBuffer,l.ELEMENT_ARRAY_BUFFER),u.setUniform("uMaterialColor",this.curFillColor),l.pixelStorei(l.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{var p=0,m=null,y=i.stringToGlyphs(t),g=!0,v=!1,b=void 0;try{for(var _,j=y[Symbol.iterator]();!(g=(_=j.next()).done);g=!0){var x,w,S=_.value,T=(m&&(p+=i.getKerningValue(m,S)),a.getGlyphInfo(S));T.uGlyphRect&&(x=T.rowInfo,w=T.colInfo,u.setUniform("uSamplerStrokes",T.strokeImageInfo.imageData),u.setUniform("uSamplerRowStrokes",x.cellImageInfo.imageData),u.setUniform("uSamplerRows",x.dimImageInfo.imageData),u.setUniform("uSamplerColStrokes",w.cellImageInfo.imageData),u.setUniform("uSamplerCols",w.dimImageInfo.imageData),u.setUniform("uGridOffset",T.uGridOffset),u.setUniform("uGlyphRect",T.uGlyphRect),u.setUniform("uGlyphOffset",p),u.bindTextures(),l.drawElements(l.TRIANGLES,6,this.GL.UNSIGNED_SHORT,0)),p+=S.advanceWidth,m=S}}catch(e){v=!0,b=e}finally{try{g||null==j.return||j.return()}finally{if(v)throw b}}}finally{u.unbindShader(),this._doStroke=n,this.drawMode=s,l.pixelStorei(l.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.pop()}}else console.log("WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported");return e}}else console.log("WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.")}},{"../core/constants":269,"../core/main":280,"./p5.RendererGL.Retained":336,"./p5.Shader":338,"core-js/modules/es.array.iterator":164,"core-js/modules/es.object.get-own-property-descriptor":183,"core-js/modules/es.object.to-string":187,"core-js/modules/es.regexp.exec":192,"core-js/modules/es.string.iterator":197,"core-js/modules/es.string.split":203,"core-js/modules/es.string.sub":205,"core-js/modules/es.symbol":209,"core-js/modules/es.symbol.description":207,"core-js/modules/es.symbol.iterator":208,"core-js/modules/es.weak-map":241,"core-js/modules/web.dom-collections.iterator":243}]},{},[264])(264)}); \ No newline at end of file diff --git a/src/data/data.yml b/src/data/data.yml index 3f76fde61c..066147ef69 100644 --- a/src/data/data.yml +++ b/src/data/data.yml @@ -1,2 +1,2 @@ title: p5.js -version: 1.9.2 +version: 1.9.3 diff --git a/src/data/reference/en.json b/src/data/reference/en.json index d1d30ee2be..73ba0ca0ae 100644 --- a/src/data/reference/en.json +++ b/src/data/reference/en.json @@ -618,183 +618,240 @@ }, "bezier": { "description": [ - "Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points \"pull\" the curve towards them.", - "Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve()." - ], - "params": { - "x1": "Number: x-coordinate for the first anchor point", - "y1": "Number: y-coordinate for the first anchor point", - "x2": "Number: x-coordinate for the first control point", - "y2": "Number: y-coordinate for the first control point", - "x3": "Number: x-coordinate for the second control point", - "y3": "Number: y-coordinate for the second control point", - "x4": "Number: x-coordinate for the second anchor point", - "y4": "Number: y-coordinate for the second anchor point", - "z1": "Number: z-coordinate for the first anchor point", - "z2": "Number: z-coordinate for the first control point", - "z3": "Number: z-coordinate for the second control point", - "z4": "Number: z-coordinate for the second anchor point" + "Draws a Bézier curve.", + "Bézier curves can form shapes and curves that slope gently. They're defined by two anchor points and two control points. Bézier curves provide more control than the spline curves created with the curve() function.", + "The first two parameters, x1 and y1, set the first anchor point. The first anchor point is where the curve starts.", + "The next four parameters, x2, y2, x3, and y3, set the two control points. The control points \"pull\" the curve towards them.", + "The seventh and eighth parameters, x4 and y4, set the last anchor point. The last anchor point is where the curve ends.", + "Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of bezier() has twelve arguments because each point has x-, y-, and z-coordinates." + ], + "params": { + "x1": "Number: x-coordinate of the first anchor point.", + "y1": "Number: y-coordinate of the first anchor point.", + "x2": "Number: x-coordinate of the first control point.", + "y2": "Number: y-coordinate of the first control point.", + "x3": "Number: x-coordinate of the second control point.", + "y3": "Number: y-coordinate of the second control point.", + "x4": "Number: x-coordinate of the second anchor point.", + "y4": "Number: y-coordinate of the second anchor point.", + "z1": "Number: z-coordinate of the first anchor point.", + "z2": "Number: z-coordinate of the first control point.", + "z3": "Number: z-coordinate of the second control point.", + "z4": "Number: z-coordinate of the second anchor point." } }, "bezierDetail": { "description": [ - "Sets the resolution at which Bezier's curve is displayed. The default value is 20.", - "Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." + "Sets the number of segments used to draw Bézier curves in WebGL mode.", + "In WebGL mode, smooth shapes are drawn using many flat segments. Adding more flat segments makes shapes appear smoother.", + "The parameter, detail, is the number of segments to use while drawing a Bézier curve. For example, calling bezierDetail(5) will use 5 segments to draw curves with the bezier() function. By default,detail is 20.", + "Note: bezierDetail() has no effect in 2D mode." ], "params": { - "detail": "Number: resolution of the curves" + "detail": "Number: number of segments to use. Defaults to 20." } }, "bezierPoint": { "description": [ - "Given the x or y co-ordinate values of control and anchor points of a bezier curve, it evaluates the x or y coordinate of the bezier at position t. The parameters a and d are the x or y coordinates of first and last points on the curve while b and c are of the control points.The final parameter t is the position of the resultant point which is given between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t." + "Calculates coordinates along a Bézier curve using interpolation.", + "bezierPoint() calculates coordinates along a Bézier curve using the anchor and control points. It expects points in the same order as the bezier() function. bezierPoint() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the curve. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the curve.", + "The first parameter, a, is the coordinate of the first anchor point.", + "The second and third parameters, b and c, are the coordinates of the control points.", + "The fourth parameter, d, is the coordinate of the last anchor point.", + "The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them." ], - "returns": "Number: the value of the Bezier at position t", + "returns": "Number: coordinate of the point on the curve.", "params": { - "a": "Number: coordinate of first point on the curve", - "b": "Number: coordinate of first control point", - "c": "Number: coordinate of second control point", - "d": "Number: coordinate of second point on the curve", - "t": "Number: value between 0 and 1" + "a": "Number: coordinate of first control point.", + "b": "Number: coordinate of first anchor point.", + "c": "Number: coordinate of second anchor point.", + "d": "Number: coordinate of second control point.", + "t": "Number: amount to interpolate between 0 and 1." } }, "bezierTangent": { "description": [ - "Evaluates the tangent to the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1." + "Calculates coordinates along a line that's tangent to a Bézier curve.", + "Tangent lines skim the surface of a curve. A tangent line's slope equals the curve's slope at the point where it intersects.", + "bezierTangent() calculates coordinates along a tangent line using the Bézier curve's anchor and control points. It expects points in the same order as the bezier() function. bezierTangent() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the tangent line. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the tangent line.", + "The first parameter, a, is the coordinate of the first anchor point.", + "The second and third parameters, b and c, are the coordinates of the control points.", + "The fourth parameter, d, is the coordinate of the last anchor point.", + "The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them." ], - "returns": "Number: the tangent at position t", + "returns": "Number: coordinate of a point on the tangent line.", "params": { - "a": "Number: coordinate of first point on the curve", - "b": "Number: coordinate of first control point", - "c": "Number: coordinate of second control point", - "d": "Number: coordinate of second point on the curve", - "t": "Number: value between 0 and 1" + "a": "Number: coordinate of first anchor point.", + "b": "Number: coordinate of first control point.", + "c": "Number: coordinate of second control point.", + "d": "Number: coordinate of second anchor point.", + "t": "Number: amount to interpolate between 0 and 1." } }, "curve": { "description": [ - "Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point.

            Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines." + "Draws a curve using a Catmull-Rom spline.", + "Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points.", + "The first two parameters, x1 and y1, set the first control point. This point isn’t drawn and can be thought of as the curve’s starting point.", + "The next four parameters, x2, y2, x3, and y3, set the two anchor points. The anchor points are the start and end points of the curve’s visible segment.", + "The seventh and eighth parameters, x4 and y4, set the last control point. This point isn’t drawn and can be thought of as the curve’s ending point.", + "Spline curves can also be drawn in 3D using WebGL mode. The 3D version of curve() has twelve arguments because each point has x-, y-, and z-coordinates." ], "params": { - "x1": "Number: x-coordinate for the beginning control point", - "y1": "Number: y-coordinate for the beginning control point", - "x2": "Number: x-coordinate for the first point", - "y2": "Number: y-coordinate for the first point", - "x3": "Number: x-coordinate for the second point", - "y3": "Number: y-coordinate for the second point", - "x4": "Number: x-coordinate for the ending control point", - "y4": "Number: y-coordinate for the ending control point", - "z1": "Number: z-coordinate for the beginning control point", - "z2": "Number: z-coordinate for the first point", - "z3": "Number: z-coordinate for the second point", - "z4": "Number: z-coordinate for the ending control point" + "x1": "Number: x-coordinate of the first control point.", + "y1": "Number: y-coordinate of the first control point.", + "x2": "Number: x-coordinate of the first anchor point.", + "y2": "Number: y-coordinate of the first anchor point.", + "x3": "Number: x-coordinate of the second anchor point.", + "y3": "Number: y-coordinate of the second anchor point.", + "x4": "Number: x-coordinate of the second control point.", + "y4": "Number: y-coordinate of the second control point.", + "z1": "Number: z-coordinate of the first control point.", + "z2": "Number: z-coordinate of the first anchor point.", + "z3": "Number: z-coordinate of the second anchor point.", + "z4": "Number: z-coordinate of the second control point." } }, "curveDetail": { "description": [ - "Sets the resolution at which curves display. The default value is 20 while the minimum value is 3.", - "This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." + "Sets the number of segments used to draw spline curves in WebGL mode.", + "In WebGL mode, smooth shapes are drawn using many flat segments. Adding more flat segments makes shapes appear smoother.", + "The parameter, detail, is the number of segments to use while drawing a spline curve. For example, calling curveDetail(5) will use 5 segments to draw curves with the curve() function. By default,detail is 20.", + "Note: curveDetail() has no effect in 2D mode." ], "params": { - "resolution": "Number: resolution of the curves" + "resolution": "Number: number of segments to use. Defaults to 20." } }, "curveTightness": { "description": [ - "Modifies the quality of forms created with curve() and curveVertex().The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform." + "Adjusts the way curve() and curveVertex() draw.", + "Spline curves are like cables that are attached to a set of points. curveTightness() adjusts how tightly the cable is attached to the points.", + "The parameter, tightness, determines how the curve fits to the vertex points. By default, tightness is set to 0. Setting tightness to 1, as in curveTightness(1), connects the curve's points using straight lines. Values in the range from –5 to 5 deform curves while leaving them recognizable." ], "params": { - "amount": "Number: amount of deformation from the original vertices" + "amount": "Number: amount of tightness." } }, "curvePoint": { "description": [ - "Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are control points of the curve, and b and c are the start and end points of the curve. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t." + "Calculates coordinates along a spline curve using interpolation.", + "curvePoint() calculates coordinates along a spline curve using the anchor and control points. It expects points in the same order as the curve() function. curvePoint() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the curve. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the curve.", + "The first parameter, a, is the coordinate of the first control point.", + "The second and third parameters, b and c, are the coordinates of the anchor points.", + "The fourth parameter, d, is the coordinate of the last control point.", + "The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them." ], - "returns": "Number: Curve value at position t", + "returns": "Number: coordinate of a point on the curve.", "params": { - "a": "Number: coordinate of first control point of the curve", - "b": "Number: coordinate of first point", - "c": "Number: coordinate of second point", - "d": "Number: coordinate of second control point", - "t": "Number: value between 0 and 1" + "a": "Number: coordinate of first anchor point.", + "b": "Number: coordinate of first control point.", + "c": "Number: coordinate of second control point.", + "d": "Number: coordinate of second anchor point.", + "t": "Number: amount to interpolate between 0 and 1." } }, "curveTangent": { "description": [ - "Evaluates the tangent to the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points." + "Calculates coordinates along a line that's tangent to a spline curve.", + "Tangent lines skim the surface of a curve. A tangent line's slope equals the curve's slope at the point where it intersects.", + "curveTangent() calculates coordinates along a tangent line using the spline curve's anchor and control points. It expects points in the same order as the curve() function. curveTangent() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the tangent line. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the tangent line.", + "The first parameter, a, is the coordinate of the first control point.", + "The second and third parameters, b and c, are the coordinates of the anchor points.", + "The fourth parameter, d, is the coordinate of the last control point.", + "The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them." ], - "returns": "Number: the tangent at position t", + "returns": "Number: coordinate of a point on the tangent line.", "params": { - "a": "Number: coordinate of first control point", - "b": "Number: coordinate of first point on the curve", - "c": "Number: coordinate of second point on the curve", - "d": "Number: coordinate of second conrol point", - "t": "Number: value between 0 and 1" + "a": "Number: coordinate of first control point.", + "b": "Number: coordinate of first anchor point.", + "c": "Number: coordinate of second anchor point.", + "d": "Number: coordinate of second control point.", + "t": "Number: amount to interpolate between 0 and 1." } }, "beginContour": { "description": [ - "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", - "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." + "Begins creating a hole within a flat shape.", + "The beginContour() and endContour() functions allow for creating negative space within custom shapes that are flat. beginContour() begins adding vertices to a negative space and endContour() stops adding them. beginContour() and endContour() must be called between beginShape() and endShape().", + "Transformations such as translate(), rotate(), and scale() don't work between beginContour() and endContour(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginContour() and endContour().", + "Note: The vertices that define a negative space must \"wind\" in the opposite direction from the outer shape. First, draw vertices for the outer shape clockwise order. Then, draw vertices for the negative space in counter-clockwise order." ] }, "beginShape": { "description": [ - "Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.", - "The parameters available for beginShape() are:", - "POINTS Draw a series of points", - "LINES Draw a series of unconnected line segments (individual lines)", - "TRIANGLES Draw a series of separate triangles", - "TRIANGLE_FAN Draw a series of connected triangles sharing the first vertex in a fan-like fashion", - "TRIANGLE_STRIP Draw a series of connected triangles in strip fashion", - "QUADS Draw a series of separate quads", - "QUAD_STRIP Draw quad strip using adjacent edges to form the next quad", - "TESS (WEBGL only) Handle irregular polygon for filling curve by explicit tessellation", - "After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.", - "Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape()." + "Begins adding vertices to a custom shape.", + "The beginShape() and endShape() functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and endShape() stops adding them.", + "The parameter, kind, sets the kind of shape to make. By default, any irregular polygon can be drawn. The available modes for kind are:
            • POINTS to draw a series of points.
            • LINES to draw a series of unconnected line segments.
            • TRIANGLES to draw a series of separate triangles.
            • TRIANGLE_FAN to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
            • TRIANGLE_STRIP to draw a series of connected triangles in strip fashion.
            • QUADS to draw a series of separate quadrilaterals (quads).
            • QUAD_STRIP to draw quad strip using adjacent edges to form the next quad.
            • TESS to create a filling curve by explicit tessellation (WebGL only).
            ", + "After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). Calling endShape() will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color.", + "Transformations such as translate(), rotate(), and scale() don't work between beginShape() and endShape(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginShape() and endShape()." ], "params": { - "kind": "Constant: (Optional) either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS" + "kind": "Constant: (Optional) either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS." } }, "bezierVertex": { "description": [ - "Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. For WebGL mode bezierVertex() can be used in 2D as well as 3D mode. 2D mode expects 6 parameters, while 3D mode expects 9 parameters (including z coordinates).", - "The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." + "Adds a Bézier curve segment to a custom shape.", + "bezierVertex() adds a curved segment to custom shapes. The Bézier curves it creates are defined like those made by the bezier() function. bezierVertex() must be called between the beginShape() and endShape() functions. The curved segment uses the previous vertex as the first anchor point, so there must be at least one call to vertex() before bezierVertex() can be used.", + "The first four parameters, x2, y2, x3, and y3, set the curve’s two control points. The control points \"pull\" the curve towards them.", + "The fifth and sixth parameters, x4, and y4, set the last anchor point. The last anchor point is where the curve ends.", + "Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of bezierVertex() has eight arguments because each point has x-, y-, and z-coordinates.", + "Note: bezierVertex() won’t work when an argument is passed to beginShape()." ], "params": { - "x2": "Number: x-coordinate for the first control point", - "y2": "Number: y-coordinate for the first control point", - "x3": "Number: x-coordinate for the second control point", - "y3": "Number: y-coordinate for the second control point", - "x4": "Number: x-coordinate for the anchor point", - "y4": "Number: y-coordinate for the anchor point", - "z2": "Number: z-coordinate for the first control point (for WebGL mode)", - "z3": "Number: z-coordinate for the second control point (for WebGL mode)", - "z4": "Number: z-coordinate for the anchor point (for WebGL mode)" + "x2": "Number: x-coordinate of the first control point.", + "y2": "Number: y-coordinate of the first control point.", + "x3": "Number: x-coordinate of the second control point.", + "y3": "Number: y-coordinate of the second control point.", + "x4": "Number: x-coordinate of the anchor point.", + "y4": "Number: y-coordinate of the anchor point.", + "z2": "Number: z-coordinate of the first control point.", + "z3": "Number: z-coordinate of the second control point.", + "z4": "Number: z-coordinate of the anchor point." } }, "curveVertex": { "description": [ - "Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). For WebGL mode curveVertex() can be used in 2D as well as 3D mode. 2D mode expects 2 parameters, while 3D mode expects 3 parameters.", - "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines." + "Adds a spline curve segment to a custom shape.", + "curveVertex() adds a curved segment to custom shapes. The spline curves it creates are defined like those made by the curve() function. curveVertex() must be called between the beginShape() and endShape() functions.", + "Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points. curveVertex() must be called at least four times between beginShape() and endShape() in order to draw a curve: beginShape();", + "// Add the first control point. curveVertex(84, 91);", + "// Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17);", + "// Add the second control point. curveVertex(32, 91);", + "endShape(); ", + "The code snippet above would only draw the curve between the anchor points, similar to the curve() function. The segments between the control and anchor points can be drawn by calling curveVertex() with the coordinates of the control points: beginShape();", + "// Add the first control point and draw a segment to it. curveVertex(84, 91); curveVertex(84, 91);", + "// Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17);", + "// Add the second control point. curveVertex(32, 91);", + "// Uncomment the next line to draw the segment to the second control point. // curveVertex(32, 91);", + "endShape(); ", + "The first two parameters, x and y, set the vertex’s location. For example, calling curveVertex(10, 10) adds a point to the curve at (10, 10).", + "Spline curves can also be drawn in 3D using WebGL mode. The 3D version of curveVertex() has three arguments because each point has x-, y-, and z-coordinates. By default, the vertex’s z-coordinate is set to 0.", + "Note: curveVertex() won’t work when an argument is passed to beginShape()." ], "params": { "x": "Number: x-coordinate of the vertex", "y": "Number: y-coordinate of the vertex", - "z": "Number: (Optional) z-coordinate of the vertex (for WebGL mode)" + "z": "Number: (Optional) z-coordinate of the vertex." } }, "endContour": { "description": [ - "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", - "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." + "Stops creating a hole within a flat shape.", + "The beginContour() and endContour() functions allow for creating negative space within custom shapes that are flat. beginContour() begins adding vertices to a negative space and endContour() stops adding them. beginContour() and endContour() must be called between beginShape() and endShape().", + "Transformations such as translate(), rotate(), and scale() don't work between beginContour() and endContour(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginContour() and endContour().", + "Note: The vertices that define a negative space must \"wind\" in the opposite direction from the outer shape. First, draw vertices for the outer shape clockwise order. Then, draw vertices for the negative space in counter-clockwise order." ] }, "endShape": { "description": [ - "The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of the image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE is the value for the mode parameter to close the shape (to connect the beginning and the end). When using instancing with endShape() the instancing will not apply to the strokes. When the count parameter is used with a value greater than 1, it enables instancing for shapes built when in WEBGL mode. Instancing is a feature that allows the GPU to efficiently draw multiples of the same shape. It's often used for particle effects or other times when you need a lot of repetition. In order to take advantage of instancing, you will also need to write your own custom shader using the gl_InstanceID keyword. You can read more about instancing here or by working from the example on this page." + "Begins adding vertices to a custom shape.", + "The beginShape() and endShape() functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and endShape() stops adding them.", + "The first parameter, mode, is optional. By default, the first and last vertices of a shape aren't connected. If the constant CLOSE is passed, as in endShape(CLOSE), then the first and last vertices will be connected.", + "The second parameter, count, is also optional. In WebGL mode, it’s more efficient to draw many copies of the same shape using a technique called instancing. The count parameter tells WebGL mode how many copies to draw. For example, calling endShape(CLOSE, 400) after drawing a custom shape will make it efficient to draw 400 copies. This feature requires writing a custom shader.", + "After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). Calling endShape() will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color.", + "Transformations such as translate(), rotate(), and scale() don't work between beginShape() and endShape(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginShape() and endShape()." ], "params": { "mode": "Constant: (Optional) use CLOSE to close the shape", @@ -803,39 +860,59 @@ }, "quadraticVertex": { "description": [ - "Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode. 2D mode expects 4 parameters, while 3D mode expects 6 parameters (including z coordinates).", - "This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." + "Adds a quadratic Bézier curve segment to a custom shape.", + "quadraticVertex() adds a curved segment to custom shapes. The Bézier curve segments it creates are similar to those made by the bezierVertex() function. quadraticVertex() must be called between the beginShape() and endShape() functions. The curved segment uses the previous vertex as the first anchor point, so there must be at least one call to vertex() before quadraticVertex() can be used.", + "The first two parameters, cx and cy, set the curve’s control point. The control point \"pulls\" the curve towards its.", + "The last two parameters, x3, and y3, set the last anchor point. The last anchor point is where the curve ends.", + "Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of bezierVertex() has eight arguments because each point has x-, y-, and z-coordinates.", + "Note: quadraticVertex() won’t work when an argument is passed to beginShape()." ], "params": { - "cx": "Number: x-coordinate for the control point", - "cy": "Number: y-coordinate for the control point", - "x3": "Number: x-coordinate for the anchor point", - "y3": "Number: y-coordinate for the anchor point", - "cz": "Number: z-coordinate for the control point (for WebGL mode)", - "z3": "Number: z-coordinate for the anchor point (for WebGL mode)" + "cx": "Number: x-coordinate of the control point.", + "cy": "Number: y-coordinate of the control point.", + "x3": "Number: x-coordinate of the anchor point.", + "y3": "Number: y-coordinate of the anchor point.", + "cz": "Number: z-coordinate of the control point.", + "z3": "Number: z-coordinate of the anchor point." } }, "vertex": { "description": [ - "All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions." + "Adds a vertex to a custom shape.", + "vertex() sets the coordinates of vertices drawn between the beginShape() and endShape() functions.", + "The first two parameters, x and y, set the x- and y-coordinates of the vertex.", + "The third parameter, z, is optional. It sets the z-coordinate of the vertex in WebGL mode. By default, z is 0.", + "The fourth and fifth parameters, u and v, are also optional. They set the u- and v-coordinates for the vertex’s texture when used with endShape(). By default, u and v are both 0." ], "params": { - "x": "Number: x-coordinate of the vertex", - "y": "Number: y-coordinate of the vertex", - "z": "Number: (Optional) z-coordinate of the vertex. Defaults to 0 if not specified.", - "u": "Number: (Optional) the vertex's texture u-coordinate", - "v": "Number: (Optional) the vertex's texture v-coordinate" + "x": "Number: x-coordinate of the vertex.", + "y": "Number: y-coordinate of the vertex.", + "z": "Number: (Optional) z-coordinate of the vertex. Defaults to 0.", + "u": "Number: (Optional) u-coordinate of the vertex's texture. Defaults to 0.", + "v": "Number: (Optional) v-coordinate of the vertex's texture. Defaults to 0." } }, "normal": { "description": [ - "Sets the 3d vertex normal to use for subsequent vertices drawn with vertex(). A normal is a vector that is generally nearly perpendicular to a shape's surface which controls how much light will be reflected from that part of the surface." + "Sets the normal vector for vertices in a custom 3D shape.", + "3D shapes created with beginShape() and endShape() are made by connecting sets of points called vertices. Each vertex added with vertex() has a normal vector that points away from it. The normal vector controls how light reflects off the shape.", + "normal() can be called two ways with different parameters to define the normal vector's components.", + "The first way to call normal() has three parameters, x, y, and z. If Numbers are passed, as in normal(1, 2, 3), they set the x-, y-, and z-components of the normal vector.", + "The second way to call normal() has one parameter, vector. If a p5.Vector object is passed, as in normal(myVector), its components will be used to set the normal vector.", + "normal() changes the normal vector of vertices added to a custom shape with vertex(). normal() must be called between the beginShape() and endShape() functions, just like vertex(). The normal vector set by calling normal() will affect all following vertices until normal() is called again: beginShape();", + "// Set the vertex normal. normal(-0.4, -0.4, 0.8);", + "// Add a vertex. vertex(-30, -30, 0);", + "// Set the vertex normal. normal(0, 0, 1);", + "// Add vertices. vertex(30, -30, 0); vertex(30, 30, 0);", + "// Set the vertex normal. normal(0.4, -0.4, 0.8);", + "// Add a vertex. vertex(-30, 30, 0);", + "endShape(); " ], "params": { - "vector": "Vector: A p5.Vector representing the vertex normal.", - "x": "Number: The x component of the vertex normal.", - "y": "Number: The y component of the vertex normal.", - "z": "Number: The z component of the vertex normal." + "vector": "p5.Vector: vertex normal as a p5.Vector object.", + "x": "Number: x-component of the vertex normal.", + "y": "Number: y-component of the vertex normal.", + "z": "Number: z-component of the vertex normal." } }, "VERSION": { @@ -868,37 +945,51 @@ "WAIT": {}, "HALF_PI": { "description": [ - "HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + "A Number constant that's approximately 1.5708.", + "HALF_PI is half the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling rotate(HALF_PI) rotates the coordinate system HALF_PI radians, which is a quarter turn (90˚).", + "Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI radians equals 90˚, and QUARTER_PI radians equals 45˚." ] }, "PI": { "description": [ - "PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + "A Number constant that's approximately 3.1416.", + "PI is the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling rotate(PI) rotates the coordinate system PI radians, which is a half turn (180˚).", + "Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI radians equals 90˚, and QUARTER_PI radians equals 45˚." ] }, "QUARTER_PI": { "description": [ - "QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + "A Number constant that's approximately 0.7854.", + "QUARTER_PI is one-fourth the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling rotate(QUARTER_PI) rotates the coordinate system QUARTER_PI radians, which is an eighth of a turn (45˚).", + "Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI radians equals 90˚, and QUARTER_PI radians equals 45˚." ] }, "TAU": { "description": [ - "TAU is an alias for TWO_PI, a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + "A Number constant that's approximately 6.2382.", + "TAU is twice the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling rotate(TAU) rotates the coordinate system TAU radians, which is one full turn (360˚). TAU and TWO_PI are equal.", + "Note: TAU radians equals 360˚, PI radians equals 180˚, HALF_PI radians equals 90˚, and QUARTER_PI radians equals 45˚." ] }, "TWO_PI": { "description": [ - "TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + "A Number constant that's approximately 6.2382.", + "TWO_PI is twice the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling rotate(TWO_PI) rotates the coordinate system TWO_PI radians, which is one full turn (360˚). TWO_PI and TAU are equal.", + "Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI radians equals 90˚, and QUARTER_PI radians equals 45˚." ] }, "DEGREES": { "description": [ - "Constant to be used with the angleMode() function, to set the mode in which p5.js interprets and calculates angles (either DEGREES or RADIANS)." + "A String constant that's used to set the angleMode().", + "By default, functions such as rotate() and sin() expect angles measured in units of radians. Calling angleMode(DEGREES) ensures that angles are measured in units of degrees.", + "Note: TWO_PI radians equals 360˚." ] }, "RADIANS": { "description": [ - "Constant to be used with the angleMode() function, to set the mode in which p5.js interprets and calculates angles (either RADIANS or DEGREES)." + "A String constant that's used to set the angleMode().", + "By default, functions such as rotate() and sin() expect angles measured in units of radians. Calling angleMode(RADIANS) ensures that angles are measured in units of radians. Doing so can be useful if the angleMode() has been set to DEGREES.", + "Note: TWO_PI radians equals 360˚." ] }, "CORNER": {}, @@ -1214,115 +1305,189 @@ }, "let": { "description": [ - "Creates and names a new variable. A variable is a container for a value.", - "Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within.", - "From the MDN entry: Declares a block scope local variable, optionally initializing it to a value." - ] - }, - "const": { - "description": [ - "Creates and names a new constant. Like a variable created with let, a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const.", - "Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists.", - "From the MDN entry: Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared." - ] - }, - "===": { - "description": [ - "The strict equality operator === checks to see if two values are equal and of the same type.", - "A comparison expression always evaluates to a boolean.", - "From the MDN entry: The non-identity operator returns true if the operands are not equal and/or not of the same type.", - "Note: In some examples around the web you may see a double-equals-sign ==, used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them." - ] - }, - ">": { - "description": [ - "The greater than operator \">> evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN." - ] - }, - ">=": { - "description": [ - "The greater than or equal to operator =\">>= evaluates to true if the left value is greater than or equal to the right value.", - "There is more info on comparison operators on MDN." - ] - }, - "<": { - "description": [ - "The less than operator < evaluates to true if the left value is less than the right value.", - "There is more info on comparison operators on MDN." - ] - }, - "<=": { - "description": [ - "The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value.", - "There is more info on comparison operators on MDN." - ] - }, - "if-else": { - "description": [ - "The if-else statement helps control the flow of your code.", - "A condition is placed between the parenthesis following 'if', when that condition evalues to truthy, the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy, the code between the curly braces of 'else' block is run instead. Writing an else block is optional.", - "From the MDN entry: The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed" + "Declares a new variable.", + "A variable is a container for a value. For example, a variable might contain a creature's x-coordinate as a Number or its name as a String. Variables can change value by reassigning them as follows: // Declare the variable x and assign it the value 10. let x = 10;", + "// Reassign x to 50. x = 50; ", + "Variables have block scope. When a variable is declared between curly braces {}, it only exists within the block defined by those braces. For example, the following code would throw a ReferenceError because x is declared within the setup() function's block: function setup() { createCanvas(100, 100);", + "let x = 50; }", + "function draw() { background(200);", + "// x was declared in setup(), so it can't be referenced here. circle(x, 50, 20); } ", + "Variables declared outside of all curly braces {} are in the global scope. A variable that's in the global scope can be used and changed anywhere in a sketch: let x = 50;", + "function setup() { createCanvas(100, 100); }", + "function draw() { background(200);", + "// Change the value of x. x += 10;", + "circle(x, 50, 20); } " + ] + }, + "if": { + "description": [ + "A way to choose whether to run a block of code.", + "if statements are helpful for running a block of code based on a condition. For example, an if statement makes it easy to express the idea \"Draw a circle if the mouse is pressed.\": if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } ", + "The statement header begins with the keyword if. The expression in parentheses mouseIsPressed === true is a Boolean expression that's either true or false. The code between the curly braces {} is the if statement's body. The body only runs if the Boolean expression is true.", + "The mouseIsPressed system variable is always true or false, so the code snippet above could also be written as follows: if (mouseIsPressed) { circle(mouseX, mouseY, 20); } ", + "An if-else statement adds a block of code that runs if the Boolean expression is false. For example, here's an if-else statement that expresses the idea \"Draw a circle if the mouse is pressed. Otherwise, display a message.\": if (mouseIsPressed === true) { // When true. circle(mouseX, mouseY, 20); } else { // When false. text('Click me!', 50, 50); } ", + "There are two possible paths, or branches, in this code snippet. The program must follow one branch or the other.", + "An else-if statement makes it possible to add more branches. else-if statements run different blocks of code under different conditions. For example, an else-if statement makes it easy to express the idea \"If the mouse is on the left, paint the canvas white. If the mouse is in the middle, paint the canvas gray. Otherwise, paint the canvas black.\": if (mouseX < 33) { background(255); } else if (mouseX < 67) { background(200); } else { background(0); } ", + "if statements can add as many else-if statements as needed. However, there can only be one else statement and it must be last.", + "if statements can also check for multiple conditions at once. For example, the Boolean operator && (AND) checks whether two expressions are both true: if (keyIsPressed === true && key === 'p') { text('You pressed the \"p\" key!', 50, 50); } ", + "If the user is pressing a key AND that key is 'p', then a message will display.", + "The Boolean operator || (OR) checks whether at least one of two expressions is true: if (keyIsPressed === true || mouseIsPressed === true) { text('You did something!', 50, 50); } ", + "If the user presses a key, or presses a mouse button, or both, then a message will display.", + "The body of an if statement can contain another if statement. This is called a \"nested if statement.\" For example, nested if statements make it easy to express the idea \"If a key is pressed, then check if the key is 'r'. If it is, then set the fill to red.\": if (keyIsPressed === true) { if (key === 'r') { fill('red'); } } ", + "See Boolean and Number to learn more about these data types and the operations they support." ] }, "function": { "description": [ - "Creates and names a function. A function is a set of statements that perform a task.", - "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commmas.", - "From the MDN entry: Declares a function with the specified parameters." - ] - }, - "return": { - "description": [ - "Specifies the value to be returned by a function. For more info checkout the MDN entry for return." - ] - }, - "boolean": { - "description": [ - "Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value \"true\" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned." - ], - "returns": "Boolean: boolean representation of value", - "params": { - "n": "String|Boolean|Number|Array: value to parse" - } - }, - "string": { - "description": [ - "A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(\").", - "From the MDN entry: A string is a sequence of characters used to represent text." - ] - }, - "number": { - "description": [ - "A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number.", - "The MDN entry for number" - ] - }, - "object": { - "description": [ - "From MDN's object basics: An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)" + "A named group of statements.", + "Functions help with organizing and reusing code. For example, functions make it easy to express the idea \"Draw a flower.\": function drawFlower() { // Style the text. textAlign(CENTER, CENTER); textSize(20);", + "// Draw a flower emoji. text('🌸', 50, 50); } ", + "The function header begins with the keyword function. The function's name, drawFlower, is followed by parentheses () and curly braces {}. The code between the curly braces is called the function's body. The function's body runs when the function is called like so: drawFlower(); ", + "Functions can accept inputs by adding parameters to their headers. Parameters are placeholders for values that will be provided when the function is called. For example, the drawFlower() function could include a parameter for the flower's size: function drawFlower(size) { // Style the text. textAlign(CENTER, CENTER);", + "// Use the size parameter. textSize(size);", + "// Draw a flower emoji. text('🌸', 50, 50); } ", + "Parameters are part of the function's declaration. Arguments are provided by the code that calls a function. When a function is called, arguments are assigned to parameters: // The argument 20 is assigned to the parameter size. drawFlower(20); ", + "Functions can have multiple parameters separated by commas. Parameters can have any type. For example, the drawFlower() function could accept Number parameters for the flower's x- and y-coordinates along with its size: function drawFlower(x, y, size) { // Style the text. textAlign(CENTER, CENTER);", + "// Use the size parameter. textSize(size);", + "// Draw a flower emoji. // Use the x and y parameters. text('🌸', x, y); } ", + "Functions can also produce outputs by adding a return statement: function double(x) { let answer = 2 * x; return answer; } ", + "The expression following return can produce an output that's used elsewhere. For example, the output of the double() function can be assigned to a variable: let six = double(3); text(`3 x 2 = ${six}`, 50, 50); " + ] + }, + "Boolean": { + "description": [ + "A value that's either true or false.", + "Boolean values help to make decisions in code. They appear any time a logical condition is checked. For example, the condition \"Is a mouse button being pressed?\" must be either true or false: // If the user presses the mouse, draw a circle at // the mouse's location. if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } ", + "The if statement checks whether mouseIsPressed is true and draws a circle if it is. Boolean expressions such as mouseIsPressed === true evaluate to one of the two possible Boolean values: true or false.", + "The === operator (EQUAL) checks whether two values are equal. If they are, the expression evaluates to true. Otherwise, it evaluates to false.", + "Note: There's also a == operator with two = instead of three. Don't use it.", + "The mouseIsPressed system variable is always true or false, so the code snippet above could also be written as follows: if (mouseIsPressed) { circle(mouseX, mouseY, 20); } ", + "The !== operator (NOT EQUAL) checks whether two values are not equal, as in the following example: if (2 + 2 !== 4) { text('War is peace.', 50, 50); } ", + "Starting from the left, the arithmetic expression 2 + 2 produces the value 4. The Boolean expression 4 !== 4 evaluates to false because 4 is equal to itself. As a result, the if statement's body is skipped.", + "Note: There's also a != operator with one = instead of two. Don't use it.", + "The Boolean operator && (AND) checks whether two expressions are both true: if (keyIsPressed === true && key === 'p') { text('You pressed the \"p\" key!', 50, 50); } ", + "If the user is pressing a key AND that key is 'p', then a message will display.", + "The Boolean operator || (OR) checks whether at least one of two expressions is true: if (keyIsPressed === true || mouseIsPressed === true) { text('You did something!', 50, 50); } ", + "If the user presses a key, or presses a mouse button, or both, then a message will display.", + "The following truth table summarizes a few common scenarios with && and ||: true && true // true true && false // false false && false // false true || true // true true || false // true false || false // true ", + "The relational operators >, <, >=, and <= also produce Boolean values: 2 > 1 // true 2 < 1 // false 2 >= 2 // true 2 <= 2 // true ", + "See Number for more information about Numbers." + ] + }, + "String": { + "description": [ + "A sequence of text characters.", + "The String data type is helpful for working with text. For example, a string could contain a welcome message: // Use a string literal. text('Hello!', 10, 10); // Create a string variable. let message = 'Hello!';", + "// Use the string variable. text(message, 10, 10); ", + "The most common way to create strings is to use some form of quotations as follows: text(\"hi\", 50, 50); text('hi', 50, 50); text(`hi`, 50, 50); ", + "\"hi\", 'hi', and hi are all string literals. A \"literal\" means a value was actually written, as in text('hi', 50, 50). By contrast, text(message, 50, 50) uses the variable message, so it isn't a string literal.", + "Single quotes '' and double quotes \"\" mean the same thing. It's nice to have the option for cases when a string contains one type of quote: text(\"What's up?\", 50, 50); text('Air quotes make you look \"cool.\"', 50, 50); ", + "Backticks ```` create template literals. Template literals have many uses. For example, they can contain both single and double quotes as needed: text(`\"Don't you forget about me\"`, 10, 10); ", + "Template literals are helpful when strings are created from variables like so: let size = random(10, 20); circle(50, 50, size);", + "text(The circle's diameter is ${size} pixels., 10, 10); ", + "The size variable's value will replace ${size} when the string is created. ${} is a placeholder for any value. That means an expression can be used, as in ${round(PI, 3)}. All of the following are valid template literals: text(`π is about ${round(PI, 2)} pixels.`, 10, 10); text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30); ", + "Template literals can include several variables: let x = random(0, 100); let y = random(0, 100); let size = random(10, 20); circle(x, y, size);", + "text(The circle at (${x}, ${y}) has a diameter of ${size} pixels., 10, 10); ", + "Template literals are also helpful for creating multi-line text like so: let poem = `My sketch doesn't run; it waits for me patiently while bugs point the way.`;", + "text(poem, 10, 10); " + ] + }, + "Number": { + "description": [ + "A number that can be positive, negative, or zero.", + "The Number data type is useful for describing values such as position, size, and color. A number can be an integer such as 20 or a decimal number such as 12.34. For example, a circle's position and size can be described by three numbers: circle(50, 50, 20); circle(50, 50, 12.34); ", + "Numbers support basic arithmetic and follow the standard order of operations: Parentheses, Exponents, Multiplication, Division, Addition, and Subtraction (PEMDAS). For example, it's common to use arithmetic operators with p5.js' system variables that are numbers: // Draw a circle at the center. circle(width / 2, height / 2, 20); // Draw a circle that moves from left to right. circle(frameCount * 0.01, 50, 20); ", + "Here's a quick overview of the arithmetic operators: 1 + 2 // Add 1 - 2 // Subtract 1 * 2 // Multiply 1 / 2 // Divide 1 % 2 // Remainder 1 ** 2 // Exponentiate ", + "It's common to update a number variable using arithmetic. For example, an object's location can be updated like so: x = x + 1; ", + "The statement above adds 1 to a variable x using the + operator. The addition assignment operator += expresses the same idea: x += 1; ", + "Here's a quick overview of the assignment operators: x += 2 // Addition assignment x -= 2 // Subtraction assignment x *= 2 // Multiplication assignment x /= 2 // Division assignment x %= 2 // Remainder assignment ", + "Numbers can be compared using the relational operators >, <, >=, <=, ===, and !==. For example, a sketch's frameCount can be used as a timer: if (frameCount > 1000) { text('Game over!', 50, 50); } ", + "An expression such as frameCount > 1000 evaluates to a Boolean value that's either true or false. The relational operators all produce Boolean values: 2 > 1 // true 2 < 1 // false 2 >= 2 // true 2 <= 2 // true 2 === 2 // true 2 !== 2 // false ", + "See Boolean for more information about comparisons and conditions.", + "Note: There are also == and != operators with one fewer =. Don't use them.", + "Expressions with numbers can also produce special values when something goes wrong: sqrt(-1) // NaN 1 / 0 // Infinity ", + "The value NaN stands for Not-A-Number. NaN appears when calculations or conversions don't work. Infinity is a value that's larger than any number. It appears during certain calculations." + ] + }, + "Object": { + "description": [ + "A container for data that's stored as key-value pairs.", + "Objects help to organize related data of any type, including other objects. A value stored in an object can be accessed by name, called its key. Each key-value pair is called a \"property.\" Objects are similar to dictionaries in Python and maps in Java and Ruby.", + "For example, an object could contain the location, size, and appearance of a dog: // Declare the dog variable and assign it an object. let dog = { x: 50, y: 50, size: 20, emoji: '🐶' };", + "// Style the text. textAlign(CENTER, CENTER); textSize(dog.size);", + "// Draw the dog. text(dog.emoji, dog.x, dog.y); ", + "The variable dog is assigned an object with four properties. Objects are declared with curly braces {}. Values can be accessed using the dot operator, as in dog.size. In the example above, the key size corresponds to the value 20. Objects can also be empty to start: // Declare a cat variable and assign it an empty object. let cat = {};", + "// Add properties to the object. cat.x = 50; cat.y = 50; cat.size = 20; cat.emoji = '🐱';", + "// Style the text. textAlign(CENTER, CENTER); textSize(cat.size);", + "// Draw the cat. text(cat.emoji, cat.x, cat.y); ", + "An object's data can be updated while a sketch runs. For example, the cat could run away from the dog by updating its location: // Run to the right. cat.x += 5; ", + "If needed, an object's values can be accessed using square brackets [] and strings instead of dot notation: // Run to the right. cat[\"x\"] += 5; ", + "This syntax can be helpful when the key's name has spaces, as in cat['height (m)']." + ] + }, + "Array": { + "description": [ + "A list that keeps several pieces of data in order.", + "Arrays are helpful for storing related data. They can contain data of any type. For example, an array could contain a list of someone's favorite colors as strings. Arrays are created as follows: let colors = ['deeppink', 'darkorchid', 'magenta']; ", + "Each piece of data in an array is called an element. Each element has an address, or index, within its array. The variable colors refers to an array with three String> elements, 'deeppink', 'darkorchid', and 'magenta'. Arrays are zero-indexed, which means that 'deeppink' is at index 0, 'darkorchid' is at index 1, and 'magenta' is at index 2. Array elements can be accessed using their indices as follows: let zeroth = colors[0]; // 'deeppink' let first = colors[1]; // 'darkorchid' let second = colors[2]; // 'magenta' ", + "Elements can be added to the end of an array by calling the push() method as follows: colors.push('lavender');", + "let third = colors[3]; // 'lavender' ", + "See MDN for more information about arrays." ] }, "class": { "description": [ - "Creates and names a class which is a template for the creation of objects.", - "From the MDN entry: The class declaration creates a new Class with a given name using prototype-based inheritance." + "A template for creating objects of a particular type.", + "Classes can make it easier to program with objects. For example, a Frog class could create objects that behave like frogs. Each object created using a class is called an instance of that class. All instances of a class are the same type. Here's an example of creating an instance of a Frog class: let fifi = new Frog(50, 50, 20); ", + "The variable fifi refers to an instance of the Frog class. The keyword new is used to call the Frog class' constructor in the statement new Frog(). Altogether, a new Frog object was created and assigned to the variable fifi. Classes are templates, so they can be used to create more than one instance: // First Frog instance. let frog1 = new Frog(25, 50, 10);", + "// Second Frog instance. let frog2 = new Frog(75, 50, 10); ", + "A simple Frog class could be declared as follows: class Frog { constructor(x, y, size) { // This code runs once when an instance is created. this.x = x; this.y = y; this.size = size; }", + "show() { // This code runs once when myFrog.show() is called. textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); }", + "hop() { // This code runs once when myFrog.hop() is called. this.x += random(-10, 10); this.y += random(-10, 10); } } ", + "Class declarations begin with the keyword class followed by the class name, such as Frog, and curly braces {}. Class names should use PascalCase and can't have spaces in their names. For example, naming a class Kermit The Frog with spaces between each word would throw a SyntaxError. The code between the curly braces {} defines the class.", + "Functions that belong to a class are called methods. constructor(), show(), and hop() are methods in the Frog class. Methods define an object's behavior. Methods can accept parameters and return values, just like functions. Note that methods don't use the function keyword.", + "constructor() is a special method that's called once when an instance of the class is created. The statement new Frog() calls the Frog class' constructor() method.", + "A class definition is a template for instances. The keyword this refers to an instance's data and methods. For example, each Frog instance has unique coordinates stored in this.x and this.y. The show() method uses those coordinates to draw the frog. The hop() method updates those coordinates when called. Once a Frog instance is created, its data and methods can be accessed using the dot operator . as follows: // Draw a lily pad. fill('green'); stroke('green'); circle(fifi.x, fifi.y, 2 * fifi.size);", + "// Show the Frog. fifi.show();", + "// Hop. fifi.hop(); " ] }, "for": { "description": [ - "for creates a loop that is useful for executing one section of code multiple times.", - "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written.", - "The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression.", - "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser.", - "From the MDN entry: Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once." + "A way to repeat a block of code when the number of iterations is known.", + "for loops are helpful for repeating statements a certain number of times. For example, a for loop makes it easy to express the idea \"draw five lines\" like so: for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); } ", + "The loop's header begins with the keyword for. Loops generally count up or count down as they repeat, or iterate. The statements in parentheses let x = 10; x < 100; x += 20 tell the loop how it should repeat:
            • let x = 10 tells the loop to start counting at 10 and keep track of iterations using the variable x.
            • x < 100 tells the loop to count up to, but not including, 100.
            • x += 20 tells the loop to count up by 20 at the end of each iteration.
            ", + "The code between the curly braces {} is the loop's body. Statements in the loop body are repeated during each iteration of the loop.", + "It's common to create infinite loops accidentally. When this happens, sketches may become unresponsive and the web browser may display a warning. For example, the following loop never stops iterating because it doesn't count up: for (let x = 10; x < 100; x = 20) { line(x, 25, x, 75); } ", + "The statement x = 20 keeps the variable x stuck at 20, which is always less than 100.", + "for loops can also count down: for (let d = 100; d > 0; d -= 10) { circle(50, 50, d); } ", + "for loops can also contain other loops. The following nested loop draws a grid of points: // Loop from left to right. for (let x = 10; x < 100; x += 10) {", + "// Loop from top to bottom. for (let y = 10; y < 100; y += 10) { point(x, y); }", + "} ", + "for loops are also helpful for iterating through the elements of an array. For example, it's common to iterate through an array that contains information about where or what to draw: // Create an array of x-coordinates. let xCoordinates = [20, 40, 60];", + "for (let i = 0; i < xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1);", + "// Draw a circle. circle(xCoordinates[i], 50, 20); } ", + "If the array's values aren't modified, the for...of statement can simplify the code. They're similar to for loops in Python and for-each loops in C++ and Java. The following loops have the same effect: // Draw circles with a for loop. let xCoordinates = [20, 40, 60];", + "for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } // Draw circles with a for...of statement. let xCoordinates = [20, 40, 60];", + "for (let x of xCoordinates) { circle(x, 50, 20); } ", + "In the code snippets above, the variables i and x have different roles.", + "In the first snippet, i counts from 0 up to 2, which is one less than xCoordinates.length. i is used to access the element in xCoordinates at index i.", + "In the second code snippet, x isn't keeping track of the loop's progress or an index. During each iteration, x contains the next element of xCoordinates. x starts from the beginning of xCoordinates (20) and updates its value to 40 and then 60 during the next iterations." ] }, "while": { "description": [ - "while creates a loop that is useful for executing one section of code multiple times.", - "With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while, so if the condition is initially false the loop body, or statement, will never execute.", - "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser.", - "From the MDN entry: The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement." + "A way to repeat a block of code.", + "while loops are helpful for repeating statements while a condition is true. They're like if statements that repeat. For example, a while loop makes it easy to express the idea \"draw several lines\" like so: // Declare a variable to keep track of iteration. let x = 10;", + "// Repeat as long as x < 100 while (x < 100) { line(x, 25, x, 75);", + "// Increment by 20. x += 20; } ", + "The loop's header begins with the keyword while. Loops generally count up or count down as they repeat, or iterate. The statement in parentheses x < 100 is a condition the loop checks each time it iterates. If the condition is true, the loop runs the code between the curly braces {}, The code between the curly braces is called the loop's body. If the condition is false, the body is skipped and the loop is stopped.", + "It's common to create infinite loops accidentally. For example, the following loop never stops iterating because it doesn't count up: // Declare a variable to keep track of iteration. let x = 10;", + "// Repeat as long as x < 100 while (x < 100) { line(x, 25, x, 75); }", + "// This should be in the loop's body! x += 20; ", + "The statement x += 20 appears after the loop's body. That means the variable x is stuck at 10, which is always less than 100.", + "while loops are useful when the number of iterations isn't known in advance. For example, concentric circles could be drawn at random increments: let d = 100; let minSize = 5;", + "while (d > minSize) { circle(50, 50, d); d -= random(10); } " ] }, "createCanvas": { @@ -1466,41 +1631,52 @@ }, "applyMatrix": { "description": [ - "Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia.", - "The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:
            ", - "\"The
            ", - "\"The" - ], - "params": { - "arr": "Array: an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)", - "a": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "b": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "c": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "d": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "e": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "f": "Number: numbers which define the 2×3 or 4×4 matrix to be multiplied", - "g": "Number: numbers which define the 4×4 matrix to be multiplied", - "h": "Number: numbers which define the 4×4 matrix to be multiplied", - "i": "Number: numbers which define the 4×4 matrix to be multiplied", - "j": "Number: numbers which define the 4×4 matrix to be multiplied", - "k": "Number: numbers which define the 4×4 matrix to be multiplied", - "l": "Number: numbers which define the 4×4 matrix to be multiplied", - "m": "Number: numbers which define the 4×4 matrix to be multiplied", - "n": "Number: numbers which define the 4×4 matrix to be multiplied", - "o": "Number: numbers which define the 4×4 matrix to be multiplied", - "p": "Number: numbers which define the 4×4 matrix to be multiplied" + "Applies a transformation matrix to the coordinate system.", + "Transformations such as translate(), rotate(), and scale() use matrix-vector multiplication behind the scenes. A table of numbers, called a matrix, encodes each transformation. The values in the matrix then multiply each point on the canvas, which is represented by a vector.", + "applyMatrix() allows for many transformations to be applied at once. See Wikipedia and MDN for more details about transformations.", + "There are two ways to call applyMatrix() in two and three dimensions.", + "In 2D mode, the parameters a, b, c, d, e, and f, correspond to elements in the following transformation matrix:
            ", + "\"The
            ", + "The numbers can be passed individually, as in applyMatrix(2, 0, 0, 0, 2, 0). They can also be passed in an array, as in applyMatrix([2, 0, 0, 0, 2, 0]).", + "In 3D mode, the parameters a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, and p correspond to elements in the following transformation matrix:", + "\"The", + "The numbers can be passed individually, as in applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1). They can also be passed in an array, as in applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]).", + "By default, transformations accumulate. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling applyMatrix() inside the draw() function won't cause shapes to transform continuously." + ], + "params": { + "arr": "Array: an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).", + "a": "Number: an element of the transformation matrix.", + "b": "Number: an element of the transformation matrix.", + "c": "Number: an element of the transformation matrix.", + "d": "Number: an element of the transformation matrix.", + "e": "Number: an element of the transformation matrix.", + "f": "Number: an element of the transformation matrix.", + "g": "Number: an element of the transformation matrix.", + "h": "Number: an element of the transformation matrix.", + "i": "Number: an element of the transformation matrix.", + "j": "Number: an element of the transformation matrix.", + "k": "Number: an element of the transformation matrix.", + "l": "Number: an element of the transformation matrix.", + "m": "Number: an element of the transformation matrix.", + "n": "Number: an element of the transformation matrix.", + "o": "Number: an element of the transformation matrix.", + "p": "Number: an element of the transformation matrix." } }, "resetMatrix": { "description": [ - "Replaces the current matrix with the identity matrix." + "Clears all transformations applied to the coordinate system." ] }, "rotate": { "description": [ - "Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulate the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All transformations are reset when draw() begins again.", - "Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by push() and pop()." + "Rotates the coordinate system.", + "By default, the positive x-axis points to the right and the positive y-axis points downward. The rotate() function changes this orientation by rotating the coordinate system about the origin. Everything drawn after rotate() is called will appear to be rotated.", + "The first parameter, angle, is the amount to rotate. For example, calling rotate(1) rotates the coordinate system clockwise 1 radian which is nearly 57˚. rotate() interprets angle values using the current angleMode().", + "The second parameter, axis, is optional. It's used to orient 3D rotations in WebGL mode. If a p5.Vector is passed, as in rotate(QUARTER_PI, myVector), then the coordinate system will rotate QUARTER_PI radians about myVector. If an array of vector components is passed, as in rotate(QUARTER_PI, [1, 0, 0]), then the coordinate system will rotate QUARTER_PI radians about a vector with the components [1, 0, 0].", + "By default, transformations accumulate. For example, calling rotate(1) twice has the same effect as calling rotate(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling rotate(1) inside the draw() function won't cause shapes to spin." ], "params": { "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode", @@ -1509,75 +1685,91 @@ }, "rotateX": { "description": [ - "Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + "Rotates the coordinate system about the x-axis in WebGL mode.", + "The parameter, angle, is the amount to rotate. For example, calling rotateX(1) rotates the coordinate system about the x-axis by 1 radian. rotateX() interprets angle values using the current angleMode().", + "By default, transformations accumulate. For example, calling rotateX(1) twice has the same effect as calling rotateX(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling rotateX(1) inside the draw() function won't cause shapes to spin." ], "params": { - "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + "angle": "Number: angle of rotation in the current angleMode()." } }, "rotateY": { "description": [ - "Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + "Rotates the coordinate system about the y-axis in WebGL mode.", + "The parameter, angle, is the amount to rotate. For example, calling rotateY(1) rotates the coordinate system about the y-axis by 1 radian. rotateY() interprets angle values using the current angleMode().", + "By default, transformations accumulate. For example, calling rotateY(1) twice has the same effect as calling rotateY(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling rotateY(1) inside the draw() function won't cause shapes to spin." ], "params": { - "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + "angle": "Number: angle of rotation in the current angleMode()." } }, "rotateZ": { "description": [ - "Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "This method works in WEBGL mode only.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + "Rotates the coordinate system about the z-axis in WebGL mode.", + "The parameter, angle, is the amount to rotate. For example, calling rotateZ(1) rotates the coordinate system about the z-axis by 1 radian. rotateZ() interprets angle values using the current angleMode().", + "By default, transformations accumulate. For example, calling rotateZ(1) twice has the same effect as calling rotateZ(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling rotateZ(1) inside the draw() function won't cause shapes to spin." ], "params": { - "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + "angle": "Number: angle of rotation in the current angleMode()." } }, "scale": { "description": [ - "Increases or decreases the size of a shape by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.", - "Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.", - "Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop()." + "Scales the coordinate system.", + "By default, shapes are drawn at their original scale. A rectangle that's 50 pixels wide appears to take up half the width of a 100 pixel-wide canvas. The scale() function can shrink or stretch the coordinate system so that shapes appear at different sizes. There are two ways to call scale() with parameters that set the scale factor(s).", + "The first way to call scale() uses numbers to set the amount of scaling. The first parameter, s, sets the amount to scale each axis. For example, calling scale(2) stretches the x-, y-, and z-axes by a factor of 2. The next two parameters, y and z, are optional. They set the amount to scale the y- and z-axes. For example, calling scale(2, 0.5, 1) stretches the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and leaves the z-axis unchanged.", + "The second way to call scale() uses a p5.Vector object to set the scale factors. For example, calling scale(myVector) uses the x-, y-, and z-components of myVector to set the amount of scaling along the x-, y-, and z-axes. Doing so is the same as calling scale(myVector.x, myVector.y, myVector.z).", + "By default, transformations accumulate. For example, calling scale(1) twice has the same effect as calling scale(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling scale(2) inside the draw() function won't cause shapes to grow continuously." ], "params": { - "s": "Number|p5.Vector|Number[]: percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given", - "y": "Number: (Optional) percent to scale the object in the y-axis", - "z": "Number: (Optional) percent to scale the object in the z-axis (webgl only)", - "scales": "p5.Vector|Number[]: per-axis percents to scale the object" + "s": "Number|p5.Vector|Number[]: amount to scale along the positive x-axis.", + "y": "Number: (Optional) amount to scale along the positive y-axis. Defaults to s.", + "z": "Number: (Optional) amount to scale along the positive z-axis. Defaults to y.", + "scales": "p5.Vector|Number[]: vector whose components should be used to scale." } }, "shearX": { "description": [ - "Shears a shape around the x-axis by the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", - "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.", - "Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." + "Shears the x-axis so that shapes appear skewed.", + "By default, the x- and y-axes are perpendicular. The shearX() function transforms the coordinate system so that x-coordinates are translated while y-coordinates are fixed.", + "The first parameter, angle, is the amount to shear. For example, calling shearX(1) transforms all x-coordinates using the formula x = x + y * tan(angle). shearX() interprets angle values using the current angleMode().", + "By default, transformations accumulate. For example, calling shearX(1) twice has the same effect as calling shearX(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling shearX(1) inside the draw() function won't cause shapes to shear continuously." ], "params": { - "angle": "Number: angle of shear specified in radians or degrees, depending on current angleMode" + "angle": "Number: angle to shear by in the current angleMode()." } }, "shearY": { "description": [ - "Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", - "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.", - "Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." + "Shears the y-axis so that shapes appear skewed.", + "By default, the x- and y-axes are perpendicular. The shearY() function transforms the coordinate system so that y-coordinates are translated while x-coordinates are fixed.", + "The first parameter, angle, is the amount to shear. For example, calling shearY(1) transforms all y-coordinates using the formula y = y + x * tan(angle). shearY() interprets angle values using the current angleMode().", + "By default, transformations accumulate. For example, calling shearY(1) twice has the same effect as calling shearY(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling shearY(1) inside the draw() function won't cause shapes to shear continuously." ], "params": { - "angle": "Number: angle of shear specified in radians or degrees, depending on current angleMode" + "angle": "Number: angle to shear by in the current angleMode()." } }, "translate": { "description": [ - "Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.", - "Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop()." + "Translates the coordinate system.", + "By default, the origin (0, 0) is at the sketch's top-left corner in 2D mode and center in WebGL mode. The translate() function shifts the origin to a different position. Everything drawn after translate() is called will appear to be shifted. There are two ways to call translate() with parameters that set the origin's position.", + "The first way to call translate() uses numbers to set the amount of translation. The first two parameters, x and y, set the amount to translate along the positive x- and y-axes. For example, calling translate(20, 30) translates the origin 20 pixels along the x-axis and 30 pixels along the y-axis. The third parameter, z, is optional. It sets the amount to translate along the positive z-axis. For example, calling translate(20, 30, 40) translates the origin 20 pixels along the x-axis, 30 pixels along the y-axis, and 40 pixels along the z-axis.", + "The second way to call translate() uses a p5.Vector object to set the amount of translation. For example, calling translate(myVector) uses the x-, y-, and z-components of myVector to set the amount to translate along the x-, y-, and z-axes. Doing so is the same as calling translate(myVector.x, myVector.y, myVector.z).", + "By default, transformations accumulate. For example, calling translate(10, 0) twice has the same effect as calling translate(20, 0) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.", + "Note: Transformations are reset at the beginning of the draw loop. Calling translate(10, 0) inside the draw() function won't cause shapes to move continuously." ], "params": { - "x": "Number: left/right translation", - "y": "Number: up/down translation", - "z": "Number: (Optional) forward/backward translation (WEBGL only)", - "vector": "p5.Vector: the vector to translate by" + "x": "Number: amount to translate along the positive x-axis.", + "y": "Number: amount to translate along the positive y-axis.", + "z": "Number: (Optional) amount to translate along the positive z-axis.", + "vector": "p5.Vector: vector by which to translate." } }, "storeItem": { @@ -2011,210 +2203,331 @@ }, "keyIsPressed": { "description": [ - "The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed." + "A Boolean system variable that's true if any key is currently pressed and false if not." ] }, "key": { "description": [ - "The system variable key always contains the value of the most recent key on the keyboard that was typed. To get the proper capitalization, it is best to use it within keyTyped(). For non-ASCII keys, use the keyCode variable." + "A String system variable that contains the value of the last key typed.", + "The key variable is helpful for checking whether an ASCII key has been typed. For example, the expression key === \"a\" evaluates to true if the a key was typed and false if not. key doesn’t update for special keys such as LEFT_ARROW and ENTER. Use keyCode instead for special keys. The keyIsDown() function should be used to check for multiple different key presses at the same time." ] }, "keyCode": { "description": [ - "The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You can also check for custom keys by looking up the keyCode of any key on a site like this: keycode.info." + "A Number system variable that contains the code of the last key typed.", + "All keys have a keyCode. For example, the a key has the keyCode 65. The keyCode variable is helpful for checking whether a special key has been typed. For example, the following conditional checks whether the enter key has been typed: if (keyCode === 13) { // Code to run if the enter key was pressed. } ", + "The same code can be written more clearly using the system variable ENTER which has a value of 13: if (keyCode === ENTER) { // Code to run if the enter key was pressed. } ", + "The system variables BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, and RIGHT_ARROW are all helpful shorthands the key codes of special keys. Key codes can be found on websites such as keycode.info." ] }, "keyPressed": { "description": [ - "The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.", - "For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.", - "For ASCII keys, the key that was pressed is stored in the key variable. However, it does not distinguish between uppercase and lowercase. For this reason, it is recommended to use keyTyped() to read the key variable, in which the case of the variable will be distinguished.", - "Because of how operating systems handle key repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + "A function that's called once when any key is pressed.", + "Declaring the function keyPressed() sets a code block to run once automatically when the user presses any key: function keyPressed() { // Code to run. } ", + "The key and keyCode variables will be updated with the most recently typed value when keyPressed() is called by p5.js: function keyPressed() { if (key === 'c') { // Code to run. }", + "if (keyCode === ENTER) { // Code to run. } } ", + "The parameter, event, is optional. keyPressed() is always passed a KeyboardEvent object with properties that describe the key press event: function keyPressed(event) { // Code to run that uses the event. console.log(event); } ", + "Browsers may have default behaviors attached to various key events. For example, some browsers may jump to the bottom of a web page when the SPACE key is pressed. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." + "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." } }, "keyReleased": { "description": [ - "The keyReleased() function is called once every time a key is released. See key and keyCode for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called once when any key is released.", + "Declaring the function keyReleased() sets a code block to run once automatically when the user releases any key: function keyReleased() { // Code to run. } ", + "The key and keyCode variables will be updated with the most recently released value when keyReleased() is called by p5.js: function keyReleased() { if (key === 'c') { // Code to run. }", + "if (keyCode === ENTER) { // Code to run. } } ", + "The parameter, event, is optional. keyReleased() is always passed a KeyboardEvent object with properties that describe the key press event: function keyReleased(event) { // Code to run that uses the event. console.log(event); } ", + "Browsers may have default behaviors attached to various key events. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." + "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." } }, "keyTyped": { "description": [ - "The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect a keyCode for one of these keys, use the keyPressed() function instead. The most recent key typed will be stored in the key variable.", - "Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called once when keys with printable characters are pressed.", + "Declaring the function keyTyped() sets a code block to run once automatically when the user presses any key with a printable character such as a or 1. Modifier keys such as SHIFT, CONTROL, and the arrow keys will be ignored: function keyTyped() { // Code to run. } ", + "The key and keyCode variables will be updated with the most recently released value when keyTyped() is called by p5.js: function keyTyped() { // Check for the \"c\" character using key. if (key === 'c') { // Code to run. }", + "// Check for \"c\" using keyCode. if (keyCode === 67) { // Code to run. } } ", + "The parameter, event, is optional. keyTyped() is always passed a KeyboardEvent object with properties that describe the key press event: function keyReleased(event) { // Code to run that uses the event. console.log(event); } ", + "Note: Use the keyPressed() function and keyCode system variable to respond to modifier keys such as ALT.", + "Browsers may have default behaviors attached to various key events. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." + "event": "KeyboardEvent: (Optional) optional KeyboardEvent callback argument." } }, "keyIsDown": { "description": [ - "The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally. You can put in any number representing the keyCode of the key, or use any of the variable keyCode names listed here." + "Returns true if the key it’s checking is pressed and false if not.", + "keyIsDown() is helpful when checking for multiple different key presses. For example, keyIsDown() can be used to check if both LEFT_ARROW and UP_ARROW are pressed: if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) { // Move diagonally. } ", + "keyIsDown() can check for key presses using keyCode values, as in keyIsDown(37) or keyIsDown(LEFT_ARROW). Key codes can be found on websites such as keycode.info." ], - "returns": "Boolean: whether key is down or not", + "returns": "Boolean: whether the key is down or not.", "params": { - "code": "Number: The key to check for." + "code": "Number: key to check." } }, "movedX": { "description": [ - "The variable movedX contains the horizontal movement of the mouse since the last frame" + "A Number system variable that tracks the mouse's horizontal movement.", + "movedX tracks how many pixels the mouse moves left or right between frames. movedX will have a negative value if the mouse moves left between frames and a positive value if it moves right. movedX can be calculated as mouseX - pmouseX.", + "Note: movedX continues updating even when requestPointerLock() is active." ] }, "movedY": { "description": [ - "The variable movedY contains the vertical movement of the mouse since the last frame" + "A Number system variable that tracks the mouse's vertical movement.", + "movedY tracks how many pixels the mouse moves up or down between frames. movedY will have a negative value if the mouse moves up between frames and a positive value if it moves down. movedY can be calculated as mouseY - pmouseY.", + "Note: movedY continues updating even when requestPointerLock() is active." ] }, "mouseX": { "description": [ - "The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point." + "A Number system variable that tracks the mouse's horizontal position.", + "In 2D mode, mouseX keeps track of the mouse's position relative to the top-left corner of the canvas. For example, if the mouse is 50 pixels from the left edge of the canvas, then mouseX will be 50.", + "In WebGL mode, mouseX keeps track of the mouse's position relative to the center of the canvas. For example, if the mouse is 50 pixels to the right of the canvas' center, then mouseX will be 50.", + "If touch is used instead of the mouse, then mouseX will hold the x-coordinate of the most recent touch point." ] }, "mouseY": { "description": [ - "The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point." + "A Number system variable that tracks the mouse's vertical position.", + "In 2D mode, mouseY keeps track of the mouse's position relative to the top-left corner of the canvas. For example, if the mouse is 50 pixels from the top edge of the canvas, then mouseY will be 50.", + "In WebGL mode, mouseY keeps track of the mouse's position relative to the center of the canvas. For example, if the mouse is 50 pixels below the canvas' center, then mouseY will be 50.", + "If touch is used instead of the mouse, then mouseY will hold the y-coordinate of the most recent touch point." ] }, "pmouseX": { "description": [ - "The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX value at the start of each touch event." + "A Number system variable that tracks the mouse's previous horizontal position.", + "In 2D mode, pmouseX keeps track of the mouse's position relative to the top-left corner of the canvas. Its value is mouseX from the previous frame. For example, if the mouse was 50 pixels from the left edge of the canvas during the last frame, then pmouseX will be 50.", + "In WebGL mode, pmouseX keeps track of the mouse's position relative to the center of the canvas. For example, if the mouse was 50 pixels to the right of the canvas' center during the last frame, then pmouseX will be 50.", + "If touch is used instead of the mouse, then pmouseX will hold the x-coordinate of the last touch point.", + "Note: pmouseX is reset to the current mouseX value at the start of each touch event." ] }, "pmouseY": { "description": [ - "The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY value at the start of each touch event." + "A Number system variable that tracks the mouse's previous vertical position.", + "In 2D mode, pmouseY keeps track of the mouse's position relative to the top-left corner of the canvas. Its value is mouseY from the previous frame. For example, if the mouse was 50 pixels from the top edge of the canvas during the last frame, then pmouseY will be 50.", + "In WebGL mode, pmouseY keeps track of the mouse's position relative to the center of the canvas. For example, if the mouse was 50 pixels below the canvas' center during the last frame, then pmouseY will be 50.", + "If touch is used instead of the mouse, then pmouseY will hold the y-coordinate of the last touch point.", + "Note: pmouseY is reset to the current mouseY value at the start of each touch event." ] }, "winMouseX": { "description": [ - "The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window." + "A Number variable that tracks the mouse's horizontal position within the browser.", + "winMouseX keeps track of the mouse's position relative to the top-left corner of the browser window. For example, if the mouse is 50 pixels from the left edge of the browser, then winMouseX will be 50.", + "On a touchscreen device, winMouseX will hold the x-coordinate of the most recent touch point.", + "Note: Use mouseX to track the mouse’s x-coordinate within the canvas." ] }, "winMouseY": { "description": [ - "The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window." + "A Number variable that tracks the mouse's vertical position within the browser.", + "winMouseY keeps track of the mouse's position relative to the top-left corner of the browser window. For example, if the mouse is 50 pixels from the top edge of the browser, then winMouseY will be 50.", + "On a touchscreen device, winMouseY will hold the y-coordinate of the most recent touch point.", + "Note: Use mouseY to track the mouse’s y-coordinate within the canvas." ] }, "pwinMouseX": { "description": [ - "The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event." + "A Number variable that tracks the mouse's previous horizontal position within the browser.", + "pwinMouseX keeps track of the mouse's position relative to the top-left corner of the browser window. Its value is winMouseX from the previous frame. For example, if the mouse was 50 pixels from the left edge of the browser during the last frame, then pwinMouseX will be 50.", + "On a touchscreen device, pwinMouseX will hold the x-coordinate of the most recent touch point. pwinMouseX is reset to the current winMouseX value at the start of each touch event.", + "Note: Use pmouseX to track the mouse’s previous x-coordinate within the canvas." ] }, "pwinMouseY": { "description": [ - "The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event." + "A Number variable that tracks the mouse's previous vertical position within the browser.", + "pwinMouseY keeps track of the mouse's position relative to the top-left corner of the browser window. Its value is winMouseY from the previous frame. For example, if the mouse was 50 pixels from the top edge of the browser during the last frame, then pwinMouseY will be 50.", + "On a touchscreen device, pwinMouseY will hold the y-coordinate of the most recent touch point. pwinMouseY is reset to the current winMouseY value at the start of each touch event.", + "Note: Use pmouseY to track the mouse’s previous y-coordinate within the canvas." ] }, "mouseButton": { "description": [ - "p5 automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently." + "A String system variable that contains the value of the last mouse button pressed.", + "The mouseButton variable is either LEFT, RIGHT, or CENTER, depending on which button was pressed last.", + "Note: Different browsers may track mouseButton differently. See MDN for more information." ] }, "mouseIsPressed": { "description": [ - "The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not." + "A Boolean system variable that's true if the mouse is pressed and false if not." ] }, "mouseMoved": { "description": [ - "The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + "A function that's called when the mouse moves.", + "Declaring the function mouseMoved() sets a code block to run automatically when the user moves the mouse without clicking any mouse buttons: function mouseMoved() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseMoved() is called by p5.js: function mouseMoved() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mouseMoved() is always passed a MouseEvent object with properties that describe the mouse move event: function mouseMoved(event) { // Code to run that uses the event. console.log(event); } ", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "mouseDragged": { "description": [ - "The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called when the mouse moves while a button is pressed.", + "Declaring the function mouseDragged() sets a code block to run automatically when the user clicks and drags the mouse: function mouseDragged() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseDragged() is called by p5.js: function mouseDragged() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mouseDragged() is always passed a MouseEvent object with properties that describe the mouse drag event: function mouseDragged(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mouseDragged() will run when a user moves a touch point if touchMoved() isn’t declared. If touchMoved() is declared, then touchMoved() will run when a user moves a touch point and mouseDragged() won’t.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "mousePressed": { "description": [ - "The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called once when a mouse button is pressed.", + "Declaring the function mousePressed() sets a code block to run automatically when the user presses a mouse button: function mousePressed() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mousePressed() is called by p5.js: function mousePressed() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mousePressed() is always passed a MouseEvent object with properties that describe the mouse press event: function mousePressed(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mousePressed() will run when a user’s touch begins if touchStarted() isn’t declared. If touchStarted() is declared, then touchStarted() will run when a user’s touch begins and mousePressed() won’t.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.", + "Note: mousePressed(), mouseReleased(), and mouseClicked() are all related. mousePressed() runs as soon as the user clicks the mouse. mouseReleased() runs as soon as the user releases the mouse click. mouseClicked() runs immediately after mouseReleased()." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "mouseReleased": { "description": [ - "The mouseReleased() function is called every time a mouse button is released. If no mouseReleased() function is defined, the touchEnded() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called once when a mouse button is released.", + "Declaring the function mouseReleased() sets a code block to run automatically when the user releases a mouse button after having pressed it: function mouseReleased() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseReleased() is called by p5.js: function mouseReleased() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mouseReleased() is always passed a MouseEvent object with properties that describe the mouse release event: function mouseReleased(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mouseReleased() will run when a user’s touch ends if touchEnded() isn’t declared. If touchEnded() is declared, then touchEnded() will run when a user’s touch ends and mouseReleased() won’t.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.", + "Note: mousePressed(), mouseReleased(), and mouseClicked() are all related. mousePressed() runs as soon as the user clicks the mouse. mouseReleased() runs as soon as the user releases the mouse click. mouseClicked() runs immediately after mouseReleased()." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "mouseClicked": { "description": [ - "The mouseClicked() function is called once after a mouse button has been pressed and then released. Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased(). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the function." + "A function that's called once after a mouse button is pressed and released.", + "Declaring the function mouseClicked() sets a code block to run automatically when the user releases a mouse button after having pressed it: function mouseClicked() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseClicked() is called by p5.js: function mouseClicked() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mouseClicked() is always passed a MouseEvent object with properties that describe the mouse click event: function mouseClicked(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mouseClicked() will run when a user’s touch ends if touchEnded() isn’t declared. If touchEnded() is declared, then touchEnded() will run when a user’s touch ends and mouseClicked() won’t.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.", + "Note: mousePressed(), mouseReleased(), and mouseClicked() are all related. mousePressed() runs as soon as the user clicks the mouse. mouseReleased() runs as soon as the user releases the mouse click. mouseClicked() runs immediately after mouseReleased()." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "doubleClicked": { "description": [ - "The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick" + "A function that's called once when a mouse button is clicked twice quickly.", + "Declaring the function doubleClicked() sets a code block to run automatically when the user presses and releases the mouse button twice quickly: function doubleClicked() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when doubleClicked() is called by p5.js: function doubleClicked() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. doubleClicked() is always passed a MouseEvent object with properties that describe the double-click event: function doubleClicked(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, code placed in doubleClicked() will run after two touches that occur within a short time.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function." ], "params": { - "event": "MouseEvent: (Optional) optional MouseEvent callback argument." + "event": "MouseEvent: (Optional) optional MouseEvent argument." } }, "mouseWheel": { "description": [ - "The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad. The event.delta property returns the amount the mouse wheel have scrolled. The values can be positive or negative depending on the scroll direction (on macOS with \"natural\" scrolling enabled, the signs are inverted). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method. Due to the current support of the \"wheel\" event on Safari, the function may only work as expected if \"return false\" is included while using Safari." + "A function that's called once when the mouse wheel moves.", + "Declaring the function mouseWheel() sets a code block to run automatically when the user scrolls with the mouse wheel: function mouseWheel() { // Code to run. } ", + "The mouse system variables, such as mouseX and mouseY, will be updated with their most recent value when mouseWheel() is called by p5.js: function mouseWheel() { if (mouseX < 50) { // Code to run if the mouse is on the left. }", + "if (mouseY > 50) { // Code to run if the mouse is near the bottom. } } ", + "The parameter, event, is optional. mouseWheel() is always passed a MouseEvent object with properties that describe the mouse scroll event: function mouseWheel(event) { // Code to run that uses the event. console.log(event); } ", + "The event object has many properties including delta, a Number containing the distance that the user scrolled. For example, event.delta might have the value 5 when the user scrolls up. event.delta is positive if the user scrolls up and negative if they scroll down. The signs are opposite on macOS with \"natural\" scrolling enabled.", + "Browsers may have default behaviors attached to various mouse events. For example, some browsers highlight text when the user moves the mouse while pressing a mouse button. To prevent any default behavior for this event, add return false; to the end of the function.", + "Note: On Safari, mouseWheel() may only work as expected if return false; is added at the end of the function." ], "params": { - "event": "WheelEvent: (Optional) optional WheelEvent callback argument." + "event": "WheelEvent: (Optional) optional WheelEvent argument." } }, "requestPointerLock": { "description": [ - "The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience." + "Locks the mouse pointer to its current position and makes it invisible.", + "requestPointerLock() allows the mouse to move forever without leaving the screen. Calling requestPointerLock() locks the values of mouseX, mouseY, pmouseX, and pmouseY. movedX and movedY continue updating and can be used to get the distance the mouse moved since the last frame was drawn. Calling exitPointerLock() resumes updating the mouse system variables.", + "Note: Most browsers require an input, such as a click, before calling requestPointerLock(). It’s recommended to call requestPointerLock() in an event function such as doubleClicked()." ] }, "exitPointerLock": { "description": [ - "The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc" + "Exits a pointer lock started with requestPointerLock.", + "Calling requestPointerLock() locks the values of mouseX, mouseY, pmouseX, and pmouseY. Calling exitPointerLock() resumes updating the mouse system variables.", + "Note: Most browsers require an input, such as a click, before calling requestPointerLock(). It’s recommended to call requestPointerLock() in an event function such as doubleClicked()." ] }, "touches": { "description": [ - "The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties.", - "The touches[] array is not supported on Safari and IE on touch-based desktops (laptops)." + "An Array of all the current touch points on a touchscreen device.", + "The touches array is empty by default. When the user touches their screen, a new touch point is tracked and added to the array. Touch points are Objects with the following properties: // Iterate over the touches array. for (let touch of touches) { // x-coordinate relative to the top-left // corner of the canvas. console.log(touch.x);", + "// y-coordinate relative to the top-left // corner of the canvas. console.log(touch.y);", + "// x-coordinate relative to the top-left // corner of the browser. console.log(touch.winX);", + "// y-coordinate relative to the top-left // corner of the browser. console.log(touch.winY);", + "// ID number console.log(touch.id); } " ] }, "touchStarted": { "description": [ - "The touchStarted() function is called once after every time a touch is registered. If no touchStarted() function is defined, the mousePressed() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + "A function that's called once each time the user touches the screen.", + "Declaring a function called touchStarted() sets a code block to run automatically each time the user begins touching a touchscreen device: function touchStarted() { // Code to run. } ", + "The touches array will be updated with the most recent touch points when touchStarted() is called by p5.js: function touchStarted() { // Paint over the background. background(200);", + "// Mark each touch point once with a circle. for (let touch of touches) { circle(touch.x, touch.y, 40); } } ", + "The parameter, event, is optional. touchStarted() will be passed a TouchEvent object with properties that describe the touch event: function touchStarted(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mousePressed() will run when a user’s touch starts if touchStarted() isn’t declared. If touchStarted() is declared, then touchStarted() will run when a user’s touch starts and mousePressed() won’t.", + "Note: touchStarted(), touchEnded(), and touchMoved() are all related. touchStarted() runs as soon as the user touches a touchscreen device. touchEnded() runs as soon as the user ends a touch. touchMoved() runs repeatedly as the user moves any touch points." ], "params": { - "event": "TouchEvent: (Optional) optional TouchEvent callback argument." + "event": "TouchEvent: (Optional) optional TouchEvent argument." } }, "touchMoved": { "description": [ - "The touchMoved() function is called every time a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + "A function that's called when the user touches the screen and moves.", + "Declaring the function touchMoved() sets a code block to run automatically when the user touches a touchscreen device and moves: function touchMoved() { // Code to run. } ", + "The touches array will be updated with the most recent touch points when touchMoved() is called by p5.js: function touchMoved() { // Paint over the background. background(200);", + "// Mark each touch point while the user moves. for (let touch of touches) { circle(touch.x, touch.y, 40); } } ", + "The parameter, event, is optional. touchMoved() will be passed a TouchEvent object with properties that describe the touch event: function touchMoved(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mouseDragged() will run when the user’s touch points move if touchMoved() isn’t declared. If touchMoved() is declared, then touchMoved() will run when a user’s touch points move and mouseDragged() won’t.", + "Note: touchStarted(), touchEnded(), and touchMoved() are all related. touchStarted() runs as soon as the user touches a touchscreen device. touchEnded() runs as soon as the user ends a touch. touchMoved() runs repeatedly as the user moves any touch points." ], "params": { - "event": "TouchEvent: (Optional) optional TouchEvent callback argument." + "event": "TouchEvent: (Optional) optional TouchEvent argument." } }, "touchEnded": { "description": [ - "The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + "A function that's called once each time a screen touch ends.", + "Declaring the function touchEnded() sets a code block to run automatically when the user stops touching a touchscreen device: function touchEnded() { // Code to run. } ", + "The touches array will be updated with the most recent touch points when touchEnded() is called by p5.js: function touchEnded() { // Paint over the background. background(200);", + "// Mark each remaining touch point when the user stops // a touch. for (let touch of touches) { circle(touch.x, touch.y, 40); } } ", + "The parameter, event, is optional. touchEnded() will be passed a TouchEvent object with properties that describe the touch event: function touchEnded(event) { // Code to run that uses the event. console.log(event); } ", + "On touchscreen devices, mouseReleased() will run when the user’s touch ends if touchEnded() isn’t declared. If touchEnded() is declared, then touchEnded() will run when a user’s touch ends and mouseReleased() won’t.", + "Note: touchStarted(), touchEnded(), and touchMoved() are all related. touchStarted() runs as soon as the user touches a touchscreen device. touchEnded() runs as soon as the user ends a touch. touchMoved() runs repeatedly as the user moves any touch points." ], "params": { - "event": "TouchEvent: (Optional) optional TouchEvent callback argument." + "event": "TouchEvent: (Optional) optional TouchEvent argument." } }, "createImage": { @@ -3291,6 +3604,15 @@ "n": "String|Boolean|Number|Array: value to parse" } }, + "boolean": { + "description": [ + "Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value \"true\" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned." + ], + "returns": "Boolean: boolean representation of value", + "params": { + "n": "String|Boolean|Number|Array: value to parse" + } + }, "byte": { "description": [ "Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned." @@ -3507,248 +3829,324 @@ }, "beginGeometry": { "description": [ - "Starts creating a new p5.Geometry. Subsequent shapes drawn will be added to the geometry and then returned when endGeometry() is called. One can also use buildGeometry() to pass a function that draws shapes.", - "If you need to draw complex shapes every frame which don't change over time, combining them upfront with beginGeometry() and endGeometry() and then drawing that will run faster than repeatedly drawing the individual pieces." + "Begins adding shapes to a new p5.Geometry object.", + "The beginGeometry() and endGeometry() functions help with creating complex 3D shapes from simpler ones such as sphere(). beginGeometry() begins adding shapes to a custom p5.Geometry object and endGeometry() stops adding them.", + "beginGeometry() and endGeometry() can help to make sketches more performant. For example, if a complex 3D shape doesn’t change while a sketch runs, then it can be created with beginGeometry() and endGeometry(). Creating a p5.Geometry object once and then drawing it will run faster than repeatedly drawing the individual pieces.", + "See buildGeometry() for another way to build 3D shapes.", + "Note: beginGeometry() can only be used in WebGL mode." ] }, "endGeometry": { "description": [ - "Finishes creating a new p5.Geometry that was started using beginGeometry(). One can also use buildGeometry() to pass a function that draws shapes." + "Stops adding shapes to a new p5.Geometry object and returns the object.", + "The beginGeometry() and endGeometry() functions help with creating complex 3D shapes from simpler ones such as sphere(). beginGeometry() begins adding shapes to a custom p5.Geometry object and endGeometry() stops adding them.", + "beginGeometry() and endGeometry() can help to make sketches more performant. For example, if a complex 3D shape doesn’t change while a sketch runs, then it can be created with beginGeometry() and endGeometry(). Creating a p5.Geometry object once and then drawing it will run faster than repeatedly drawing the individual pieces.", + "See buildGeometry() for another way to build 3D shapes.", + "Note: endGeometry() can only be used in WebGL mode." ], - "returns": "p5.Geometry: The model that was built." + "returns": "p5.Geometry: new 3D shape." }, "buildGeometry": { "description": [ - "Creates a new p5.Geometry that contains all the shapes drawn in a provided callback function. The returned combined shape can then be drawn all at once using model().", - "If you need to draw complex shapes every frame which don't change over time, combining them with buildGeometry() once and then drawing that will run faster than repeatedly drawing the individual pieces.", - "One can also draw shapes directly between beginGeometry() and endGeometry() instead of using a callback function." + "Creates a custom p5.Geometry object from simpler 3D shapes.", + "buildGeometry() helps with creating complex 3D shapes from simpler ones such as sphere(). It can help to make sketches more performant. For example, if a complex 3D shape doesn’t change while a sketch runs, then it can be created with buildGeometry(). Creating a p5.Geometry object once and then drawing it will run faster than repeatedly drawing the individual pieces.", + "The parameter, callback, is a function with the drawing instructions for the new p5.Geometry object. It will be called once to create the new 3D shape.", + "See beginGeometry() and endGeometry() for another way to build 3D shapes.", + "Note: buildGeometry() can only be used in WebGL mode." ], - "returns": "p5.Geometry: The model that was built from the callback function.", + "returns": "p5.Geometry: new 3D shape.", "params": { - "callback": "Function: A function that draws shapes." + "callback": "Function: function that draws the shape." } }, "freeGeometry": { "description": [ - "Clears the resources of a model to free up browser memory. A model whose resources have been cleared can still be drawn, but the first time it is drawn again, it might take longer.", - "This method works on models generated with buildGeometry() as well as those loaded from loadModel()." + "Clears a p5.Geometry object from the graphics processing unit (GPU) memory.", + "p5.Geometry objects can contain lots of data about their vertices, surface normals, colors, and so on. Complex 3D shapes can use lots of memory which is a limited resource in many GPUs. Calling freeGeometry() can improve performance by freeing a p5.Geometry object’s resources from GPU memory. freeGeometry() works with p5.Geometry objects created with beginGeometry() and endGeometry(), buildGeometry(), and loadModel().", + "The parameter, geometry, is the p5.Geometry object to be freed.", + "Note: A p5.Geometry object can still be drawn after its resources are cleared from GPU memory. It may take longer to draw the first time it’s redrawn.", + "Note: freeGeometry() can only be used in WebGL mode." ], "params": { - "geometry": "p5.Geometry: The geometry whose resources should be freed" + "geometry": "p5.Geometry: 3D shape whose resources should be freed." } }, "plane": { "description": [ - "Draw a plane with given a width and height" + "Draws a plane.", + "A plane is a four-sided, flat shape with every angle measuring 90˚. It’s similar to a rectangle and offers advanced drawing features in WebGL mode.", + "The first parameter, width, is optional. If a Number is passed, as in plane(20), it sets the plane’s width and height. By default, width is 50.", + "The second parameter, height, is also optional. If a Number is passed, as in plane(20, 30), it sets the plane’s height. By default, height is set to the plane’s width.", + "The third parameter, detailX, is also optional. If a Number is passed, as in plane(20, 30, 5) it sets the number of triangle subdivisions to use along the x-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailX is 1.", + "The fourth parameter, detailY, is also optional. If a Number is passed, as in plane(20, 30, 5, 7) it sets the number of triangle subdivisions to use along the y-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 1.", + "Note: plane() can only be used in WebGL mode." ], "params": { - "width": "Number: (Optional) width of the plane", - "height": "Number: (Optional) height of the plane", - "detailX": "Integer: (Optional) Optional number of triangle subdivisions in x-dimension", - "detailY": "Integer: (Optional) Optional number of triangle subdivisions in y-dimension" + "width": "Number: (Optional) width of the plane.", + "height": "Number: (Optional) height of the plane.", + "detailX": "Integer: (Optional) number of triangle subdivisions along the x-axis.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis." } }, "box": { "description": [ - "Draw a box with given width, height and depth" + "Draws a box (rectangular prism).", + "A box is a 3D shape with six faces. Each face makes a 90˚ with four neighboring faces.", + "The first parameter, width, is optional. If a Number is passed, as in box(20), it sets the box’s width and height. By default, width is 50.", + "The second parameter, height, is also optional. If a Number is passed, as in box(20, 30), it sets the box’s height. By default, height is set to the box’s width.", + "The third parameter, depth, is also optional. If a Number is passed, as in box(20, 30, 40), it sets the box’s depth. By default, depth is set to the box’s height.", + "The fourth parameter, detailX, is also optional. If a Number is passed, as in box(20, 30, 40, 5), it sets the number of triangle subdivisions to use along the x-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailX is 1.", + "The fifth parameter, detailY, is also optional. If a number is passed, as in box(20, 30, 40, 5, 7), it sets the number of triangle subdivisions to use along the y-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 1.", + "Note: box() can only be used in WebGL mode." ], "params": { - "width": "Number: (Optional) width of the box", - "height": "Number: (Optional) height of the box", - "depth": "Number: (Optional) depth of the box", - "detailX": "Integer: (Optional) Optional number of triangle subdivisions in x-dimension", - "detailY": "Integer: (Optional) Optional number of triangle subdivisions in y-dimension" + "width": "Number: (Optional) width of the box.", + "height": "Number: (Optional) height of the box.", + "depth": "Number: (Optional) depth of the box.", + "detailX": "Integer: (Optional) number of triangle subdivisions along the x-axis.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis." } }, "sphere": { "description": [ - "Draw a sphere with given radius.", - "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser." + "Draws a sphere.", + "A sphere is a 3D shape with triangular faces that connect to form a round surface. Spheres with few faces look like crystals. Spheres with many faces have smooth surfaces and look like balls.", + "The first parameter, radius, is optional. If a Number is passed, as in sphere(20), it sets the radius of the sphere. By default, radius is 50.", + "The second parameter, detailX, is also optional. If a Number is passed, as in sphere(20, 5), it sets the number of triangle subdivisions to use along the x-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailX is 24.", + "The third parameter, detailY, is also optional. If a Number is passed, as in sphere(20, 5, 2), it sets the number of triangle subdivisions to use along the y-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 16.", + "Note: sphere() can only be used in WebGL mode." ], "params": { - "radius": "Number: (Optional) radius of circle", - "detailX": "Integer: (Optional) optional number of subdivisions in x-dimension", - "detailY": "Integer: (Optional) optional number of subdivisions in y-dimension" + "radius": "Number: (Optional) radius of the sphere. Defaults to 50.", + "detailX": "Integer: (Optional) number of triangle subdivisions along the x-axis. Defaults to 24.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis. Defaults to 16." } }, "cylinder": { "description": [ - "Draw a cylinder with given radius and height", - "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." + "Draws a cylinder.", + "A cylinder is a 3D shape with triangular faces that connect a flat bottom to a flat top. Cylinders with few faces look like boxes. Cylinders with many faces have smooth surfaces.", + "The first parameter, radius, is optional. If a Number is passed, as in cylinder(20), it sets the radius of the cylinder’s base. By default, radius is 50.", + "The second parameter, height, is also optional. If a Number is passed, as in cylinder(20, 30), it sets the cylinder’s height. By default, height is set to the cylinder’s radius.", + "The third parameter, detailX, is also optional. If a Number is passed, as in cylinder(20, 30, 5), it sets the number of edges used to form the cylinder's top and bottom. Using more edges makes the top and bottom look more like circles. By default, detailX is 24.", + "The fourth parameter, detailY, is also optional. If a Number is passed, as in cylinder(20, 30, 5, 2), it sets the number of triangle subdivisions to use along the y-axis, between cylinder's the top and bottom. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 1.", + "The fifth parameter, bottomCap, is also optional. If a false is passed, as in cylinder(20, 30, 5, 2, false) the cylinder’s bottom won’t be drawn. By default, bottomCap is true.", + "The sixth parameter, topCap, is also optional. If a false is passed, as in cylinder(20, 30, 5, 2, false, false) the cylinder’s top won’t be drawn. By default, topCap is true.", + "Note: cylinder() can only be used in WebGL mode." ], "params": { - "radius": "Number: (Optional) radius of the surface", - "height": "Number: (Optional) height of the cylinder", - "detailX": "Integer: (Optional) number of subdivisions in x-dimension; default is 24", - "detailY": "Integer: (Optional) number of subdivisions in y-dimension; default is 1", - "bottomCap": "Boolean: (Optional) whether to draw the bottom of the cylinder", - "topCap": "Boolean: (Optional) whether to draw the top of the cylinder" + "radius": "Number: (Optional) radius of the cylinder. Defaults to 50.", + "height": "Number: (Optional) height of the cylinder. Defaults to the value of radius.", + "detailX": "Integer: (Optional) number of edges along the top and bottom. Defaults to 24.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis. Defaults to 1.", + "bottomCap": "Boolean: (Optional) whether to draw the cylinder's bottom. Defaults to true.", + "topCap": "Boolean: (Optional) whether to draw the cylinder's top. Defaults to true." } }, "cone": { "description": [ - "Draw a cone with given radius and height", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." + "Draws a cone.", + "A cone is a 3D shape with triangular faces that connect a flat bottom to a single point. Cones with few faces look like pyramids. Cones with many faces have smooth surfaces.", + "The first parameter, radius, is optional. If a Number is passed, as in cone(20), it sets the radius of the cone’s base. By default, radius is 50.", + "The second parameter, height, is also optional. If a Number is passed, as in cone(20, 30), it sets the cone’s height. By default, height is set to the cone’s radius.", + "The third parameter, detailX, is also optional. If a Number is passed, as in cone(20, 30, 5), it sets the number of edges used to form the cone's base. Using more edges makes the base look more like a circle. By default, detailX is 24.", + "The fourth parameter, detailY, is also optional. If a Number is passed, as in cone(20, 30, 5, 7), it sets the number of triangle subdivisions to use along the y-axis connecting the base to the tip. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 1.", + "The fifth parameter, cap, is also optional. If a false is passed, as in cone(20, 30, 5, 7, false) the cone’s base won’t be drawn. By default, cap is true.", + "Note: cone() can only be used in WebGL mode." ], "params": { - "radius": "Number: (Optional) radius of the bottom surface", - "height": "Number: (Optional) height of the cone", - "detailX": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 24", - "detailY": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 1", - "cap": "Boolean: (Optional) whether to draw the base of the cone" + "radius": "Number: (Optional) radius of the cone's base. Defaults to 50.", + "height": "Number: (Optional) height of the cone. Defaults to the value of radius.", + "detailX": "Integer: (Optional) number of edges used to draw the base. Defaults to 24.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis. Defaults to 1.", + "cap": "Boolean: (Optional) whether to draw the cone's base. Defaults to true." } }, "ellipsoid": { "description": [ - "Draw an ellipsoid with given radius", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser." + "Draws an ellipsoid.", + "An ellipsoid is a 3D shape with triangular faces that connect to form a round surface. Ellipsoids with few faces look like crystals. Ellipsoids with many faces have smooth surfaces and look like eggs. ellipsoid() defines a shape by its radii. This is different from ellipse() which uses diameters (width and height).", + "The first parameter, radiusX, is optional. If a Number is passed, as in ellipsoid(20), it sets the radius of the ellipsoid along the x-axis. By default, radiusX is 50.", + "The second parameter, radiusY, is also optional. If a Number is passed, as in ellipsoid(20, 30), it sets the ellipsoid’s radius along the y-axis. By default, radiusY is set to the ellipsoid’s radiusX.", + "The third parameter, radiusZ, is also optional. If a Number is passed, as in ellipsoid(20, 30, 40), it sets the ellipsoid’s radius along the z-axis. By default, radiusZ is set to the ellipsoid’s radiusY.", + "The fourth parameter, detailX, is also optional. If a Number is passed, as in ellipsoid(20, 30, 40, 5), it sets the number of triangle subdivisions to use along the x-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailX is 24.", + "The fifth parameter, detailY, is also optional. If a Number is passed, as in ellipsoid(20, 30, 40, 5, 7), it sets the number of triangle subdivisions to use along the y-axis. All 3D shapes are made by connecting triangles to form their surfaces. By default, detailY is 16.", + "Note: ellipsoid() can only be used in WebGL mode." ], "params": { - "radiusx": "Number: (Optional) x-radius of ellipsoid", - "radiusy": "Number: (Optional) y-radius of ellipsoid", - "radiusz": "Number: (Optional) z-radius of ellipsoid", - "detailX": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 24. Avoid detail number above 150, it may crash the browser.", - "detailY": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 16. Avoid detail number above 150, it may crash the browser." + "radiusX": "Number: (Optional) radius of the ellipsoid along the x-axis. Defaults to 50.", + "radiusY": "Number: (Optional) radius of the ellipsoid along the y-axis. Defaults to radiusX.", + "radiusZ": "Number: (Optional) radius of the ellipsoid along the z-axis. Defaults to radiusY.", + "detailX": "Integer: (Optional) number of triangle subdivisions along the x-axis. Defaults to 24.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis. Defaults to 16." } }, "torus": { "description": [ - "Draw a torus with given radius and tube radius", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus." + "Draws a torus.", + "A torus is a 3D shape with triangular faces that connect to form a ring. Toruses with few faces look flattened. Toruses with many faces have smooth surfaces.", + "The first parameter, radius, is optional. If a Number is passed, as in torus(30), it sets the radius of the ring. By default, radius is 50.", + "The second parameter, tubeRadius, is also optional. If a Number is passed, as in torus(30, 15), it sets the radius of the tube. By default, tubeRadius is 10.", + "The third parameter, detailX, is also optional. If a Number is passed, as in torus(30, 15, 5), it sets the number of edges used to draw the hole of the torus. Using more edges makes the hole look more like a circle. By default, detailX is 24.", + "The fourth parameter, detailY, is also optional. If a Number is passed, as in torus(30, 15, 5, 7), it sets the number of triangle subdivisions to use while filling in the torus’ height. By default, detailY is 16.", + "Note: torus() can only be used in WebGL mode." ], "params": { - "radius": "Number: (Optional) radius of the whole ring", - "tubeRadius": "Number: (Optional) radius of the tube", - "detailX": "Integer: (Optional) number of segments in x-dimension, the more segments the smoother geometry default is 24", - "detailY": "Integer: (Optional) number of segments in y-dimension, the more segments the smoother geometry default is 16" + "radius": "Number: (Optional) radius of the torus. Defaults to 50.", + "tubeRadius": "Number: (Optional) radius of the tube. Defaults to 10.", + "detailX": "Integer: (Optional) number of edges that form the hole. Defaults to 24.", + "detailY": "Integer: (Optional) number of triangle subdivisions along the y-axis. Defaults to 16." } }, "orbitControl": { "description": [ - "Allows movement around a 3D sketch using a mouse or trackpad or touch. Left-clicking and dragging or swipe motion will rotate the camera position about the center of the sketch, right-clicking and dragging or multi-swipe will pan the camera position without rotation, and using the mouse wheel (scrolling) or pinch in/out will move the camera further or closer from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse/touch movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity." + "Allows the user to orbit around a 3D sketch using a mouse, trackpad, or touchscreen.", + "3D sketches are viewed through an imaginary camera. Calling orbitControl() within the draw() function allows the user to change the camera’s position: function draw() { background(200);", + "// Enable orbiting with the mouse. orbitControl();", + "// Rest of sketch. } ", + "Left-clicking and dragging or swipe motion will rotate the camera position about the center of the sketch. Right-clicking and dragging or multi-swipe will pan the camera position without rotation. Using the mouse wheel (scrolling) or pinch in/out will move the camera further or closer from the center of the sketch.", + "The first three parameters, sensitivityX, sensitivityY, and sensitivityZ, are optional. They’re numbers that set the sketch’s sensitivity to movement along each axis. For example, calling orbitControl(1, 2, -1) keeps movement along the x-axis at its default value, makes the sketch twice as sensitive to movement along the y-axis, and reverses motion along the z-axis. By default, all sensitivity values are 1.", + "The fourth parameter, options, is also optional. It’s an object that changes the behavior of orbiting. For example, calling orbitControl(1, 1, 1, options) keeps the default sensitivity values while changing the behaviors set with options. The object can have the following properties: let options = { // Setting this to false makes mobile interactions smoother by // preventing accidental interactions with the page while orbiting. // By default, it's true. disableTouchActions: true,", + "// Setting this to true makes the camera always rotate in the // direction the mouse/touch is moving. // By default, it's false. freeRotation: false };", + "orbitControl(1, 1, 1, options); " ], "params": { - "sensitivityX": "Number: (Optional) sensitivity to mouse movement along X axis", - "sensitivityY": "Number: (Optional) sensitivity to mouse movement along Y axis", - "sensitivityZ": "Number: (Optional) sensitivity to scroll movement along Z axis", - "options": "Object: (Optional) An optional object that can contain additional settings, disableTouchActions - Boolean, default value is true. Setting this to true makes mobile interactions smoother by preventing accidental interactions with the page while orbiting. But if you're already doing it via css or want the default touch actions, consider setting it to false. freeRotation - Boolean, default value is false. By default, horizontal movement of the mouse or touch pointer rotates the camera around the y-axis, and vertical movement rotates the camera around the x-axis. But if setting this option to true, the camera always rotates in the direction the pointer is moving. For zoom and move, the behavior is the same regardless of true/false." + "sensitivityX": "Number: (Optional) sensitivity to movement along the x-axis. Defaults to 1.", + "sensitivityY": "Number: (Optional) sensitivity to movement along the y-axis. Defaults to 1.", + "sensitivityZ": "Number: (Optional) sensitivity to movement along the z-axis. Defaults to 1.", + "options": "Object: (Optional) object with two optional properties, disableTouchActions and freeRotation. Both are Booleans. disableTouchActions defaults to true and freeRotation defaults to false." } }, "debugMode": { "description": [ - "debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop.", - "By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid." + "Adds a grid and an axes icon to clarify orientation in 3D sketches.", + "debugMode() adds a grid that shows where the “ground” is in a sketch. By default, the grid will run through the origin (0, 0, 0) of the sketch along the XZ plane. debugMode() also adds an axes icon that points along the positive x-, y-, and z-axes. Calling debugMode() displays the grid and axes icon with their default size and position.", + "There are four ways to call debugMode() with optional parameters to customize the debugging environment.", + "The first way to call debugMode() has one parameter, mode. If the system constant GRID is passed, as in debugMode(GRID), then the grid will be displayed and the axes icon will be hidden. If the constant AXES is passed, as in debugMode(AXES), then the axes icon will be displayed and the grid will be hidden.", + "The second way to call debugMode() has six parameters. The first parameter, mode, selects either GRID or AXES to be displayed. The next five parameters, gridSize, gridDivisions, xOff, yOff, and zOff are optional. They’re numbers that set the appearance of the grid (gridSize and gridDivisions) and the placement of the axes icon (xOff, yOff, and zOff). For example, calling debugMode(20, 5, 10, 10, 10) sets the gridSize to 20 pixels, the number of gridDivisions to 5, and offsets the axes icon by 10 pixels along the x-, y-, and z-axes.", + "The third way to call debugMode() has five parameters. The first parameter, mode, selects either GRID or AXES to be displayed. The next four parameters, axesSize, xOff, yOff, and zOff are optional. They’re numbers that set the appearance of the size of the axes icon (axesSize) and its placement (xOff, yOff, and zOff).", + "The fourth way to call debugMode() has nine optional parameters. The first five parameters, gridSize, gridDivisions, gridXOff, gridYOff, and gridZOff are numbers that set the appearance of the grid. For example, calling debugMode(100, 5, 0, 0, 0) sets the gridSize to 100, the number of gridDivisions to 5, and sets all the offsets to 0 so that the grid is centered at the origin. The next four parameters, axesSize, xOff, yOff, and zOff are numbers that set the appearance of the size of the axes icon (axesSize) and its placement (axesXOff, axesYOff, and axesZOff). For example, calling debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10) sets the gridSize to 100, the number of gridDivisions to 5, and sets all the offsets to 0 so that the grid is centered at the origin. It then sets the axesSize to 50 and offsets the icon 10 pixels along each axis." ], "params": { "mode": "Constant: either GRID or AXES", - "gridSize": "Number: (Optional) size of one side of the grid", - "gridDivisions": "Number: (Optional) number of divisions in the grid", - "xOff": "Number: (Optional) X axis offset from origin (0,0,0)", - "yOff": "Number: (Optional) Y axis offset from origin (0,0,0)", - "zOff": "Number: (Optional) Z axis offset from origin (0,0,0)", - "axesSize": "Number: (Optional) size of axes icon", - "gridXOff": "Number (Optional)", - "gridYOff": "Number (Optional)", - "gridZOff": "Number (Optional)", - "axesXOff": "Number (Optional)", - "axesYOff": "Number (Optional)", - "axesZOff": "Number (Optional)" + "gridSize": "Number: (Optional) side length of the grid.", + "gridDivisions": "Number: (Optional) number of divisions in the grid.", + "xOff": "Number: (Optional) offset from origin along the x-axis.", + "yOff": "Number: (Optional) offset from origin along the y-axis.", + "zOff": "Number: (Optional) offset from origin along the z-axis.", + "axesSize": "Number: (Optional) length of axes icon markers.", + "gridXOff": "Number: (Optional) grid offset from the origin along the x-axis.", + "gridYOff": "Number: (Optional) grid offset from the origin along the y-axis.", + "gridZOff": "Number: (Optional) grid offset from the origin along the z-axis.", + "axesXOff": "Number: (Optional) axes icon offset from the origin along the x-axis.", + "axesYOff": "Number: (Optional) axes icon offset from the origin along the y-axis.", + "axesZOff": "Number: (Optional) axes icon offset from the origin along the z-axis." } }, "noDebugMode": { "description": [ - "Turns off debugMode() in a 3D sketch." + "Turns off debugMode() in a 3D sketch." ] }, "ambientLight": { "description": [ - "Creates an ambient light with the given color.", - "Ambient light does not come from a specific direction. Objects are evenly lit from all sides. Ambient lights are almost always used in combination with other types of lights.", - "Note: lights need to be called (whether directly or indirectly) within draw() to remain persistent in a looping program. Placing them in setup() will cause them to only have an effect the first time through the loop." + "Creates a light that shines from all directions.", + "Ambient light does not come from one direction. Instead, 3D shapes are lit evenly from all sides. Ambient lights are almost always used in combination with other types of lights.", + "There are three ways to call ambientLight() with optional parameters to set the light’s color.", + "The first way to call ambientLight() has two parameters, gray and alpha. alpha is optional. Grayscale and alpha values between 0 and 255 can be passed to set the ambient light’s color, as in ambientLight(50) or ambientLight(50, 30).", + "The second way to call ambientLight() has one parameter, color. A p5.Color object, an array of color values, or a CSS color string, as in ambientLight('magenta'), can be passed to set the ambient light’s color.", + "The third way to call ambientLight() has four parameters, v1, v2, v3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be passed to set the ambient light’s colors, as in ambientLight(255, 0, 0) or ambientLight(255, 0, 0, 30). Color values will be interpreted using the current colorMode()." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)", - "gray": "Number: number specifying value between white and black", - "value": "String: a color string", - "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", - "color": "p5.Color: color as a p5.Color" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "alpha": "Number: (Optional) alpha (transparency) value in the current colorMode().", + "gray": "Number: grayscale value between 0 and 255.", + "value": "String: color as a CSS string.", + "values": "Number[]: color as an array of RGBA, HSBA, or HSLA values.", + "color": "p5.Color: color as a p5.Color object." } }, "specularColor": { "description": [ - "Sets the color of the specular highlight of a non-ambient light (i.e. all lights except ambientLight()).", - "specularColor() affects only the lights which are created after it in the code.", - "This function is used in combination with specularMaterial(). If a geometry does not use specularMaterial(), this function will have no effect.", - "The default color is white (255, 255, 255), which is used if specularColor() is not explicitly called.", - "Note: specularColor is equivalent to the Processing function lightSpecular." + "Sets the specular color for lights.", + "specularColor() affects lights that bounce off a surface in a preferred direction. These lights include directionalLight(), pointLight(), and spotLight(). The function helps to create highlights on p5.Geometry objects that are styled with specularMaterial(). If a geometry does not use specularMaterial(), then specularColor() will have no effect.", + "Note: specularColor() doesn’t affect lights that bounce in all directions, including ambientLight() and imageLight().", + "There are three ways to call specularColor() with optional parameters to set the specular highlight color.", + "The first way to call specularColor() has two optional parameters, gray and alpha. Grayscale and alpha values between 0 and 255, as in specularColor(50) or specularColor(50, 80), can be passed to set the specular highlight color.", + "The second way to call specularColor() has one optional parameter, color. A p5.Color object, an array of color values, or a CSS color string can be passed to set the specular highlight color.", + "The third way to call specularColor() has four optional parameters, v1, v2, v3, and alpha. RGBA, HSBA, or HSLA values, as in specularColor(255, 0, 0, 80), can be passed to set the specular highlight color. Color values will be interpreted using the current colorMode()." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "gray": "Number: number specifying value between white and black", - "value": "String: color as a CSS string", - "values": "Number[]: color as an array containing the red, green, and blue components", - "color": "p5.Color: color as a p5.Color" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "gray": "Number: grayscale value between 0 and 255.", + "value": "String: color as a CSS string.", + "values": "Number[]: color as an array of RGBA, HSBA, or HSLA values.", + "color": "p5.Color: color as a p5.Color object." } }, "directionalLight": { "description": [ - "Creates a directional light with the given color and direction.", - "Directional light comes from one direction. The direction is specified as numbers inclusively between -1 and 1. For example, setting the direction as (0, -1, 0) will cause the geometry to be lit from below (since the light will be facing directly upwards). Similarly, setting the direction as (1, 0, 0) will cause the geometry to be lit from the left (since the light will be facing directly rightwards).", - "Directional lights do not have a specific point of origin, and therefore cannot be positioned closer or farther away from a geometry.", - "A maximum of 5 directional lights can be active at once.", - "Note: lights need to be called (whether directly or indirectly) within draw() to remain persistent in a looping program. Placing them in setup() will cause them to only have an effect the first time through the loop." + "Creates a light that shines in one direction.", + "Directional lights don’t shine from a specific point. They’re like a sun that shines from somewhere offscreen. The light’s direction is set using three (x, y, z) values between -1 and 1. For example, setting a light’s direction as (1, 0, 0) will light p5.Geometry objects from the left since the light faces directly to the right.", + "There are four ways to call directionalLight() with parameters to set the light’s color and direction.", + "The first way to call directionalLight() has six parameters. The first three parameters, v1, v2, and v3, set the light’s color using the current colorMode(). The last three parameters, x, y, and z, set the light’s direction. For example, directionalLight(255, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light that shines to the right (1, 0, 0).", + "The second way to call directionalLight() has four parameters. The first three parameters, v1, v2, and v3, set the light’s color using the current colorMode(). The last parameter, direction sets the light’s direction using a p5.Geometry object. For example, directionalLight(255, 0, 0, lightDir) creates a red (255, 0, 0) light that shines in the direction the lightDir vector points.", + "The third way to call directionalLight() has four parameters. The first parameter, color, sets the light’s color using a p5.Color object or an array of color values. The last three parameters, x, y, and z, set the light’s direction. For example, directionalLight(myColor, 1, 0, 0) creates a light that shines to the right (1, 0, 0) with the color value of myColor.", + "The fourth way to call directionalLight() has two parameters. The first parameter, color, sets the light’s color using a p5.Color object or an array of color values. The second parameter, direction, sets the light’s direction using a p5.Color object. For example, directionalLight(myColor, lightDir) creates a light that shines in the direction the lightDir vector points with the color value of myColor." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "x": "Number: x component of direction (inclusive range of -1 to 1)", - "y": "Number: y component of direction (inclusive range of -1 to 1)", - "z": "Number: z component of direction (inclusive range of -1 to 1)", - "direction": "p5.Vector: direction of light as a p5.Vector", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "x": "Number: x-component of the light's direction between -1 and 1.", + "y": "Number: y-component of the light's direction between -1 and 1.", + "z": "Number: z-component of the light's direction between -1 and 1.", + "direction": "p5.Vector: direction of the light as a p5.Vector object.", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or as a CSS string." } }, "pointLight": { "description": [ - "Creates a point light with the given color and position.", - "A point light emits light from a single point in all directions. Because the light is emitted from a specific point (position), it has a different effect when it is positioned farther vs. nearer an object.", - "A maximum of 5 point lights can be active at once.", - "Note: lights need to be called (whether directly or indirectly) within draw() to remain persistent in a looping program. Placing them in setup() will cause them to only have an effect the first time through the loop." + "Creates a light that shines from a point in all directions.", + "Point lights are like light bulbs that shine in all directions. They can be placed at different positions to achieve different lighting effects. A maximum of 5 point lights can be active at once.", + "There are four ways to call pointLight() with parameters to set the light’s color and position.", + "The first way to call pointLight() has six parameters. The first three parameters, v1, v2, and v3, set the light’s color using the current colorMode(). The last three parameters, x, y, and z, set the light’s position. For example, pointLight(255, 0, 0, 50, 0, 0) creates a red (255, 0, 0) light that shines from the coordinates (50, 0, 0).", + "The second way to call pointLight() has four parameters. The first three parameters, v1, v2, and v3, set the light’s color using the current colorMode(). The last parameter, position sets the light’s position using a p5.Vector object. For example, pointLight(255, 0, 0, lightPos) creates a red (255, 0, 0) light that shines from the position set by the lightPos vector.", + "The third way to call pointLight() has four parameters. The first parameter, color, sets the light’s color using a p5.Color object or an array of color values. The last three parameters, x, y, and z, set the light’s position. For example, directionalLight(myColor, 50, 0, 0) creates a light that shines from the coordinates (50, 0, 0) with the color value of myColor.", + "The fourth way to call pointLight() has two parameters. The first parameter, color, sets the light’s color using a p5.Color object or an array of color values. The second parameter, position, sets the light’s position using a p5.Vector object. For example, directionalLight(myColor, lightPos) creates a light that shines from the position set by the lightPos vector with the color value of myColor." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "x": "Number: x component of position", - "y": "Number: y component of position", - "z": "Number: z component of position", - "position": "p5.Vector: of light as a p5.Vector", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "x": "Number: x-coordinate of the light.", + "y": "Number: y-coordinate of the light.", + "z": "Number: z-coordinate of the light.", + "position": "p5.Vector: position of the light as a p5.Vector object.", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or a CSS string." } }, "imageLight": { "description": [ - "Creates an image light with the given image.", - "The image light simulates light from all the directions. This is done by using the image as a texture for an infinitely large sphere light. This sphere contains or encapsulates the whole scene/drawing. It will have different effect for varying shininess of the object in the drawing. Under the hood it is mainly doing 2 types of calculations, the first one is creating an irradiance map the environment map of the input image. The second one is managing reflections based on the shininess or roughness of the material used in the scene.", - "Note: The image's diffuse light will be affected by fill() and the specular reflections will be affected by specularMaterial() and shininess()." + "Creates an ambient light from an image.", + "imageLight() simulates a light shining from all directions. The effect is like placing the sketch at the center of a giant sphere that uses the image as its texture. The image's diffuse light will be affected by fill() and the specular reflections will be affected by specularMaterial() and shininess().", + "The parameter, img, is the p5.Image object to use as the light source." ], "params": { - "img": "p5.image: image for the background" + "img": "p5.image: image to use as the light source." } }, "panorama": { "description": [ - "The panorama(img) method transforms images containing 360-degree content, such as maps or HDRIs, into immersive 3D backgrounds that surround your scene. This is similar to calling background(color); call panorama(img) before drawing your scene to create a 360-degree background from your image. It operates on the concept of sphere mapping, where the image is mapped onto an infinitely large sphere based on the angles of the camera.", - "To enable 360-degree viewing, either use orbitControl() or try changing the orientation of the camera to see different parts of the background." + "Creates an immersive 3D background.", + "panorama() transforms images containing 360˚ content, such as maps or HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the space requires changing the camera's perspective with functions such as orbitControl() or camera()." ], "params": { - "img": "p5.Image: A 360-degree image to use as a background panorama" + "img": "p5.Image: 360˚ image to use as the background." } }, "lights": { @@ -3760,160 +4158,217 @@ "lightFalloff": { "description": [ "Sets the falloff rate for pointLight() and spotLight().", - "lightFalloff() affects only the lights which are created after it in the code.", - "The constant, linear, an quadratic parameters are used to calculate falloff as follows:", - "d = distance from light position to vertex position", - "falloff = 1 / (CONSTANT + d * LINEAR + (d * d) * QUADRATIC)" + "A light’s falloff describes the intensity of its beam at a distance. For example, a lantern has a slow falloff, a flashlight has a medium falloff, and a laser pointer has a sharp falloff.", + "lightFalloff() has three parameters, constant, linear, and quadratic. They’re numbers used to calculate falloff at a distance, d, as follows:", + "falloff = 1 / (constant + d * linear + (d * d) * quadratic)", + "Note: constant, linear, and quadratic should always be set to values greater than 0." ], "params": { - "constant": "Number: CONSTANT value for determining falloff", - "linear": "Number: LINEAR value for determining falloff", - "quadratic": "Number: QUADRATIC value for determining falloff" + "constant": "Number: constant value for calculating falloff.", + "linear": "Number: linear value for calculating falloff.", + "quadratic": "Number: quadratic value for calculating falloff." } }, "spotLight": { "description": [ - "Creates a spot light with the given color, position, light direction, angle, and concentration.", - "Like a pointLight(), a spotLight() emits light from a specific point (position). It has a different effect when it is positioned farther vs. nearer an object.", - "However, unlike a pointLight(), the light is emitted in one direction along a conical shape. The shape of the cone can be controlled using the angle and concentration parameters.", - "The angle parameter is used to determine the radius of the cone. And the concentration parameter is used to focus the light towards the center of the cone. Both parameters are optional, however if you want to specify concentration, you must also specify angle. The minimum concentration value is 1.", - "A maximum of 5 spot lights can be active at once.", - "Note: lights need to be called (whether directly or indirectly) within draw() to remain persistent in a looping program. Placing them in setup() will cause them to only have an effect the first time through the loop." - ], - "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "x": "Number: x component of position", - "y": "Number: y component of position", - "z": "Number: z component of position", - "rx": "Number: x component of light direction (inclusive range of -1 to 1)", - "ry": "Number: y component of light direction (inclusive range of -1 to 1)", - "rz": "Number: z component of light direction (inclusive range of -1 to 1)", - "angle": "Number: (Optional) angle of cone. Defaults to PI/3", - "concentration": "Number: (Optional) concentration of cone. Defaults to 100", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string", - "position": "p5.Vector: position of light as a p5.Vector", - "direction": "p5.Vector: direction of light as a p5.Vector" + "Creates a light that shines from a point in one direction.", + "Spot lights are like flashlights that shine in one direction creating a cone of light. The shape of the cone can be controlled using the angle and concentration parameters. A maximum of 5 spot lights can be active at once.", + "There are eight ways to call spotLight() with parameters to set the light’s color, position, direction. For example, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light at the origin (0, 0, 0) that points to the right (1, 0, 0).", + "The angle parameter is optional. It sets the radius of the light cone. For example, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16) creates a red (255, 0, 0) light at the origin (0, 0, 0) that points to the right (1, 0, 0) with an angle of PI / 16 radians. By default, angle is PI / 3 radians.", + "The concentration parameter is also optional. It focuses the light towards the center of the light cone. For example, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50) creates a red (255, 0, 0) light at the origin (0, 0, 0) that points to the right (1, 0, 0) with an angle of PI / 16 radians at concentration of 50. By default, concentration is 100." + ], + "params": { + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "x": "Number: x-coordinate of the light.", + "y": "Number: y-coordinate of the light.", + "z": "Number: z-coordinate of the light.", + "rx": "Number: x-component of light direction between -1 and 1.", + "ry": "Number: y-component of light direction between -1 and 1.", + "rz": "Number: z-component of light direction between -1 and 1.", + "angle": "Number: (Optional) angle of the light cone. Defaults to PI / 3.", + "concentration": "Number: (Optional) concentration of the light. Defaults to 100.", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or a CSS string.", + "position": "p5.Vector: position of the light as a p5.Vector object.", + "direction": "p5.Vector: direction of light as a p5.Vector object." } }, "noLights": { "description": [ - "Removes all lights present in a sketch.", - "All subsequent geometry is rendered without lighting (until a new light is created with a call to one of the lighting functions (lights(), ambientLight(), directionalLight(), pointLight(), spotLight())." + "Removes all lights from the sketch.", + "Calling noLights() removes any lights created with lights(), ambientLight(), directionalLight(), pointLight(), or spotLight(). These functions may be called after noLights() to create a new lighting scheme." ] }, "loadModel": { "description": [ - "Load a 3d model from an OBJ or STL file.", - "loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run.", - "One of the limitations of the OBJ and STL format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.", - "Also, the support for colored STL files is not present. STL files with color will be rendered without color properties.", - "Options can include:
            • path: Specifies the location or path of the 3D model file for loading.
            • normalize: Enables standardized size scaling during loading if set to true.
            • successCallback: Callback for post-loading actions with the 3D model object.
            • failureCallback: Handles errors if model loading fails, receiving an event error.
            • fileType: Defines the file extension of the model.
            • flipU: Flips the U texture coordinates of the model.
            • flipV: Flips the V texture coordinates of the model.
            " + "Loads a 3D model to create a p5.Geometry object.", + "loadModel() can load 3D models from OBJ and STL files. Once the model is loaded, it can be displayed with the model() function, as in model(shape).", + "There are three ways to call loadModel() with optional parameters to help process the model.", + "The first parameter, path, is always a String with the path to the file. Paths to local files should be relative, as in loadModel('assets/model.obj'). URLs such as 'https://example.com/model.obj'` may be blocked due to browser security.", + "The first way to call loadModel() has three optional parameters after the file path. The first optional parameter, successCallback, is a function to call once the model loads. For example, loadModel('assets/model.obj', handleModel) will call the handleModel() function once the model loads. The second optional parameter, failureCallback, is a function to call if the model fails to load. For example, loadModel('assets/model.obj', handleModel, handleFailure) will call the handleFailure() function if an error occurs while loading. The third optional parameter, fileType, is the model’s file extension as a string. For example, loadModel('assets/model', handleModel, handleFailure, '.obj') will try to load the file model as a .obj file.", + "The second way to call loadModel() has four optional parameters after the file path. The first optional parameter is a Boolean value. If true is passed, as in loadModel('assets/model.obj', true), then the model will be resized to ensure it fits the canvas. The next three parameters are successCallback, failureCallback, and fileType as described above.", + "The third way to call loadModel() has one optional parameter after the file path. The optional parameter, options, is an Object with options, as in loadModel('assets/model.obj', options). The options object can have the following properties: let options = { // Enables standardized size scaling during loading if set to true. normalize: true,", + "// Function to call once the model loads. successCallback: handleModel,", + "// Function to call if an error occurs while loading. failureCallback: handleError,", + "// Model's file extension. fileType: '.stl',", + "// Flips the U texture coordinates of the model. flipU: false,", + "// Flips the V texture coordinates of the model. flipV: false };", + "// Pass the options object to loadModel(). loadModel('assets/model.obj', options); ", + "Models can take time to load. Calling loadModel() in preload() ensures models load before they're used in setup() or draw().", + "Note: There’s no support for colored STL files. STL files with color will be rendered without color." ], "returns": "p5.Geometry: the p5.Geometry object", "params": { - "path": "String: Path of the model to be loaded", - "normalize": "Boolean: If true, scale the model to a standardized size when loading", - "successCallback": "function(p5.Geometry): (Optional) Function to be called once the model is loaded. Will be passed the 3D model object.", - "failureCallback": "Function(Event): (Optional) called with event error if the model fails to load.", - "fileType": "String: (Optional) The file extension of the model (.stl, .obj).", - "options": "Object (Optional)" + "path": "String: path of the model to be loaded.", + "normalize": "Boolean: if true, scale the model to fit the canvas.", + "successCallback": "function(p5.Geometry): (Optional) function to call once the model is loaded. Will be passed the p5.Geometry object.", + "failureCallback": "Function(Event): (Optional) function to call if the model fails to load. Will be passed an Error event object.", + "fileType": "String: (Optional) model’s file extension. Either '.obj' or '.stl'.", + "options": "Object: (Optional) loading options." } }, "model": { "description": [ - "Render a 3d model to the screen." + "Draws a p5.Geometry object to the canvas.", + "The parameter, model, is the p5.Geometry object to draw. p5.Geometry objects can be built with buildGeometry(), or beginGeometry() and endGeometry(). They can also be loaded from a file with loadGeometry().", + "Note: model() can only be used in WebGL mode." ], "params": { - "model": "p5.Geometry: Loaded 3d model to be rendered" + "model": "p5.Geometry: 3D shape to be drawn." } }, "loadShader": { "description": [ - "Creates a new p5.Shader object from the provided vertex and fragment shader files.", - "The shader files are loaded asynchronously in the background, so this method should be used in preload().", - "Shaders can alter the positioning of shapes drawn with them. To ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.", - "Note, shaders can only be used in WEBGL mode." + "Loads vertex and fragment shaders to create a p5.Shader object.", + "Shaders are programs that run on the graphics processing unit (GPU). They can process many pixels at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch.", + "Once the p5.Shader object is created, it can be used with the shader() function, as in shader(myShader). A shader program consists of two files, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color.", + "loadShader() loads the vertex and fragment shaders from their .vert and .frag files. For example, calling loadShader('assets/shader.vert', 'assets/shader.frag') loads both required shaders and returns a p5.Shader object.", + "The third parameter, successCallback, is optional. If a function is passed, it will be called once the shader has loaded. The callback function can use the new p5.Shader object as its parameter.", + "The fourth parameter, failureCallback, is also optional. If a function is passed, it will be called if the shader fails to load. The callback function can use the event error as its parameter.", + "Shaders can take time to load. Calling loadShader() in preload() ensures shaders load before they're used in setup() or draw().", + "Note: Shaders can only be used in WebGL mode." ], - "returns": "p5.Shader: a shader object created from the provided vertex and fragment shader files.", + "returns": "p5.Shader: new shader created from the vertex and fragment shader files.", "params": { - "vertFilename": "String: path to file containing vertex shader source code", - "fragFilename": "String: path to file containing fragment shader source code", - "callback": "Function: (Optional) callback to be executed after loadShader completes. On success, the p5.Shader object is passed as the first argument.", - "errorCallback": "Function: (Optional) callback to be executed when an error occurs inside loadShader. On error, the error is passed as the first argument." + "vertFilename": "String: path of the vertex shader to be loaded.", + "fragFilename": "String: path of the fragment shader to be loaded.", + "successCallback": "Function: (Optional) function to call once the shader is loaded. Can be passed the p5.Shader object.", + "failureCallback": "Function: (Optional) function to call if the shader fails to load. Can be passed an Error event object." } }, "createShader": { "description": [ - "Creates a new p5.Shader object from the provided vertex and fragment shader code.", - "Note, shaders can only be used in WEBGL mode.", - "Shaders can alter the positioning of shapes drawn with them. To ensure consistency in rendering, it's recommended to use the vertex shader shown in the example below." + "Creates a new p5.Shader object.", + "Shaders are programs that run on the graphics processing unit (GPU). They can process many pixels at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch.", + "Once the p5.Shader object is created, it can be used with the shader() function, as in shader(myShader). A shader program consists of two parts, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color.", + "The first parameter, vertSrc, sets the vertex shader. It’s a string that contains the vertex shader program written in GLSL.", + "The second parameter, fragSrc, sets the fragment shader. It’s a string that contains the fragment shader program written in GLSL.", + "Note: Only filter shaders can be used in 2D mode. All shaders can be used in WebGL mode." ], - "returns": "p5.Shader: a shader object created from the provided vertex and fragment shaders.", + "returns": "p5.Shader: new shader object created from the vertex and fragment shaders.", "params": { - "vertSrc": "String: source code for the vertex shader", - "fragSrc": "String: source code for the fragment shader" + "vertSrc": "String: source code for the vertex shader.", + "fragSrc": "String: source code for the fragment shader." } }, "createFilterShader": { "description": [ - "Creates a new p5.Shader using only a fragment shader, as a convenience method for creating image effects. It's like createShader() but with a default vertex shader included.", - "createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas. A filter shader will not be applied to any geometries.", - "The fragment shader receives some uniforms:
            • sampler2D tex0, which contains the canvas contents as a texture
            • vec2 canvasSize, which is the p5 width and height of the canvas (not including pixel density)
            • vec2 texelSize, which is the size of a physical pixel including pixel density (1.0/(width*density), 1.0/(height*density))
            ", - "For more info about filters and shaders, see Adam Ferriss' repo of shader examples or the introduction to shaders page." + "Creates a p5.Shader object to be used with the filter() function.", + "createFilterShader() works like createShader() but has a default vertex shader included. createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas. A filter shader will be applied to the whole canvas instead of just p5.Geometry objects.", + "The parameter, fragSrc, sets the fragment shader. It’s a string that contains the fragment shader program written in GLSL.", + "The p5.Shader object that's created has some uniforms that can be set:
            • sampler2D tex0, which contains the canvas contents as a texture.
            • vec2 canvasSize, which is the width and height of the canvas, not including pixel density.
            • vec2 texelSize, which is the size of a physical pixel including pixel density. This is calculated as 1.0 / (width * density) for the pixel width and 1.0 / (height * density) for the pixel height.
            ", + "The p5.Shader that's created also provides varying vec2 vTexCoord, a coordinate with values between 0 and 1. vTexCoord describes where on the canvas the pixel will be drawn.", + "For more info about filters and shaders, see Adam Ferriss' repo of shader examples or the Introduction to Shaders tutorial." ], - "returns": "p5.Shader: a shader object created from the provided fragment shader.", + "returns": "p5.Shader: new shader object created from the fragment shader.", "params": { - "fragSrc": "String: source code for the fragment shader" + "fragSrc": "String: source code for the fragment shader." } }, "shader": { "description": [ - "Sets the p5.Shader object to be used to render subsequent shapes.", - "Shaders can alter the positioning of shapes drawn with them. To ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.", - "Custom shaders can be created using the createShader() and loadShader() functions.", - "Use resetShader() to restore the default shaders.", - "Additional Information: The shader will be used for:
            • Fills when a texture is enabled if it includes a uniform sampler2D.
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
            • Fills whenever there are no lights or textures.
            • Strokes if it includes the uniform uStrokeWeight. Note: This behavior is considered experimental, and changes are planned in future releases.
            ", - "Note, shaders can only be used in WEBGL mode." + "Sets the p5.Shader object to apply while drawing.", + "Shaders are programs that run on the graphics processing unit (GPU). They can process many pixels or vertices at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch. p5.Shader objects can be created using the createShader() and loadShader() functions.", + "The parameter, s, is the p5.Shader object to apply. For example, calling shader(myShader) applies myShader to process each pixel on the canvas. The shader will be used for:
            • Fills when a texture is enabled if it includes a uniform sampler2D.
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
            • Fills whenever there are no lights or textures.
            • Strokes if it includes the uniform uStrokeWeight.
            ", + "The source code from a p5.Shader object's fragment and vertex shaders will be compiled the first time it's passed to shader(). See MDN for more information about compiling shaders.", + "Calling resetShader() restores a sketch’s default shaders.", + "Note: Shaders can only be used in WebGL mode." ], "params": { - "s": "p5.Shader: the p5.Shader object to use for rendering shapes." + "s": "p5.Shader: p5.Shader object to apply." } }, "resetShader": { "description": [ - "Restores the default shaders. Code that runs after resetShader() will not be affected by the shader previously set by shader()" + "Restores the default shaders.", + "resetShader() deactivates any shaders previously applied by shader().", + "Note: Shaders can only be used in WebGL mode." ] }, "texture": { "description": [ - "Sets the texture that will be used to render subsequent shapes.", - "A texture is like a \"skin\" that wraps around a 3D geometry. Currently supported textures are images, video, and offscreen renders.", + "Sets the texture that will be used on shapes.", + "A texture is like a skin that wraps around a shape. texture() works with built-in shapes, such as square() and sphere(), and custom shapes created with functions such as buildGeometry(). To texture a geometry created with beginShape(), uv coordinates must be passed to each vertex() call.", + "The parameter, tex, is the texture to apply. texture() can use a range of sources including images, videos, and offscreen renderers such as p5.Graphics and p5.Framebuffer objects.", "To texture a geometry created with beginShape(), you will need to specify uv coordinates in vertex().", - "Note, texture() can only be used in WEBGL mode.", - "You can view more materials in this example." + "Note: texture() can only be used in WebGL mode." ], "params": { - "tex": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture: image to use as texture" + "tex": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture: media to use as the texture." } }, "textureMode": { "description": [ - "Sets the coordinate space for texture mapping. The default mode is IMAGE which refers to the actual coordinates of the image. NORMAL refers to a normalized space of values ranging from 0 to 1.", - "With IMAGE, if an image is 100×200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1)." - ], - "params": { - "mode": "Constant: either IMAGE or NORMAL" + "Changes the coordinate system used for textures when they’re applied to custom shapes.", + "In order for texture() to work, a shape needs a way to map the points on its surface to the pixels in an image. Built-in shapes such as rect() and box() already have these texture mappings based on their vertices. Custom shapes created with vertex() require texture mappings to be passed as uv coordinates.", + "Each call to vertex() must include 5 arguments, as in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z) to the pixel at coordinates (u, v) within an image. For example, the corners of a rectangular image are mapped to the corners of a rectangle by default: // Apply the image as a texture. texture(img);", + "// Draw the rectangle. rect(0, 0, 30, 50); ", + "If the image in the code snippet above has dimensions of 300 x 500 pixels, the same result could be achieved as follows: // Apply the image as a texture. texture(img);", + "// Draw the rectangle. beginShape();", + "// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);", + "// Top-right. // u: 300, v: 0 vertex(30, 0, 0, 300, 0);", + "// Bottom-right. // u: 300, v: 500 vertex(30, 50, 0, 300, 500);", + "// Bottom-left. // u: 0, v: 500 vertex(0, 50, 0, 0, 500);", + "endShape(); ", + "textureMode() changes the coordinate system for uv coordinates.", + "The parameter, mode, accepts two possible constants. If NORMAL is passed, as in textureMode(NORMAL), then the texture’s uv coordinates can be provided in the range 0 to 1 instead of the image’s dimensions. This can be helpful for using the same code for multiple images of different sizes. For example, the code snippet above could be rewritten as follows: // Set the texture mode to use normalized coordinates. textureMode(NORMAL);", + "// Apply the image as a texture. texture(img);", + "// Draw the rectangle. beginShape();", + "// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);", + "// Top-right. // u: 1, v: 0 vertex(30, 0, 0, 1, 0);", + "// Bottom-right. // u: 1, v: 1 vertex(30, 50, 0, 1, 1);", + "// Bottom-left. // u: 0, v: 1 vertex(0, 50, 0, 0, 1);", + "endShape(); ", + "By default, mode is IMAGE, which scales uv coordinates to the dimensions of the image. Calling textureMode(IMAGE) applies the default.", + "Note: textureMode() can only be used in WebGL mode." + ], + "params": { + "mode": "Constant: either IMAGE or NORMAL." } }, "textureWrap": { "description": [ - "Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 to 1 range. There are three options: CLAMP, REPEAT, and MIRROR.", - "CLAMP causes the pixels at the edge of the texture to extend to the bounds. REPEAT causes the texture to tile repeatedly until reaching the bounds. MIRROR works similarly to REPEAT but it flips the texture with every new tile.", - "REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.).", - "This method will affect all textures in your sketch until a subsequent textureWrap() call is made.", - "If only one argument is provided, it will be applied to both the horizontal and vertical axes." + "Changes the way textures behave when a shape’s uv coordinates go beyond the texture.", + "In order for texture() to work, a shape needs a way to map the points on its surface to the pixels in an image. Built-in shapes such as rect() and box() already have these texture mappings based on their vertices. Custom shapes created with vertex() require texture mappings to be passed as uv coordinates.", + "Each call to vertex() must include 5 arguments, as in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z) to the pixel at coordinates (u, v) within an image. For example, the corners of a rectangular image are mapped to the corners of a rectangle by default: // Apply the image as a texture. texture(img);", + "// Draw the rectangle. rect(0, 0, 30, 50); ", + "If the image in the code snippet above has dimensions of 300 x 500 pixels, the same result could be achieved as follows: // Apply the image as a texture. texture(img);", + "// Draw the rectangle. beginShape();", + "// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);", + "// Top-right. // u: 300, v: 0 vertex(30, 0, 0, 300, 0);", + "// Bottom-right. // u: 300, v: 500 vertex(30, 50, 0, 300, 500);", + "// Bottom-left. // u: 0, v: 500 vertex(0, 50, 0, 0, 500);", + "endShape(); ", + "textureWrap() controls how textures behave when their uv's go beyond the texture. Doing so can produce interesting visual effects such as tiling. For example, the custom shape above could have u-coordinates are greater than the image’s width: // Apply the image as a texture. texture(img);", + "// Draw the rectangle. beginShape(); vertex(0, 0, 0, 0, 0);", + "// Top-right. // u: 600 vertex(30, 0, 0, 600, 0);", + "// Bottom-right. // u: 600 vertex(30, 50, 0, 600, 500);", + "vertex(0, 50, 0, 0, 500); endShape(); ", + "The u-coordinates of 600 are greater than the texture image’s width of 300. This creates interesting possibilities.", + "The first parameter, wrapX, accepts three possible constants. If CLAMP is passed, as in textureWrap(CLAMP), the pixels at the edge of the texture will extend to the shape’s edges. If REPEAT is passed, as in textureWrap(REPEAT), the texture will tile repeatedly until reaching the shape’s edges. If MIRROR is passed, as in textureWrap(MIRROR), the texture will tile repeatedly until reaching the shape’s edges, flipping its orientation between tiles. By default, textures CLAMP.", + "The second parameter, wrapY, is optional. It accepts the same three constants, CLAMP, REPEAT, and MIRROR. If one of these constants is passed, as in textureWRAP(MIRROR, REPEAT), then the texture will MIRROR horizontally and REPEAT vertically. By default, wrapY will be set to the same value as wrapX.", + "Note: textureWrap() can only be used in WebGL mode." ], "params": { "wrapX": "Constant: either CLAMP, REPEAT, or MIRROR", @@ -3923,164 +4378,192 @@ "normalMaterial": { "description": [ "Sets the current material as a normal material.", - "A normal material is not affected by light. It is often used as a placeholder material when debugging.", - "Surfaces facing the X-axis become red, those facing the Y-axis become green, and those facing the Z-axis become blue.", - "You can view more materials in this example." + "A normal material sets surfaces facing the x-axis to red, those facing the y-axis to green, and those facing the z-axis to blue. Normal material isn't affected by light. It’s often used as a placeholder material when debugging.", + "Note: normalMaterial() can only be used in WebGL mode." ] }, "ambientMaterial": { "description": [ - "Sets the ambient color of the material.", - "The ambientMaterial() color represents the components of the ambientLight() color that the object reflects.", - "Consider an ambientMaterial() with the color yellow (255, 255, 0). If the ambientLight() emits the color white (255, 255, 255), then the object will appear yellow as it will reflect the red and green components of the light. If the ambientLight() emits the color red (255, 0, 0), then the object will appear red as it will reflect the red component of the light. If the ambientLight() emits the color blue (0, 0, 255), then the object will appear black, as there is no component of the light that it can reflect.", - "You can view more materials in this example." + "Sets the ambient color of shapes’ surface material.", + "The ambientMaterial() color sets the components of the ambientLight() color that shapes will reflect. For example, calling ambientMaterial(255, 255, 0) would cause a shape to reflect red and green light, but not blue light.", + "ambientMaterial() can be called three ways with different parameters to set the material’s color.", + "The first way to call ambientMaterial() has one parameter, gray. Grayscale values between 0 and 255, as in ambientMaterial(50), can be passed to set the material’s color. Higher grayscale values make shapes appear brighter.", + "The second way to call ambientMaterial() has one parameter, color. A p5.Color object, an array of color values, or a CSS color string, as in ambientMaterial('magenta'), can be passed to set the material’s color.", + "The third way to call ambientMaterial() has three parameters, v1, v2, and v3. RGB, HSB, or HSL values, as in ambientMaterial(255, 0, 0), can be passed to set the material’s colors. Color values will be interpreted using the current colorMode().", + "Note: ambientMaterial() can only be used in WebGL mode." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "gray": "Number: number specifying value between white and black", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "gray": "Number: grayscale value between 0 (black) and 255 (white).", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or a CSS string." } }, "emissiveMaterial": { "description": [ - "Sets the emissive color of the material.", - "An emissive material will display the emissive color at full strength regardless of lighting. This can give the appearance that the object is glowing.", - "Note, \"emissive\" is a misnomer in the sense that the material does not actually emit light that will affect surrounding objects.", - "You can view more materials in this example." + "Sets the emissive color of shapes’ surface material.", + "The emissiveMaterial() color sets a color shapes display at full strength, regardless of lighting. This can give the appearance that a shape is glowing. However, emissive materials don’t actually emit light that can affect surrounding objects.", + "emissiveMaterial() can be called three ways with different parameters to set the material’s color.", + "The first way to call emissiveMaterial() has one parameter, gray. Grayscale values between 0 and 255, as in emissiveMaterial(50), can be passed to set the material’s color. Higher grayscale values make shapes appear brighter.", + "The second way to call emissiveMaterial() has one parameter, color. A p5.Color object, an array of color values, or a CSS color string, as in emissiveMaterial('magenta'), can be passed to set the material’s color.", + "The third way to call emissiveMaterial() has four parameters, v1, v2, v3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be passed to set the material’s colors, as in emissiveMaterial(255, 0, 0) or emissiveMaterial(255, 0, 0, 30). Color values will be interpreted using the current colorMode().", + "Note: emissiveMaterial() can only be used in WebGL mode." ], "params": { - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)", - "gray": "Number: number specifying value between white and black", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string" + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "alpha": "Number: (Optional) alpha value in the current colorMode().", + "gray": "Number: grayscale value between 0 (black) and 255 (white).", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or a CSS string." } }, "specularMaterial": { "description": [ - "Sets the specular color of the material.", - "A specular material is reflective (shiny). The shininess can be controlled by the shininess() function.", - "Like ambientMaterial(), the specularMaterial() color is the color the object will reflect under ambientLight(). However unlike ambientMaterial(), for all other types of lights (directionalLight(), pointLight(), spotLight()), a specular material will reflect the color of the light source. This is what gives it its \"shiny\" appearance.", - "You can view more materials in this example." + "Sets the specular color of shapes’ surface material.", + "The specularMaterial() color sets the components of light color that glossy coats on shapes will reflect. For example, calling specularMaterial(255, 255, 0) would cause a shape to reflect red and green light, but not blue light.", + "Unlike ambientMaterial(), specularMaterial() will reflect the full color of light sources including directionalLight(), pointLight(), and spotLight(). This is what gives it shapes their \"shiny\" appearance. The material’s shininess can be controlled by the shininess() function.", + "specularMaterial() can be called three ways with different parameters to set the material’s color.", + "The first way to call specularMaterial() has one parameter, gray. Grayscale values between 0 and 255, as in specularMaterial(50), can be passed to set the material’s color. Higher grayscale values make shapes appear brighter.", + "The second way to call specularMaterial() has one parameter, color. A p5.Color> object, an array of color values, or a CSS color string, as in specularMaterial('magenta'), can be passed to set the material’s color.", + "The third way to call specularMaterial() has four parameters, v1, v2, v3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be passed to set the material’s colors, as in specularMaterial(255, 0, 0) or specularMaterial(255, 0, 0, 30). Color values will be interpreted using the current colorMode()." ], "params": { - "gray": "Number: number specifying value between white and black.", - "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)", - "v1": "Number: red or hue value relative to the current color range", - "v2": "Number: green or saturation value relative to the current color range", - "v3": "Number: blue or brightness value relative to the current color range", - "color": "p5.Color|Number[]|String: color as a p5.Color, as an array, or as a CSS string" + "gray": "Number: grayscale value between 0 (black) and 255 (white).", + "alpha": "Number: (Optional) alpha value in the current current colorMode().", + "v1": "Number: red or hue value in the current colorMode().", + "v2": "Number: green or saturation value in the current colorMode().", + "v3": "Number: blue, brightness, or lightness value in the current colorMode().", + "color": "p5.Color|Number[]|String: color as a p5.Color object, an array of color values, or a CSS string." } }, "shininess": { "description": [ "Sets the amount of gloss (\"shininess\") of a specularMaterial().", - "The default and minimum value is 1." + "Shiny materials focus reflected light more than dull materials. shininess() affects the way materials reflect light sources including directionalLight(), pointLight(), and spotLight().", + "The parameter, shine, is a number that sets the amount of shininess. shine must be greater than 1, which is its default value." ], "params": { - "shine": "Number: degree of shininess" + "shine": "Number: amount of shine." } }, "metalness": { "description": [ - "Sets the metalness property of a material used in 3D rendering.", - "The metalness property controls the degree to which the material appears metallic. A higher metalness value makes the material look more metallic, while a lower value makes it appear less metallic.", - "The default and minimum value is 0, indicating a non-metallic appearance.", - "Unlike other materials, metals exclusively rely on reflections, particularly those produced by specular lights (mirrorLike lights). They don't incorporate diffuse or ambient lighting. Metals use a fill color to influence the overall color of their reflections. Pick a fill color, and you can easily change the appearance of the metal surfaces. When no fill color is provided, it defaults to using white." + "Sets the amount of \"metalness\" of a specularMaterial().", + "metalness() can make materials appear more metallic. It affects the way materials reflect light sources including affects the way materials reflect light sources including directionalLight(), pointLight(), spotLight(), and imageLight().", + "The parameter, metallic, is a number that sets the amount of metalness. metallic must be greater than 1, which is its default value. Higher values, such as metalness(100), make specular materials appear more metallic." ], "params": { - "metallic": "Number:
            • The degree of metalness.
            " + "metallic": "Number: amount of metalness." } }, "camera": { "description": [ - "Sets the position of the current camera in a 3D sketch. Parameters for this function define the camera's position, the center of the sketch (where the camera is pointing), and an up direction (the orientation of the camera).", - "This function simulates the movements of the camera, allowing objects to be viewed from various angles. Remember, it does not move the objects themselves but the camera instead. For example when the centerX value is positive, and the camera is rotating to the right side of the sketch, the object will seem like it's moving to the left.", - "See this example to view the position of your camera.", - "If no parameters are given, the following default is used: camera(0, 0, 800, 0, 0, 0, 0, 1, 0)" + "Sets the position and orientation of the current camera in a 3D sketch.", + "camera() allows objects to be viewed from different angles. It has nine parameters that are all optional.", + "The first three parameters, x, y, and z, are the coordinates of the camera’s position. For example, calling camera(0, 0, 0) places the camera at the origin (0, 0, 0). By default, the camera is placed at (0, 0, 800).", + "The next three parameters, centerX, centerY, and centerZ are the coordinates of the point where the camera faces. For example, calling camera(0, 0, 0, 10, 20, 30) places the camera at the origin (0, 0, 0) and points it at (10, 20, 30). By default, the camera points at the origin (0, 0, 0).", + "The last three parameters, upX, upY, and upZ are the components of the \"up\" vector. The \"up\" vector orients the camera’s y-axis. For example, calling camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the origin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector to (0, -1, 0) which is like holding it upside-down. By default, the \"up\" vector is (0, 1, 0).", + "Note: camera() can only be used in WebGL mode." ], "params": { - "x": "Number: (Optional) camera position value on x axis", - "y": "Number: (Optional) camera position value on y axis", - "z": "Number: (Optional) camera position value on z axis", - "centerX": "Number: (Optional) x coordinate representing center of the sketch", - "centerY": "Number: (Optional) y coordinate representing center of the sketch", - "centerZ": "Number: (Optional) z coordinate representing center of the sketch", - "upX": "Number: (Optional) x component of direction 'up' from camera", - "upY": "Number: (Optional) y component of direction 'up' from camera", - "upZ": "Number: (Optional) z component of direction 'up' from camera" + "x": "Number: (Optional) x-coordinate of the camera. Defaults to 0.", + "y": "Number: (Optional) y-coordinate of the camera. Defaults to 0.", + "z": "Number: (Optional) z-coordinate of the camera. Defaults to 800.", + "centerX": "Number: (Optional) x-coordinate of the point the camera faces. Defaults to 0.", + "centerY": "Number: (Optional) y-coordinate of the point the camera faces. Defaults to 0.", + "centerZ": "Number: (Optional) z-coordinate of the point the camera faces. Defaults to 0.", + "upX": "Number: (Optional) x-component of the camera’s \"up\" vector. Defaults to 0.", + "upY": "Number: (Optional) y-component of the camera’s \"up\" vector. Defaults to 1.", + "upZ": "Number: (Optional) z-component of the camera’s \"up\" vector. Defaults to 0." } }, "perspective": { "description": [ - "Sets a perspective projection for the current camera in a 3D sketch. This projection represents depth through foreshortening: objects that are close to the camera appear their actual size while those that are further away from the camera appear smaller.", - "The parameters to this function define the viewing frustum (the truncated pyramid within which objects are seen by the camera) through vertical field of view, aspect ratio (usually width/height), and near and far clipping planes.", - "If no parameters are given, the default values are used as:
            • fov : The default field of view for the camera is such that the full height of renderer is visible when it is positioned at a default distance of 800 units from the camera.
            • aspect : The default aspect ratio is the ratio of renderer's width to renderer's height.
            • near : The default value for the near clipping plane is 80, which is 0.1 times the default distance from the camera to its subject.
            • far : The default value for the far clipping plane is 8000, which is 10 times the default distance from the camera to its subject.
            ", - "If you prefer a fixed field of view, follow these steps:
            1. Choose your desired field of view angle (fovy). This is how wide the camera can see.
            2. To ensure that you can see the entire width across horizontally and height across vertically, place the camera a distance of (height / 2) / tan(fovy / 2) back from its subject.
            3. Call perspective with the chosen field of view, canvas aspect ratio, and near/far values: perspective(fovy, width / height, cameraDistance / 10, cameraDistance * 10);
            " + "Sets a perspective projection for the current camera in a 3D sketch.", + "In a perspective projection, shapes that are further from the camera appear smaller than shapes that are near the camera. This technique, called foreshortening, creates realistic 3D scenes. It’s applied by default in WebGL mode.", + "perspective() changes the camera’s perspective by changing its viewing frustum. The frustum is the volume of space that’s visible to the camera. Its shape is a pyramid with its top cut off. The camera is placed where the top of the pyramid should be and views everything between the frustum’s top (near) plane and its bottom (far) plane.", + "The first parameter, fovy, is the camera’s vertical field of view. It’s an angle that describes how tall or narrow a view the camera has. For example, calling perspective(0.5) sets the camera’s vertical field of view to 0.5 radians. By default, fovy is calculated based on the sketch’s height and the camera’s default z-coordinate, which is 800. The formula for the default fovy is 2 * atan(height / 2 / 800).", + "The second parameter, aspect, is the camera’s aspect ratio. It’s a number that describes the ratio of the top plane’s width to its height. For example, calling perspective(0.5, 1.5) sets the camera’s field of view to 0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner on a square canvas. By default, aspect is set to width / height.", + "The third parameter, near, is the distance from the camera to the near plane. For example, calling perspective(0.5, 1.5, 100) sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places the near plane 100 pixels from the camera. Any shapes drawn less than 100 pixels from the camera won’t be visible. By default, near is set to 0.1 * 800, which is 1/10th the default distance between the camera and the origin.", + "The fourth parameter, far, is the distance from the camera to the far plane. For example, calling perspective(0.5, 1.5, 100, 10000) sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the near plane 100 pixels from the camera, and places the far plane 10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels from the camera won’t be visible. By default, far is set to 10 * 800, which is 10 times the default distance between the camera and the origin.", + "Note: perspective() can only be used in WebGL mode." ], "params": { - "fovy": "Number: (Optional) camera frustum vertical field of view, from bottom to top of view, in angleMode units", - "aspect": "Number: (Optional) camera frustum aspect ratio", - "near": "Number: (Optional) frustum near plane length", - "far": "Number: (Optional) frustum far plane length" + "fovy": "Number: (Optional) camera frustum vertical field of view. Defaults to 2 * atan(height / 2 / 800).", + "aspect": "Number: (Optional) camera frustum aspect ratio. Defaults to width / height.", + "near": "Number: (Optional) distance from the camera to the near clipping plane. Defaults to 0.1 * 800.", + "far": "Number: (Optional) distance from the camera to the far clipping plane. Defaults to 10 * 800." } }, "linePerspective": { "description": [ - "Enable or disable perspective for lines in the WebGL renderer. The behavior of linePerspective() is associated with the type of camera projection being used.
            • When using perspective(), which simulates realistic perspective, linePerspective is set to true by default. This means that lines will be affected by the current camera's perspective, resulting in a more natural appearance.
            • When using ortho() or frustum(), which do not simulate realistic perspective, linePerspective is set to false by default. In this case, lines will have a uniform scale regardless of the camera's perspective, providing a more predictable and consistent appearance.
            • You can override the default behavior by explicitly calling linePerspective() after using perspective(), ortho(), or frustum(). This allows you to customize the line perspective based on your specific requirements.
            " + "Enables or disables perspective for lines in 3D sketches.", + "In WebGL mode, lines can be drawn with a thinner stroke when they’re further from the camera. Doing so gives them a more realistic appearance.", + "By default, lines are drawn differently based on the type of perspective being used:
            • perspective() and frustum() simulate a realistic perspective. In these modes, stroke weight is affected by the line’s distance from the camera. Doing so results in a more natural appearance. perspective() is the default mode for 3D sketches.
            • ortho() doesn’t simulate a realistic perspective. In this mode, stroke weights are consistent regardless of the line’s distance from the camera. Doing so results in a more predictable and consistent appearance.
            ", + "linePerspective() can override the default line drawing mode.", + "The parameter, enable, is optional. It’s a Boolean value that sets the way lines are drawn. If true is passed, as in linePerspective(true), then lines will appear thinner when they are further from the camera. If false is passed, as in linePerspective(false), then lines will have consistent stroke weights regardless of their distance from the camera. By default, linePerspective() is enabled.", + "Calling linePerspective() without passing an argument returns true if it's enabled and false if not.", + "Note: linePerspective() can only be used in WebGL mode." ], "params": { - "enable": "Boolean:
            • Set to true to enable line perspective, false to disable.
            " + "enable": "Boolean: whether to enable line perspective." } }, "ortho": { "description": [ - "Sets an orthographic projection for the current camera in a 3D sketch and defines a box-shaped viewing frustum within which objects are seen. In this projection, all objects with the same dimension appear the same size, regardless of whether they are near or far from the camera.", - "The parameters to this function specify the viewing frustum where left and right are the minimum and maximum x values, top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values.", - "If no parameters are given, the following default is used: ortho(-width/2, width/2, -height/2, height/2, 0, max(width, height) + 800)." + "Sets an orthographic projection for the current camera in a 3D sketch.", + "In an orthographic projection, shapes with the same size always appear the same size, regardless of whether they are near or far from the camera.", + "ortho() changes the camera’s perspective by changing its viewing frustum from a truncated pyramid to a rectangular prism. The camera is placed in front of the frustum and views everything between the frustum’s near plane and its far plane. ortho() has six optional parameters to define the frustum.", + "The first four parameters, left, right, bottom, and top, set the coordinates of the frustum’s sides, bottom, and top. For example, calling ortho(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and 400 pixels tall. By default, these coordinates are set based on the sketch’s width and height, as in ortho(-width / 2, width / 2, -height / 2, height / 2).", + "The last two parameters, near and far, set the distance of the frustum’s near and far plane from the camera. For example, calling ortho(-100, 100, 200, 200, 50, 1000) creates a frustum that’s 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000 pixels from the camera. By default, near and far are set to 0 and max(width, height) + 800, respectively.", + "Note: ortho() can only be used in WebGL mode." ], "params": { - "left": "Number: (Optional) camera frustum left plane", - "right": "Number: (Optional) camera frustum right plane", - "bottom": "Number: (Optional) camera frustum bottom plane", - "top": "Number: (Optional) camera frustum top plane", - "near": "Number: (Optional) camera frustum near plane", - "far": "Number: (Optional) camera frustum far plane" + "left": "Number: (Optional) x-coordinate of the frustum’s left plane. Defaults to -width / 2.", + "right": "Number: (Optional) x-coordinate of the frustum’s right plane. Defaults to width / 2.", + "bottom": "Number: (Optional) y-coordinate of the frustum’s bottom plane. Defaults to height / 2.", + "top": "Number: (Optional) y-coordinate of the frustum’s top plane. Defaults to -height / 2.", + "near": "Number: (Optional) z-coordinate of the frustum’s near plane. Defaults to 0.", + "far": "Number: (Optional) z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800." } }, "frustum": { "description": [ - "Sets the frustum of the current camera as defined by the parameters.", - "A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is visible; anything outside those planes is not visible.", - "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective().", - "If no parameters are given, the following default is used: frustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10), where eyeZ is equal to 800." + "Sets the frustum of the current camera in a 3D sketch.", + "In a frustum projection, shapes that are further from the camera appear smaller than shapes that are near the camera. This technique, called foreshortening, creates realistic 3D scenes.", + "frustum() changes the default camera’s perspective by changing its viewing frustum. The frustum is the volume of space that’s visible to the camera. The frustum’s shape is a pyramid with its top cut off. The camera is placed where the top of the pyramid should be and points towards the base of the pyramid. It views everything within the frustum.", + "The first four parameters, left, right, bottom, and top, set the coordinates of the frustum’s sides, bottom, and top. For example, calling frustum(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and 400 pixels tall. By default, these coordinates are set based on the sketch’s width and height, as in ortho(-width / 20, width / 20, height / 20, -height / 20).", + "The last two parameters, near and far, set the distance of the frustum’s near and far plane from the camera. For example, calling ortho(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000 pixels from the camera. By default, near is set to 0.1 * 800, which is 1/10th the default distance between the camera and the origin. far is set to 10 * 800, which is 10 times the default distance between the camera and the origin.", + "Note: frustum() can only be used in WebGL mode." ], "params": { - "left": "Number: (Optional) camera frustum left plane", - "right": "Number: (Optional) camera frustum right plane", - "bottom": "Number: (Optional) camera frustum bottom plane", - "top": "Number: (Optional) camera frustum top plane", - "near": "Number: (Optional) camera frustum near plane", - "far": "Number: (Optional) camera frustum far plane" + "left": "Number: (Optional) x-coordinate of the frustum’s left plane. Defaults to -width / 20.", + "right": "Number: (Optional) x-coordinate of the frustum’s right plane. Defaults to width / 20.", + "bottom": "Number: (Optional) y-coordinate of the frustum’s bottom plane. Defaults to height / 20.", + "top": "Number: (Optional) y-coordinate of the frustum’s top plane. Defaults to -height / 20.", + "near": "Number: (Optional) z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.", + "far": "Number: (Optional) z-coordinate of the frustum’s far plane. Defaults to 10 * 800." } }, "createCamera": { "description": [ "Creates a new p5.Camera object and sets it as the current (active) camera.", - "The new camera is initialized with a default position (see camera()) and a default perspective projection (see perspective()). Its properties can be controlled with the p5.Camera methods.", - "Note: Every 3D sketch starts with a default camera initialized. This camera can be controlled with the global methods camera(), perspective(), ortho(), and frustum() if it is the only camera in the scene." + "The new camera is initialized with a default position (0, 0, 800) and a default perspective projection. Its properties can be controlled with p5.Camera methods such as myCamera.lookAt(0, 0, 0).", + "Note: Every 3D sketch starts with a default camera initialized. This camera can be controlled with the functions camera(), perspective(), ortho(), and frustum() if it's the only camera in the scene.", + "Note: createCamera() can only be used in WebGL mode." ], - "returns": "p5.Camera: The newly created camera object." + "returns": "p5.Camera: the new camera." }, "setCamera": { "description": [ - "Sets the current (active) camera of a 3D sketch. Allows for switching between multiple cameras." + "Sets the current (active) camera of a 3D sketch.", + "setCamera() allows for switching between multiple cameras created with createCamera().", + "Note: setCamera() can only be used in WebGL mode." ], "params": { - "cam": "p5.Camera: p5.Camera object" + "cam": "p5.Camera: camera that should be made active." } }, "setAttributes": { @@ -4673,28 +5156,7 @@ "isMainCanvas": "Boolean: (Optional) whether we're using it as main canvas" } }, - "JSON": { - "stringify": { - "description": [ - "From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string." - ], - "params": { - "object": "Object: :Javascript object that you would like to convert to JSON" - } - } - }, - "console": { - "log": { - "description": [ - "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably.", - "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome, Edge, and Safari. With the online p5 editor the console is embedded directly in the page underneath the code editor.", - "From the MDN entry: The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects." - ], - "params": { - "message": "String|Expression|Object: :Message that you would like to print to the console" - } - } - }, + "console": {}, "p5.TypedDict": { "description": [ "Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class." @@ -6181,141 +6643,217 @@ }, "p5.Camera": { "description": [ - "This class describes a camera for use in p5's WebGL mode. It contains camera position, orientation, and projection information necessary for rendering a 3D scene.", - "New p5.Camera objects can be made through the createCamera() function and controlled through the methods described below. A camera created in this way will use a default position in the scene and a default perspective projection until these properties are changed through the various methods available. It is possible to create multiple cameras, in which case the current camera can be set through the setCamera() method.", - "Note: The methods below operate in two coordinate systems: the 'world' coordinate system describe positions in terms of their relationship to the origin along the X, Y and Z axes whereas the camera's 'local' coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. The move() method, for instance, moves the camera along its own axes, whereas the setPosition() method sets the camera's position in world-space.", - "The camera object properties eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ which describes camera position, orientation, and projection are also accessible via the camera object generated using createCamera()" + "A class to describe a camera for viewing a 3D sketch.", + "Each p5.Camera object represents a camera that views a section of 3D space. It stores information about the camera’s position, orientation, and projection.", + "In WebGL mode, the default camera is a p5.Camera object that can be controlled with the camera(), perspective(), ortho(), and frustum() functions. Additional cameras can be created with createCamera() and activated with setCamera().", + "Note: p5.Camera’s methods operate in two coordinate systems:
            • The “world” coordinate system describes positions in terms of their relationship to the origin along the x-, y-, and z-axes. For example, calling myCamera.setPosition() places the camera in 3D space using \"world\" coordinates.
            • The \"local\" coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. For example, calling myCamera.move() moves the camera along its own axes.
            " ], "params": { "rendererGL": "RendererGL: instance of WebGL renderer" }, "eyeX": { "description": [ - "camera position value on x axis. default value is 0" + "The camera’s y-coordinate.", + "By default, the camera’s y-coordinate is set to 0 in \"world\" space." ] }, "eyeY": { "description": [ - "camera position value on y axis. default value is 0" + "The camera’s y-coordinate.", + "By default, the camera’s y-coordinate is set to 0 in \"world\" space." ] }, "eyeZ": { "description": [ - "camera position value on z axis. default value is 800" + "The camera’s z-coordinate.", + "By default, the camera’s z-coordinate is set to 800 in \"world\" space." ] }, "centerX": { "description": [ - "x coordinate representing center of the sketch" + "The x-coordinate of the place where the camera looks.", + "By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so myCamera.centerX is 0." ] }, "centerY": { "description": [ - "y coordinate representing center of the sketch" + "The y-coordinate of the place where the camera looks.", + "By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so myCamera.centerY is 0." ] }, "centerZ": { "description": [ - "z coordinate representing center of the sketch" + "The y-coordinate of the place where the camera looks.", + "By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so myCamera.centerZ is 0." ] }, "upX": { "description": [ - "x component of direction 'up' from camera" + "The x-component of the camera's \"up\" vector.", + "The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is (0, 1, 0), so its x-component is 0 in \"local\" space." ] }, "upY": { "description": [ - "y component of direction 'up' from camera" + "The y-component of the camera's \"up\" vector.", + "The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is (0, 1, 0), so its y-component is 1 in \"local\" space." ] }, "upZ": { "description": [ - "z component of direction 'up' from camera" + "The z-component of the camera's \"up\" vector.", + "The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is (0, 1, 0), so its z-component is 0 in \"local\" space." ] }, "perspective": { "description": [ - "Sets a perspective projection. Accepts the same parameters as the global perspective(). More information on this function can be found there." - ] + "Sets a perspective projection for the camera.", + "In a perspective projection, shapes that are further from the camera appear smaller than shapes that are near the camera. This technique, called foreshortening, creates realistic 3D scenes. It’s applied by default in new p5.Camera objects.", + "myCamera.perspective() changes the camera’s perspective by changing its viewing frustum. The frustum is the volume of space that’s visible to the camera. The frustum’s shape is a pyramid with its top cut off. The camera is placed where the top of the pyramid should be and points towards the base of the pyramid. It views everything within the frustum.", + "The first parameter, fovy, is the camera’s vertical field of view. It’s an angle that describes how tall or narrow a view the camera has. For example, calling myCamera.perspective(0.5) sets the camera’s vertical field of view to 0.5 radians. By default, fovy is calculated based on the sketch’s height and the camera’s default z-coordinate, which is 800. The formula for the default fovy is 2 * atan(height / 2 / 800).", + "The second parameter, aspect, is the camera’s aspect ratio. It’s a number that describes the ratio of the top plane’s width to its height. For example, calling myCamera.perspective(0.5, 1.5) sets the camera’s field of view to 0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner on a square canvas. By default, aspect is set to width / height.", + "The third parameter, near, is the distance from the camera to the near plane. For example, calling myCamera.perspective(0.5, 1.5, 100) sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places the near plane 100 pixels from the camera. Any shapes drawn less than 100 pixels from the camera won’t be visible. By default, near is set to 0.1 * 800, which is 1/10th the default distance between the camera and the origin.", + "The fourth parameter, far, is the distance from the camera to the far plane. For example, calling myCamera.perspective(0.5, 1.5, 100, 10000) sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the near plane 100 pixels from the camera, and places the far plane 10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels from the camera won’t be visible. By default, far is set to 10 * 800, which is 10 times the default distance between the camera and the origin." + ], + "params": { + "fovy": "Number: (Optional) camera frustum vertical field of view. Defaults to 2 * atan(height / 2 / 800).", + "aspect": "Number: (Optional) camera frustum aspect ratio. Defaults to width / height.", + "near": "Number: (Optional) distance from the camera to the near clipping plane. Defaults to 0.1 * 800.", + "far": "Number: (Optional) distance from the camera to the far clipping plane. Defaults to 10 * 800." + } }, "ortho": { "description": [ - "Sets an orthographic projection. Accepts the same parameters as the global ortho(). More information on this function can be found there." - ] + "Sets an orthographic projection for the camera.", + "In an orthographic projection, shapes with the same size always appear the same size, regardless of whether they are near or far from the camera.", + "myCamera.ortho() changes the camera’s perspective by changing its viewing frustum from a truncated pyramid to a rectangular prism. The frustum is the volume of space that’s visible to the camera. The camera is placed in front of the frustum and views everything within the frustum. myCamera.ortho() has six optional parameters to define the viewing frustum.", + "The first four parameters, left, right, bottom, and top, set the coordinates of the frustum’s sides, bottom, and top. For example, calling myCamera.ortho(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and 400 pixels tall. By default, these dimensions are set based on the sketch’s width and height, as in myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2).", + "The last two parameters, near and far, set the distance of the frustum’s near and far plane from the camera. For example, calling myCamera.ortho(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000 pixels from the camera. By default, near and far are set to 0 and max(width, height) + 800, respectively." + ], + "params": { + "left": "Number: (Optional) x-coordinate of the frustum’s left plane. Defaults to -width / 2.", + "right": "Number: (Optional) x-coordinate of the frustum’s right plane. Defaults to width / 2.", + "bottom": "Number: (Optional) y-coordinate of the frustum’s bottom plane. Defaults to height / 2.", + "top": "Number: (Optional) y-coordinate of the frustum’s top plane. Defaults to -height / 2.", + "near": "Number: (Optional) z-coordinate of the frustum’s near plane. Defaults to 0.", + "far": "Number: (Optional) z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800." + } }, "frustum": { "description": [ - "Sets the camera's frustum. Accepts the same parameters as the global frustum(). More information on this function can be found there." - ] + "Sets the camera's frustum.", + "In a frustum projection, shapes that are further from the camera appear smaller than shapes that are near the camera. This technique, called foreshortening, creates realistic 3D scenes.", + "myCamera.frustum() changes the camera’s perspective by changing its viewing frustum. The frustum is the volume of space that’s visible to the camera. The frustum’s shape is a pyramid with its top cut off. The camera is placed where the top of the pyramid should be and points towards the base of the pyramid. It views everything within the frustum.", + "The first four parameters, left, right, bottom, and top, set the coordinates of the frustum’s sides, bottom, and top. For example, calling myCamera.frustum(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and 400 pixels tall. By default, these coordinates are set based on the sketch’s width and height, as in myCamera.frustum(-width / 20, width / 20, height / 20, -height / 20).", + "The last two parameters, near and far, set the distance of the frustum’s near and far plane from the camera. For example, calling myCamera.frustum(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000 pixels from the camera. By default, near is set to 0.1 * 800, which is 1/10th the default distance between the camera and the origin. far is set to 10 * 800, which is 10 times the default distance between the camera and the origin." + ], + "params": { + "left": "Number: (Optional) x-coordinate of the frustum’s left plane. Defaults to -width / 20.", + "right": "Number: (Optional) x-coordinate of the frustum’s right plane. Defaults to width / 20.", + "bottom": "Number: (Optional) y-coordinate of the frustum’s bottom plane. Defaults to height / 20.", + "top": "Number: (Optional) y-coordinate of the frustum’s top plane. Defaults to -height / 20.", + "near": "Number: (Optional) z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.", + "far": "Number: (Optional) z-coordinate of the frustum’s far plane. Defaults to 10 * 800." + } }, "pan": { "description": [ - "Panning rotates the camera view to the left and right." + "Rotates the camera left and right.", + "Panning rotates the camera without changing its position. The rotation happens in the camera’s \"local\" space.", + "The parameter, angle, is the angle the camera should rotate. Passing a positive angle, as in myCamera.pan(0.001), rotates the camera to the right. Passing a negative angle, as in myCamera.pan(-0.001), rotates the camera to the left.", + "Note: Angles are interpreted based on the current angleMode()." ], "params": { - "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)." + "angle": "Number: amount to rotate in the current angleMode()." } }, "tilt": { "description": [ - "Tilting rotates the camera view up and down." + "Rotates the camera up and down.", + "Tilting rotates the camera without changing its position. The rotation happens in the camera’s \"local\" space.", + "The parameter, angle, is the angle the camera should rotate. Passing a positive angle, as in myCamera.tilt(0.001), rotates the camera down. Passing a negative angle, as in myCamera.tilt(-0.001), rotates the camera up.", + "Note: Angles are interpreted based on the current angleMode()." ], "params": { - "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)." + "angle": "Number: amount to rotate in the current angleMode()." } }, "lookAt": { "description": [ - "Reorients the camera to look at a position in world space." + "Points the camera at a location.", + "myCamera.lookAt() changes the camera’s orientation without changing its position.", + "The parameters, x, y, and z, are the coordinates in \"world\" space where the camera should point. For example, calling myCamera.lookAt(10, 20, 30) points the camera at the coordinates (10, 20, 30)." ], "params": { - "x": "Number: x position of a point in world space", - "y": "Number: y position of a point in world space", - "z": "Number: z position of a point in world space" + "x": "Number: x-coordinate of the position where the camera should look in \"world\" space.", + "y": "Number: y-coordinate of the position where the camera should look in \"world\" space.", + "z": "Number: z-coordinate of the position where the camera should look in \"world\" space." } }, "camera": { "description": [ - "Sets the camera's position and orientation. Accepts the same parameters as the global camera(). More information on this function can be found there." - ] + "Sets the position and orientation of the camera.", + "myCamera.camera() allows objects to be viewed from different angles. It has nine parameters that are all optional.", + "The first three parameters, x, y, and z, are the coordinates of the camera’s position in \"world\" space. For example, calling myCamera.camera(0, 0, 0) places the camera at the origin (0, 0, 0). By default, the camera is placed at (0, 0, 800).", + "The next three parameters, centerX, centerY, and centerZ are the coordinates of the point where the camera faces in \"world\" space. For example, calling myCamera.camera(0, 0, 0, 10, 20, 30) places the camera at the origin (0, 0, 0) and points it at (10, 20, 30). By default, the camera points at the origin (0, 0, 0).", + "The last three parameters, upX, upY, and upZ are the components of the \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s y-axis. For example, calling myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the origin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector to (0, -1, 0) which is like holding it upside-down. By default, the \"up\" vector is (0, 1, 0)." + ], + "params": { + "x": "Number: (Optional) x-coordinate of the camera. Defaults to 0.", + "y": "Number: (Optional) y-coordinate of the camera. Defaults to 0.", + "z": "Number: (Optional) z-coordinate of the camera. Defaults to 0.", + "centerX": "Number: (Optional) x-coordinate of the point the camera faces. Defaults to 0.", + "centerY": "Number: (Optional) y-coordinate of the point the camera faces. Defaults to 0.", + "centerZ": "Number: (Optional) z-coordinate of the point the camera faces. Defaults to 0.", + "upX": "Number: (Optional) x-component of the camera’s \"up\" vector. Defaults to 0.", + "upY": "Number: (Optional) x-component of the camera’s \"up\" vector. Defaults to 1.", + "upZ": "Number: (Optional) z-component of the camera’s \"up\" vector. Defaults to 0." + } }, "move": { "description": [ - "Move camera along its local axes while maintaining current camera orientation." + "Moves the camera along its \"local\" axes without changing its orientation.", + "The parameters, x, y, and z, are the distances the camera should move. For example, calling myCamera.move(10, 20, 30) moves the camera 10 pixels to the right, 20 pixels down, and 30 pixels backward in its \"local\" space." ], "params": { - "x": "Number: amount to move along camera's left-right axis", - "y": "Number: amount to move along camera's up-down axis", - "z": "Number: amount to move along camera's forward-backward axis" + "x": "Number: distance to move along the camera’s \"local\" x-axis.", + "y": "Number: distance to move along the camera’s \"local\" y-axis.", + "z": "Number: distance to move along the camera’s \"local\" z-axis." } }, "setPosition": { "description": [ - "Set camera position in world-space while maintaining current camera orientation." + "Sets the camera’s position in \"world\" space without changing its orientation.", + "The parameters, x, y, and z, are the coordinates where the camera should be placed. For example, calling myCamera.setPosition(10, 20, 30) places the camera at coordinates (10, 20, 30) in \"world\" space." ], "params": { - "x": "Number: x position of a point in world space", - "y": "Number: y position of a point in world space", - "z": "Number: z position of a point in world space" + "x": "Number: x-coordinate in \"world\" space.", + "y": "Number: y-coordinate in \"world\" space.", + "z": "Number: z-coordinate in \"world\" space." } }, "set": { "description": [ - "Copies information about the argument camera's view and projection to the target camera. If the target camera is active, it will be reflected on the screen." + "Sets the camera’s position, orientation, and projection by copying another camera.", + "The parameter, cam, is the p5.Camera object to copy. For example, calling cam2.set(cam1) will set cam2 using cam1’s configuration." ], "params": { - "cam": "p5.Camera: source camera" + "cam": "p5.Camera: camera to copy." } }, "slerp": { "description": [ - "For the cameras cam0 and cam1 with the given arguments, their view are combined with the parameter amt that represents the quantity, and the obtained view is applied. For example, if cam0 is looking straight ahead and cam1 is looking straight to the right and amt is 0.5, the applied camera will look to the halfway between front and right. If the applied camera is active, the applied result will be reflected on the screen. When applying this function, all cameras involved must have exactly the same projection settings. For example, if one is perspective, ortho, frustum, the other two must also be perspective, ortho, frustum respectively. However, if all cameras have ortho settings, interpolation is possible if the ratios of left, right, top and bottom are equal to each other. For example, when it is changed by orbitControl()." + "Sets the camera’s position and orientation to values that are in-between those of two other cameras.", + "myCamera.slerp() uses spherical linear interpolation to calculate a position and orientation that’s in-between two other cameras. Doing so is helpful for transitioning smoothly between two perspectives.", + "The first two parameters, cam0 and cam1, are the p5.Camera objects that should be used to set the current camera.", + "The third parameter, amt, is the amount to interpolate between cam0 and cam1. 0.0 keeps the camera’s position and orientation equal to cam0’s, 0.5 sets them halfway between cam0’s and cam1’s , and 1.0 sets the position and orientation equal to cam1’s.", + "For example, calling myCamera.slerp(cam0, cam1, 0.1) sets cam’s position and orientation very close to cam0’s. Calling myCamera.slerp(cam0, cam1, 0.9) sets cam’s position and orientation very close to cam1’s.", + "Note: All of the cameras must use the same projection." ], "params": { - "cam0": "p5.Camera: first p5.Camera", - "cam1": "p5.Camera: second p5.Camera", - "amt": "Number: amount to use for interpolation during slerp" + "cam0": "p5.Camera: first camera.", + "cam1": "p5.Camera: second camera.", + "amt": "Number: amount of interpolation between 0.0 (cam0) and 1.0 (cam1)." } } }, @@ -6483,32 +7021,38 @@ }, "p5.Shader": { "description": [ - "Shader class for WEBGL Mode" + "A class to describe a shader program.", + "Each p5.Shader object contains a shader program that runs on the graphics processing unit (GPU). Shaders can process many pixels or vertices at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch.", + "A shader program consists of two files, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color. Once the p5.Shader object is created, it can be used with the shader() function, as in shader(myShader).", + "Note: createShader(), createFilterShader(), and loadShader() are the recommended ways to create an instance of this class." ], "params": { - "renderer": "p5.RendererGL: an instance of p5.RendererGL that will provide the GL context for this new p5.Shader", - "vertSrc": "String: source code for the vertex shader (as a string)", - "fragSrc": "String: source code for the fragment shader (as a string)" + "renderer": "p5.RendererGL: WebGL context for this shader.", + "vertSrc": "String: source code for the vertex shader program.", + "fragSrc": "String: source code for the fragment shader program." }, "copyToContext": { "description": [ - "Shaders belong to the main canvas or a p5.Graphics. Once they are compiled, they can only be used in the context they were compiled on.", - "Use this method to make a new copy of a shader that gets compiled on a different context." + "Copies the shader from one drawing context to another.", + "Each p5.Shader object must be compiled by calling shader() before it can run. Compilation happens in a drawing context which is usually the main canvas or an instance of p5.Graphics. A shader can only be used in the context where it was compiled. The copyToContext() method compiles the shader again and copies it to another drawing context where it can be reused.", + "The parameter, context, is the drawing context where the shader will be used. The shader can be copied to an instance of p5.Graphics, as in myShader.copyToContext(pg). The shader can also be copied from a p5.Graphics object to the main canvas using the window variable, as in myShader.copyToContext(window).", + "Note: A p5.Shader object created with createShader(), createFilterShader(), or loadShader() can be used directly with a p5.Framebuffer object created with createFramebuffer(). Both objects have the same context as the main canvas." ], - "returns": "p5.Shader: A new shader on the target context.", + "returns": "p5.Shader: new shader compiled for the target context.", "params": { - "context": "p5|p5.Graphics: The graphic or instance to copy this shader to. Pass window if you need to copy to the main canvas." + "context": "p5|p5.Graphics: WebGL context for the copied shader." } }, "setUniform": { "description": [ - "Used to set the uniforms of a p5.Shader object.", - "Uniforms are used as a way to provide shader programs (which run on the GPU) with values from a sketch (which runs on the CPU).", - "Here are some examples of uniforms you can make:
            • booleans
              • Example: setUniform('x', true) becomes uniform float x with the value 1.0
            • numbers
              • Example: setUniform('x', -2) becomes uniform float x with the value -2.0
            • arrays of numbers
              • Example: setUniform('x', [0, 0.5, 1]) becomes uniform vec3 x with the value vec3(0.0, 0.5, 1.0)
            • a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture
              • Example: setUniform('x', img) becomes uniform sampler2D x
            " + "Sets the shader’s uniform (global) variables.", + "Shader programs run on the computer’s graphics processing unit (GPU). They live in part of the computer’s memory that’s completely separate from the sketch that runs them. Uniforms are global variables within a shader program. They provide a way to pass values from a sketch running on the CPU to a shader program running on the GPU.", + "The first parameter, uniformName, is a string with the uniform’s name. For the shader above, uniformName would be 'r'.", + "The second parameter, data, is the value that should be used to set the uniform. For example, calling myShader.setUniform('r', 0.5) would set the r uniform in the shader above to 0.5. data should match the uniform’s type. Numbers, strings, booleans, arrays, and many types of images can all be passed to a shader with setUniform()." ], "params": { - "uniformName": "String: the name of the uniform. Must correspond to the name used in the vertex and fragment shaders", - "data": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture: The value to assign to the uniform. This can be a boolean (true/false), a number, an array of numbers, or an image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)" + "uniformName": "String: name of the uniform. Must match the name used in the vertex and fragment shaders.", + "data": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture: value to assign to the uniform. Must match the uniform’s data type." } } }, diff --git a/src/templates/pages/reference/data.json b/src/templates/pages/reference/data.json index 9ad932a1a3..55b6ccfd9b 100644 --- a/src/templates/pages/reference/data.json +++ b/src/templates/pages/reference/data.json @@ -2,7 +2,7 @@ "project": { "name": "p5", "description": "[![npm version](https://badge.fury.io/js/p5.svg)](https://www.npmjs.com/package/p5)", - "version": "1.9.2", + "version": "1.9.3", "url": "https://github.com/processing/p5.js#readme" }, "files": { @@ -299,7 +299,6 @@ "classes": {}, "fors": { "p5": 1, - "JSON": 1, "console": 1 }, "namespaces": {} @@ -1143,7 +1142,7 @@ "namespaces": {}, "module": "DOM", "file": "src/dom/dom.js", - "line": 5456, + "line": 5463, "description": "

            The web is much more than just canvas and the DOM functionality makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.\nThere is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.

            \n

            See tutorial: beyond the canvas\nfor more info on how to use this library.

            \n", "requires": [ "p5" @@ -1180,12 +1179,10 @@ "submodules": {}, "elements": {}, "classes": { - "JSON": 1, "console": 1 }, "fors": { "p5": 1, - "JSON": 1, "console": 1 }, "namespaces": {}, @@ -1860,11 +1857,11 @@ "module": "3D", "namespace": "", "file": "src/webgl/p5.Camera.js", - "line": 511, + "line": 723, "requires": [ "core" ], - "description": "

            This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.

            \n

            New p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.

            \n

            Note:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.

            \n

            The camera object properties\neyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\ncreateCamera()

            \n" + "description": "

            A class to describe a camera for viewing a 3D sketch.

            \n

            Each p5.Camera object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.

            \n

            In WebGL mode, the default camera is a p5.Camera object that can be\ncontrolled with the camera(),\nperspective(),\northo(), and\nfrustum() functions. Additional cameras can be\ncreated with createCamera() and activated\nwith setCamera().

            \n

            Note: p5.Camera’s methods operate in two coordinate systems:

            \n
              \n
            • The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling myCamera.setPosition() places the camera in 3D space using\n\"world\" coordinates.
              • \n
            • The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\nmyCamera.move() moves the camera along its own axes.
              • \n
            \n" }, "p5.sound": { "name": "p5.sound", @@ -2120,18 +2117,6 @@ } ] }, - "JSON": { - "name": "JSON", - "shortname": "JSON", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "Foundation", - "submodule": "Foundation", - "namespace": "" - }, "console": { "name": "console", "shortname": "console", @@ -2205,7 +2190,7 @@ "submodule": "DOM", "namespace": "", "file": "src/dom/dom.js", - "line": 4073, + "line": 4080, "description": "

            A class to handle audio and video.

            \n

            p5.MediaElement extends p5.Element with\nmethods to handle audio and video. p5.MediaElement objects are created by\ncalling createVideo,\ncreateAudio, and\ncreateCapture.

            \n", "is_constructor": 1, "params": [ @@ -2232,7 +2217,7 @@ "submodule": "DOM", "namespace": "", "file": "src/dom/dom.js", - "line": 5456, + "line": 5463, "description": "

            A class to describe a file.

            \n

            p5.File objects are used by\nmyElement.drop() and\ncreated by\ncreateFileInput.

            \n", "is_constructor": 1, "params": [ @@ -2455,8 +2440,8 @@ "submodule": "Camera", "namespace": "", "file": "src/webgl/p5.Camera.js", - "line": 511, - "description": "

            This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.

            \n

            New p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.

            \n

            Note:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.

            \n

            The camera object properties\neyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\ncreateCamera()

            \n", + "line": 723, + "description": "

            A class to describe a camera for viewing a 3D sketch.

            \n

            Each p5.Camera object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.

            \n

            In WebGL mode, the default camera is a p5.Camera object that can be\ncontrolled with the camera(),\nperspective(),\northo(), and\nfrustum() functions. Additional cameras can be\ncreated with createCamera() and activated\nwith setCamera().

            \n

            Note: p5.Camera’s methods operate in two coordinate systems:

            \n
              \n
            • The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling myCamera.setPosition() places the camera in 3D space using\n\"world\" coordinates.
              • \n
            • The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\nmyCamera.move() moves the camera along its own axes.
              • \n
            \n", "params": [ { "name": "rendererGL", @@ -2465,9 +2450,8 @@ } ], "example": [ - "\n
            \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial pan angle\n cam.pan(-0.8);\n describe(\n 'camera view pans left and right across a series of rotating 3D boxes.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            " - ], - "alt": "camera view pans left and right across a series of rotating 3D boxes." + "\n
            \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn the camera left and right, called \"panning\".\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " + ] }, "p5.Framebuffer": { "name": "p5.Framebuffer", @@ -2546,24 +2530,27 @@ "namespace": "", "file": "src/webgl/p5.Shader.js", "line": 11, - "description": "

            Shader class for WEBGL Mode

            \n", + "description": "

            A class to describe a shader program.

            \n

            Each p5.Shader object contains a shader program that runs on the graphics\nprocessing unit (GPU). Shaders can process many pixels or vertices at the\nsame time, making them fast for many graphics tasks. They’re written in a\nlanguage called\nGLSL\nand run along with the rest of the code in a sketch.

            \n

            A shader program consists of two files, a vertex shader and a fragment\nshader. The vertex shader affects where 3D geometry is drawn on the screen\nand the fragment shader affects color. Once the p5.Shader object is\ncreated, it can be used with the shader()\nfunction, as in shader(myShader).

            \n

            Note: createShader(),\ncreateFilterShader(), and\nloadShader() are the recommended ways to\ncreate an instance of this class.

            \n", "is_constructor": 1, "params": [ { "name": "renderer", - "description": "

            an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader

            \n", + "description": "

            WebGL context for this shader.

            \n", "type": "p5.RendererGL" }, { "name": "vertSrc", - "description": "

            source code for the vertex shader (as a string)

            \n", + "description": "

            source code for the vertex shader program.

            \n", "type": "String" }, { "name": "fragSrc", - "description": "

            source code for the fragment shader (as a string)

            \n", + "description": "

            source code for the fragment shader program.

            \n", "type": "String" } + ], + "example": [ + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            " ] }, "p5.sound": { @@ -5623,14 +5610,13 @@ { "file": "src/core/shape/curves.js", "line": 13, - "description": "

            Draws a cubic Bezier curve on the screen. These curves are defined by a\nseries of anchor and control points. The first two parameters specify\nthe first anchor point and the last two parameters specify the other\nanchor point, which become the first and last points on the curve. The\nmiddle parameters specify the two control points which define the shape\nof the curve. Approximately speaking, control points \"pull\" the curve\ntowards them.

            \n

            Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also curve().

            \n", + "description": "

            Draws a Bézier curve.

            \n

            Bézier curves can form shapes and curves that slope gently. They're defined\nby two anchor points and two control points. Bézier curves provide more\ncontrol than the spline curves created with the\ncurve() function.

            \n

            The first two parameters, x1 and y1, set the first anchor point. The\nfirst anchor point is where the curve starts.

            \n

            The next four parameters, x2, y2, x3, and y3, set the two control\npoints. The control points \"pull\" the curve towards them.

            \n

            The seventh and eighth parameters, x4 and y4, set the last anchor\npoint. The last anchor point is where the curve ends.

            \n

            Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezier() has twelve arguments because each point has x-, y-,\nand z-coordinates.

            \n", "itemtype": "method", "name": "bezier", "chainable": 1, "example": [ - "\n
            \n\nnoFill();\nstroke(255, 102, 0);\nline(85, 20, 10, 10);\nline(90, 90, 15, 80);\nstroke(0, 0, 0);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n
            \n\n
            \n\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
            \n\n
            \n\n// Click the mouse near the red dot in the top-left corner\n// and drag to change the curve's shape.\n\nlet x2 = 10;\nlet y2 = 10;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, x2, y2, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, x2, y2);\n line(15, 80, 90, 90);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n bezier(50, 60, 5, 15, 95, 15, 50, 60);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);\n\n // Draw the balloon string.\n line(0, 0, 0, 0, 20, 0);\n}\n\n
            " ], - "alt": "stretched black s-shape in center with orange lines extending from end points.\na white colored curve on black background from the upper-right corner to the lower right corner.", "class": "p5", "module": "Shape", "submodule": "Curves", @@ -5640,49 +5626,49 @@ "params": [ { "name": "x1", - "description": "

            x-coordinate for the first anchor point

            \n", + "description": "

            x-coordinate of the first anchor point.

            \n", "type": "Number" }, { "name": "y1", - "description": "

            y-coordinate for the first anchor point

            \n", + "description": "

            y-coordinate of the first anchor point.

            \n", "type": "Number" }, { "name": "x2", - "description": "

            x-coordinate for the first control point

            \n", + "description": "

            x-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "y2", - "description": "

            y-coordinate for the first control point

            \n", + "description": "

            y-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "x3", - "description": "

            x-coordinate for the second control point

            \n", + "description": "

            x-coordinate of the second control point.

            \n", "type": "Number" }, { "name": "y3", - "description": "

            y-coordinate for the second control point

            \n", + "description": "

            y-coordinate of the second control point.

            \n", "type": "Number" }, { "name": "x4", - "description": "

            x-coordinate for the second anchor point

            \n", + "description": "

            x-coordinate of the second anchor point.

            \n", "type": "Number" }, { "name": "y4", - "description": "

            y-coordinate for the second anchor point

            \n", + "description": "

            y-coordinate of the second anchor point.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 62, + "line": 191, "params": [ { "name": "x1", @@ -5696,7 +5682,7 @@ }, { "name": "z1", - "description": "

            z-coordinate for the first anchor point

            \n", + "description": "

            z-coordinate of the first anchor point.

            \n", "type": "Number" }, { @@ -5711,7 +5697,7 @@ }, { "name": "z2", - "description": "

            z-coordinate for the first control point

            \n", + "description": "

            z-coordinate of the first control point.

            \n", "type": "Number" }, { @@ -5726,7 +5712,7 @@ }, { "name": "z3", - "description": "

            z-coordinate for the second control point

            \n", + "description": "

            z-coordinate of the second control point.

            \n", "type": "Number" }, { @@ -5741,7 +5727,7 @@ }, { "name": "z4", - "description": "

            z-coordinate for the second anchor point

            \n", + "description": "

            z-coordinate of the second anchor point.

            \n", "type": "Number" } ], @@ -5751,179 +5737,175 @@ }, { "file": "src/core/shape/curves.js", - "line": 92, - "description": "

            Sets the resolution at which Bezier's curve is displayed. The default value is 20.

            \n

            Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.

            \n", + "line": 221, + "description": "

            Sets the number of segments used to draw Bézier curves in WebGL mode.

            \n

            In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.

            \n

            The parameter, detail, is the number of segments to use while drawing a\nBézier curve. For example, calling bezierDetail(5) will use 5 segments to\ndraw curves with the bezier() function. By\ndefault,detail is 20.

            \n

            Note: bezierDetail() has no effect in 2D mode.

            \n", "itemtype": "method", "name": "bezierDetail", "params": [ { "name": "detail", - "description": "

            resolution of the curves

            \n", + "description": "

            number of segments to use. Defaults to 20.

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n bezierDetail(5);\n}\n\nfunction draw() {\n background(200);\n bezier(\n -40, -40, 0,\n 90, -40, 0,\n -90, 40, 0,\n 40, 40, 0\n );\n}\n\n
            " + "\n
            \n\n// Draw the original curve.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
            \n\n
            \n\n// Draw the curve with less detail.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 5.\n bezierDetail(5);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(35, -30, 0);\n point(-35, 30, 0);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-40, -40, 0);\n point(40, 40, 0);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(35, -30, -40, -40);\n line(-35, 30, 40, 40);\n\n describe(\n 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
            " ], - "alt": "stretched black s-shape with a low level of bezier detail", "class": "p5", "module": "Shape", "submodule": "Curves" }, { "file": "src/core/shape/curves.js", - "line": 131, - "description": "

            Given the x or y co-ordinate values of control and anchor points of a bezier\ncurve, it evaluates the x or y coordinate of the bezier at position t. The\nparameters a and d are the x or y coordinates of first and last points on the\ncurve while b and c are of the control points.The final parameter t is the\nposition of the resultant point which is given between 0 and 1.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a bezier curve at t.

            \n", + "line": 324, + "description": "

            Calculates coordinates along a Bézier curve using interpolation.

            \n

            bezierPoint() calculates coordinates along a Bézier curve using the\nanchor and control points. It expects points in the same order as the\nbezier() function. bezierPoint() works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.

            \n

            The first parameter, a, is the coordinate of the first anchor point.

            \n

            The second and third parameters, b and c, are the coordinates of the\ncontrol points.

            \n

            The fourth parameter, d, is the coordinate of the last anchor point.

            \n

            The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

            \n", "itemtype": "method", "name": "bezierPoint", "params": [ { "name": "a", - "description": "

            coordinate of first point on the curve

            \n", + "description": "

            coordinate of first control point.

            \n", "type": "Number" }, { "name": "b", - "description": "

            coordinate of first control point

            \n", + "description": "

            coordinate of first anchor point.

            \n", "type": "Number" }, { "name": "c", - "description": "

            coordinate of second control point

            \n", + "description": "

            coordinate of second anchor point.

            \n", "type": "Number" }, { "name": "d", - "description": "

            coordinate of second point on the curve

            \n", + "description": "

            coordinate of second control point.

            \n", "type": "Number" }, { "name": "t", - "description": "

            value between 0 and 1

            \n", + "description": "

            amount to interpolate between 0 and 1.

            \n", "type": "Number" } ], "return": { - "description": "the value of the Bezier at position t", + "description": "coordinate of the point on the curve.", "type": "Number" }, "example": [ - "\n
            \n\nnoFill();\nlet x1 = 85,\n x2 = 10,\n x3 = 90,\n x4 = 15;\nlet y1 = 20,\n y2 = 10,\n y3 = 90,\n y4 = 80;\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\nfill(255);\nlet steps = 10;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n circle(x, y, 5);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top-right.\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom-left.\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Draw the curve.\n noFill();\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n\n
            " ], - "alt": "10 points plotted on a given bezier at equal distances.", "class": "p5", "module": "Shape", "submodule": "Curves" }, { "file": "src/core/shape/curves.js", - "line": 186, - "description": "

            Evaluates the tangent to the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.

            \n", + "line": 450, + "description": "

            Calculates coordinates along a line that's tangent to a Bézier curve.

            \n

            Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.

            \n

            bezierTangent() calculates coordinates along a tangent line using the\nBézier curve's anchor and control points. It expects points in the same\norder as the bezier() function. bezierTangent()\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.

            \n

            The first parameter, a, is the coordinate of the first anchor point.

            \n

            The second and third parameters, b and c, are the coordinates of the\ncontrol points.

            \n

            The fourth parameter, d, is the coordinate of the last anchor point.

            \n

            The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

            \n", "itemtype": "method", "name": "bezierTangent", "params": [ { "name": "a", - "description": "

            coordinate of first point on the curve

            \n", + "description": "

            coordinate of first anchor point.

            \n", "type": "Number" }, { "name": "b", - "description": "

            coordinate of first control point

            \n", + "description": "

            coordinate of first control point.

            \n", "type": "Number" }, { "name": "c", - "description": "

            coordinate of second control point

            \n", + "description": "

            coordinate of second control point.

            \n", "type": "Number" }, { "name": "d", - "description": "

            coordinate of second point on the curve

            \n", + "description": "

            coordinate of second anchor point.

            \n", "type": "Number" }, { "name": "t", - "description": "

            value between 0 and 1

            \n", + "description": "

            amount to interpolate between 0 and 1.

            \n", "type": "Number" } ], "return": { - "description": "the tangent at position t", + "description": "coordinate of a point on the tangent line.", "type": "Number" }, "example": [ - "\n
            \n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nlet steps = 6;\nfill(255);\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n // Get the location of the point\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n // Get the tangent points\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n // Calculate an angle from the tangent points\n let a = atan2(ty, tx);\n a += PI;\n stroke(255, 102, 0);\n line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\n // The following line of code makes a line\n // inverse of the above line\n //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n stroke(0);\n ellipse(x, y, 5, 5);\n}\n\n
            \n\n
            \n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nstroke(255, 102, 0);\nlet steps = 16;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n let a = atan2(ty, tx);\n a -= HALF_PI;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top-right circle.\n stroke(0);\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top-right tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);\n let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom-left circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom-left tangent.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'\n );\n}\n\n
            " ], - "alt": "s-shaped line with 6 short orange lines showing the tangents at those points.\ns-shaped line with 6 short orange lines showing lines coming out the underside of the bezier.", "class": "p5", "module": "Shape", "submodule": "Curves" }, { "file": "src/core/shape/curves.js", - "line": 265, - "description": "

            Draws a curved line on the screen between two points, given as the\nmiddle four parameters. The first two parameters are a control point, as\nif the curve came from this point even though it's not drawn. The last\ntwo parameters similarly describe the other control point.

            \nLonger curves can be created by putting a series of curve() functions\ntogether or using curveVertex(). An additional function called\ncurveTightness() provides control for the visual quality of the curve.\nThe curve() function is an implementation of Catmull-Rom splines.

            \n", + "line": 570, + "description": "

            Draws a curve using a Catmull-Rom spline.

            \n

            Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points.

            \n

            The first two parameters, x1 and y1, set the first control point. This\npoint isn’t drawn and can be thought of as the curve’s starting point.

            \n

            The next four parameters, x2, y2, x3, and y3, set the two anchor\npoints. The anchor points are the start and end points of the curve’s\nvisible segment.

            \n

            The seventh and eighth parameters, x4 and y4, set the last control\npoint. This point isn’t drawn and can be thought of as the curve’s ending\npoint.

            \n

            Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\ncurve() has twelve arguments because each point has x-, y-, and\nz-coordinates.

            \n", "itemtype": "method", "name": "curve", "chainable": 1, "example": [ - "\n
            \n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\nstroke(0);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nstroke(255, 102, 0);\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\n\n
            \n\n
            \n\n// Define the curve points as JavaScript objects\nlet p1 = { x: 5, y: 26 };\nlet p2 = { x: 73, y: 24 };\nlet p3 = { x: 73, y: 61 };\nlet p4 = { x: 15, y: 65 };\nnoFill();\nstroke(255, 102, 0);\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\nstroke(0);\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\nstroke(255, 102, 0);\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\n\n
            \n\n
            \n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\nstroke(0);\ncurve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\nstroke(255, 102, 0);\ncurve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
            \n\n
            \n\nlet x1 = 5;\nlet y1 = 26;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(x1, y1, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(x1, y1, x1, y1, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(15, 65);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n curve(-150, 275, 50, 60, 50, 60, 250, 275);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);\n\n // Draw the balloon string.\n line(0, 10, 0, 0, 30, 0);\n}\n\n
            " ], - "alt": "horseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\ncurving black and orange lines.", "class": "p5", "module": "Shape", "submodule": "Curves", "overloads": [ { - "line": 265, + "line": 570, "params": [ { "name": "x1", - "description": "

            x-coordinate for the beginning control point

            \n", + "description": "

            x-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "y1", - "description": "

            y-coordinate for the beginning control point

            \n", + "description": "

            y-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "x2", - "description": "

            x-coordinate for the first point

            \n", + "description": "

            x-coordinate of the first anchor point.

            \n", "type": "Number" }, { "name": "y2", - "description": "

            y-coordinate for the first point

            \n", + "description": "

            y-coordinate of the first anchor point.

            \n", "type": "Number" }, { "name": "x3", - "description": "

            x-coordinate for the second point

            \n", + "description": "

            x-coordinate of the second anchor point.

            \n", "type": "Number" }, { "name": "y3", - "description": "

            y-coordinate for the second point

            \n", + "description": "

            y-coordinate of the second anchor point.

            \n", "type": "Number" }, { "name": "x4", - "description": "

            x-coordinate for the ending control point

            \n", + "description": "

            x-coordinate of the second control point.

            \n", "type": "Number" }, { "name": "y4", - "description": "

            y-coordinate for the ending control point

            \n", + "description": "

            y-coordinate of the second control point.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 333, + "line": 746, "params": [ { "name": "x1", @@ -5937,7 +5919,7 @@ }, { "name": "z1", - "description": "

            z-coordinate for the beginning control point

            \n", + "description": "

            z-coordinate of the first control point.

            \n", "type": "Number" }, { @@ -5952,7 +5934,7 @@ }, { "name": "z2", - "description": "

            z-coordinate for the first point

            \n", + "description": "

            z-coordinate of the first anchor point.

            \n", "type": "Number" }, { @@ -5967,7 +5949,7 @@ }, { "name": "z3", - "description": "

            z-coordinate for the second point

            \n", + "description": "

            z-coordinate of the second anchor point.

            \n", "type": "Number" }, { @@ -5982,7 +5964,7 @@ }, { "name": "z4", - "description": "

            z-coordinate for the ending control point

            \n", + "description": "

            z-coordinate of the second control point.

            \n", "type": "Number" } ], @@ -5992,87 +5974,85 @@ }, { "file": "src/core/shape/curves.js", - "line": 359, - "description": "

            Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.

            \n

            This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.

            \n", + "line": 772, + "description": "

            Sets the number of segments used to draw spline curves in WebGL mode.

            \n

            In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.

            \n

            The parameter, detail, is the number of segments to use while drawing a\nspline curve. For example, calling curveDetail(5) will use 5 segments to\ndraw curves with the curve() function. By\ndefault,detail is 20.

            \n

            Note: curveDetail() has no effect in 2D mode.

            \n", "itemtype": "method", "name": "curveDetail", "params": [ { "name": "resolution", - "description": "

            resolution of the curves

            \n", + "description": "

            number of segments to use. Defaults to 20.

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n curveDetail(5);\n}\nfunction draw() {\n background(200);\n\n curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 3.\n curveDetail(3);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);\n curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(23, -26);\n point(23, 11);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-45, -24);\n point(-35, 15);\n\n describe(\n 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
            " ], - "alt": "white arch shape with a low level of curve detail.", "class": "p5", "module": "Shape", "submodule": "Curves" }, { "file": "src/core/shape/curves.js", - "line": 399, - "description": "

            Modifies the quality of forms created with curve()\nand curveVertex().The parameter tightness\ndetermines how the curve fits to the vertex points. The value 0.0 is the\ndefault value for tightness (this value defines the curves to be Catmull-Rom\nsplines) and the value 1.0 connects all the points with straight lines.\nValues within the range -5.0 and 5.0 will deform the curves but will leave\nthem recognizable and as values increase in magnitude, they will continue to deform.

            \n", + "line": 875, + "description": "

            Adjusts the way curve() and\ncurveVertex() draw.

            \n

            Spline curves are like cables that are attached to a set of points.\ncurveTightness() adjusts how tightly the cable is attached to the points.

            \n

            The parameter, tightness, determines how the curve fits to the vertex\npoints. By default, tightness is set to 0. Setting tightness to 1,\nas in curveTightness(1), connects the curve's points using straight\nlines. Values in the range from –5 to 5 deform curves while leaving them\nrecognizable.

            \n", "itemtype": "method", "name": "curveTightness", "params": [ { "name": "amount", - "description": "

            amount of deformation from the original vertices

            \n", + "description": "

            amount of tightness.

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\n// Move the mouse left and right to see the curve change\nfunction setup() {\n createCanvas(100, 100);\n noFill();\n}\n\nfunction draw() {\n background(204);\n let t = map(mouseX, 0, width, -5, 5);\n curveTightness(t);\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n\n
            " + "\n
            \n\n// Move the mouse left and right to see the curve change.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');\n}\n\nfunction draw() {\n background(200);\n\n // Set the curve's tightness using the mouse.\n let t = map(mouseX, 0, 100, -5, 5, true);\n curveTightness(t);\n\n // Draw the curve.\n noFill();\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n\n
            " ], - "alt": "Line shaped like right-facing arrow,points move with mouse-x and warp shape.", "class": "p5", "module": "Shape", "submodule": "Curves" }, { "file": "src/core/shape/curves.js", - "line": 445, - "description": "

            Evaluates the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are control points\nof the curve, and b and c are the start and end points of the curve.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a curve at t.

            \n", + "line": 930, + "description": "

            Calculates coordinates along a spline curve using interpolation.

            \n

            curvePoint() calculates coordinates along a spline curve using the\nanchor and control points. It expects points in the same order as the\ncurve() function. curvePoint() works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.

            \n

            The first parameter, a, is the coordinate of the first control point.

            \n

            The second and third parameters, b and c, are the coordinates of the\nanchor points.

            \n

            The fourth parameter, d, is the coordinate of the last control point.

            \n

            The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

            \n", "itemtype": "method", "name": "curvePoint", "params": [ { "name": "a", - "description": "

            coordinate of first control point of the curve

            \n", + "description": "

            coordinate of first anchor point.

            \n", "type": "Number" }, { "name": "b", - "description": "

            coordinate of first point

            \n", + "description": "

            coordinate of first control point.

            \n", "type": "Number" }, { "name": "c", - "description": "

            coordinate of second point

            \n", + "description": "

            coordinate of second control point.

            \n", "type": "Number" }, { "name": "d", - "description": "

            coordinate of second control point

            \n", + "description": "

            coordinate of second anchor point.

            \n", "type": "Number" }, { "name": "t", - "description": "

            value between 0 and 1

            \n", + "description": "

            amount to interpolate between 0 and 1.

            \n", "type": "Number" } ], "return": { - "description": "Curve value at position t", + "description": "coordinate of a point on the curve.", "type": "Number" }, "example": [ - "\n
            \n\nnoFill();\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nfill(255);\nellipseMode(CENTER);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 5, 73, 73, t);\n let y = curvePoint(26, 26, 24, 61, t);\n ellipse(x, y, 5, 5);\n x = curvePoint(5, 73, 73, 15, t);\n y = curvePoint(26, 24, 61, 65, t);\n ellipse(x, y, 5, 5);\n}\n\n
            \n\nline hooking down to right-bottom with 13 5×5 white ellipse points" + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top.\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom.\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = curvePoint(x1, x2, x3, x4, t);\n let y = curvePoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -6080,45 +6060,44 @@ }, { "file": "src/core/shape/curves.js", - "line": 494, - "description": "

            Evaluates the tangent to the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points on the curve,\nand b and c are the control points.

            \n", + "line": 1054, + "description": "

            Calculates coordinates along a line that's tangent to a spline curve.

            \n

            Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.

            \n

            curveTangent() calculates coordinates along a tangent line using the\nspline curve's anchor and control points. It expects points in the same\norder as the curve() function. curveTangent()\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.

            \n

            The first parameter, a, is the coordinate of the first control point.

            \n

            The second and third parameters, b and c, are the coordinates of the\nanchor points.

            \n

            The fourth parameter, d, is the coordinate of the last control point.

            \n

            The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

            \n", "itemtype": "method", "name": "curveTangent", "params": [ { "name": "a", - "description": "

            coordinate of first control point

            \n", + "description": "

            coordinate of first control point.

            \n", "type": "Number" }, { "name": "b", - "description": "

            coordinate of first point on the curve

            \n", + "description": "

            coordinate of first anchor point.

            \n", "type": "Number" }, { "name": "c", - "description": "

            coordinate of second point on the curve

            \n", + "description": "

            coordinate of second anchor point.

            \n", "type": "Number" }, { "name": "d", - "description": "

            coordinate of second conrol point

            \n", + "description": "

            coordinate of second control point.

            \n", "type": "Number" }, { "name": "t", - "description": "

            value between 0 and 1

            \n", + "description": "

            amount to interpolate between 0 and 1.

            \n", "type": "Number" } ], "return": { - "description": "the tangent at position t", + "description": "coordinate of a point on the tangent line.", "type": "Number" }, "example": [ - "\n
            \n\nnoFill();\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 73, 73, 15, t);\n let y = curvePoint(26, 24, 61, 65, t);\n //ellipse(x, y, 5, 5);\n let tx = curveTangent(5, 73, 73, 15, t);\n let ty = curveTangent(26, 24, 61, 65, t);\n let a = atan2(ty, tx);\n a -= PI / 2.0;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top circle.\n stroke(0);\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);\n let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black curve on a gray square. A white circle moves back and forth along the curve.'\n );\n}\n\n
            " ], - "alt": "right curving line mid-right of canvas with 7 short lines radiating from it.", "class": "p5", "module": "Shape", "submodule": "Curves" @@ -6126,94 +6105,91 @@ { "file": "src/core/shape/vertex.js", "line": 20, - "description": "

            Use the beginContour() and\nendContour() functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must \"wind\" in the opposite direction\nfrom the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.

            \n

            These functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.

            \n", + "description": "

            Begins creating a hole within a flat shape.

            \n

            The beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices to a negative space and\nendContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().

            \n

            Transformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use\nother shapes, such as ellipse() or\nrect(), between beginContour() and\nendContour().

            \n

            Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.

            \n", "itemtype": "method", "name": "beginContour", "chainable": 1, "example": [ - "\n
            \n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
            " ], - "alt": "white rect and smaller grey rect with red outlines in center of canvas.", "class": "p5", "module": "Shape", "submodule": "Vertex" }, { "file": "src/core/shape/vertex.js", - "line": 71, - "description": "

            Using the beginShape() and endShape() functions allow creating more\ncomplex forms. beginShape() begins recording vertices for a shape and\nendShape() stops recording. The value of the kind parameter tells it which\ntypes of shapes to create from the provided vertices. With no mode\nspecified, the shape can be any irregular polygon.

            \n

            The parameters available for beginShape() are:

            \n

            POINTS\nDraw a series of points

            \n

            LINES\nDraw a series of unconnected line segments (individual lines)

            \n

            TRIANGLES\nDraw a series of separate triangles

            \n

            TRIANGLE_FAN\nDraw a series of connected triangles sharing the first vertex in a fan-like fashion

            \n

            TRIANGLE_STRIP\nDraw a series of connected triangles in strip fashion

            \n

            QUADS\nDraw a series of separate quads

            \n

            QUAD_STRIP\nDraw quad strip using adjacent edges to form the next quad

            \n

            TESS (WEBGL only)\nHandle irregular polygon for filling curve by explicit tessellation

            \n

            After calling the beginShape() function, a series of vertex() commands must follow. To stop\ndrawing the shape, call endShape(). Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.

            \n

            Transformations such as translate(), rotate(), and scale() do not work\nwithin beginShape(). It is also not possible to use other shapes, such as\nellipse() or rect() within beginShape().

            \n", + "line": 129, + "description": "

            Begins adding vertices to a custom shape.

            \n

            The beginShape() and endShape() functions\nallow for creating custom shapes in 2D or 3D. beginShape() begins adding\nvertices to a custom shape and endShape() stops\nadding them.

            \n

            The parameter, kind, sets the kind of shape to make. By default, any\nirregular polygon can be drawn. The available modes for kind are:

            \n
              \n
            • POINTS to draw a series of points.
              • \n
            • LINES to draw a series of unconnected line segments.
              • \n
            • TRIANGLES to draw a series of separate triangles.
              • \n
            • TRIANGLE_FAN to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
              • \n
            • TRIANGLE_STRIP to draw a series of connected triangles in strip fashion.
              • \n
            • QUADS to draw a series of separate quadrilaterals (quads).
              • \n
            • QUAD_STRIP to draw quad strip using adjacent edges to form the next quad.
              • \n
            • TESS to create a filling curve by explicit tessellation (WebGL only).
              • \n
            \n

            After calling beginShape(), shapes can be built by calling\nvertex(),\nbezierVertex(),\nquadraticVertex(), and/or\ncurveVertex(). Calling\nendShape() will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.

            \n

            Transformations such as translate(),\nrotate(), and\nscale() don't work between beginShape() and\nendShape(). It's also not possible to use\nother shapes, such as ellipse() or\nrect(), between beginShape() and\nendShape().

            \n", "itemtype": "method", "name": "beginShape", "params": [ { "name": "kind", - "description": "

            either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS

            \n", + "description": "

            either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.

            \n", "type": "Constant", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
            \n\n
            \n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
            \n\n
            \n\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
            \n\n
            \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
            \n\n
            \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
            \n\n
            \n\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n\n
            \n\n
            \n\nbeginShape(TRIANGLE_STRIP);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nvertex(90, 75);\nendShape();\n\n
            \n\n
            \n\nbeginShape(TRIANGLE_FAN);\nvertex(57.5, 50);\nvertex(57.5, 15);\nvertex(92, 50);\nvertex(57.5, 85);\nvertex(22, 50);\nvertex(57.5, 15);\nendShape();\n\n
            \n\n
            \n\nbeginShape(QUADS);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 75);\nvertex(50, 20);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 75);\nvertex(85, 20);\nendShape();\n\n
            \n\n
            \n\nbeginShape(QUAD_STRIP);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 20);\nvertex(50, 75);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 20);\nvertex(85, 75);\nendShape();\n\n
            \n\n
            \n\nbeginShape(TESS);\nvertex(20, 20);\nvertex(80, 20);\nvertex(80, 40);\nvertex(40, 40);\nvertex(40, 60);\nvertex(80, 60);\nvertex(80, 80);\nvertex(20, 80);\nendShape(CLOSE);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw the vertices (points).\n beginShape(POINTS);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw lines between alternating pairs of vertices.\n beginShape(LINES);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two horizontal black lines on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three black lines form a sideways U shape on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A black outline of a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLES);\n\n // Left triangle.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n\n // Right triangle.\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white triangles drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLE_STRIP);\n\n // Add vertices.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n vertex(90, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Five white triangles that are interleaved drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles that share their first vertex.\n beginShape(TRIANGLE_FAN);\n\n // Add vertices.\n vertex(57.5, 50);\n vertex(57.5, 15);\n vertex(92, 50);\n vertex(57.5, 85);\n vertex(22, 50);\n vertex(57.5, 15);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four white triangles form a square are drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUADS);\n\n // Left rectangle.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 75);\n vertex(50, 20);\n\n // Right rectangle.\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 75);\n vertex(85, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white rectangles drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUAD_STRIP);\n\n // Add vertices.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 20);\n vertex(50, 75);\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 20);\n vertex(85, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three white rectangles that share edges are drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A blocky C shape drawn in white on a gray background.');\n}\n\n
            \n\n
            \n\n// Click and drag with the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A blocky C shape drawn in red, blue, and green on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n fill('red');\n stroke('red');\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n fill('green');\n stroke('green');\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n fill('blue');\n stroke('blue');\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n}\n\n
            " ], - "alt": "white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20×55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.", "class": "p5", "module": "Shape", "submodule": "Vertex" }, { "file": "src/core/shape/vertex.js", - "line": 297, - "description": "

            Specifies vertex coordinates for Bezier curves. Each call to\nbezierVertex() defines the position of two control points and\none anchor point of a Bezier curve, adding a new segment to a\nline or shape. For WebGL mode bezierVertex() can be used in 2D\nas well as 3D mode. 2D mode expects 6 parameters, while 3D mode\nexpects 9 parameters (including z coordinates).

            \n

            The first time bezierVertex() is used within a beginShape()\ncall, it must be prefaced with a call to vertex() to set the first anchor\npoint. This function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().

            \n", + "line": 543, + "description": "

            Adds a Bézier curve segment to a custom shape.

            \n

            bezierVertex() adds a curved segment to custom shapes. The Bézier curves\nit creates are defined like those made by the\nbezier() function. bezierVertex() must be\ncalled between the\nbeginShape() and\nendShape() functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to vertex() before bezierVertex() can\nbe used.

            \n

            The first four parameters, x2, y2, x3, and y3, set the curve’s two\ncontrol points. The control points \"pull\" the curve towards them.

            \n

            The fifth and sixth parameters, x4, and y4, set the last anchor point.\nThe last anchor point is where the curve ends.

            \n

            Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezierVertex() has eight arguments because each point has x-, y-, and\nz-coordinates.

            \n

            Note: bezierVertex() won’t work when an argument is passed to\nbeginShape().

            \n", "itemtype": "method", "name": "bezierVertex", "chainable": 1, "example": [ - "\n
            \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n\n
            \n\n
            \n\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n}\nfunction draw() {\n orbitControl();\n background(50);\n strokeWeight(4);\n stroke(255);\n point(-25, 30);\n point(25, 30);\n point(25, -30);\n point(-25, -30);\n\n strokeWeight(1);\n noFill();\n\n beginShape();\n vertex(-25, 30);\n bezierVertex(25, 30, 25, -30, -25, -30);\n endShape();\n\n beginShape();\n vertex(-25, 30, 20);\n bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);\n endShape();\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A black C curve on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(80, 0);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, 80, 0);\n line(30, 75, 80, 75);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
            \n\n
            \n\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 0;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(x2, y2, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, x2, y2);\n line(30, 75, 80, 75);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertices.\n bezierVertex(80, 0, 80, 75, 30, 75);\n bezierVertex(50, 80, 60, 25, 30, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A crescent moon shape drawn in white on a gray background.');\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');\n}\n\nfunction draw() {\n background('midnightblue');\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the moons.\n noStroke();\n fill('lemonchiffon');\n\n // Draw the first moon.\n beginShape();\n vertex(-20, -30, 0);\n bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);\n bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);\n endShape();\n\n // Draw the second moon.\n beginShape();\n vertex(-20, -30, -20);\n bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);\n bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);\n endShape();\n}\n\n
            " ], - "alt": "crescent-shaped line in middle of canvas. Points facing left.\nwhite crescent shape in middle of canvas. Points facing left.\ncrescent shape in middle of canvas with another crescent shape on positive z-axis.", "class": "p5", "module": "Shape", "submodule": "Vertex", "overloads": [ { - "line": 297, + "line": 543, "params": [ { "name": "x2", - "description": "

            x-coordinate for the first control point

            \n", + "description": "

            x-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "y2", - "description": "

            y-coordinate for the first control point

            \n", + "description": "

            y-coordinate of the first control point.

            \n", "type": "Number" }, { "name": "x3", - "description": "

            x-coordinate for the second control point

            \n", + "description": "

            x-coordinate of the second control point.

            \n", "type": "Number" }, { "name": "y3", - "description": "

            y-coordinate for the second control point

            \n", + "description": "

            y-coordinate of the second control point.

            \n", "type": "Number" }, { "name": "x4", - "description": "

            x-coordinate for the anchor point

            \n", + "description": "

            x-coordinate of the anchor point.

            \n", "type": "Number" }, { "name": "y4", - "description": "

            y-coordinate for the anchor point

            \n", + "description": "

            y-coordinate of the anchor point.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 379, + "line": 792, "params": [ { "name": "x2", @@ -6227,7 +6203,7 @@ }, { "name": "z2", - "description": "

            z-coordinate for the first control point (for WebGL mode)

            \n", + "description": "

            z-coordinate of the first control point.

            \n", "type": "Number" }, { @@ -6242,7 +6218,7 @@ }, { "name": "z3", - "description": "

            z-coordinate for the second control point (for WebGL mode)

            \n", + "description": "

            z-coordinate of the second control point.

            \n", "type": "Number" }, { @@ -6257,7 +6233,7 @@ }, { "name": "z4", - "description": "

            z-coordinate for the anchor point (for WebGL mode)

            \n", + "description": "

            z-coordinate of the anchor point.

            \n", "type": "Number" } ], @@ -6267,21 +6243,20 @@ }, { "file": "src/core/shape/vertex.js", - "line": 419, - "description": "

            Specifies vertex coordinates for curves. This function may only\nbe used between beginShape() and endShape() and only when there\nis no MODE parameter specified to beginShape().\nFor WebGL mode curveVertex() can be used in 2D as well as 3D mode.\n2D mode expects 2 parameters, while 3D mode expects 3 parameters.

            \n

            The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.

            \n", + "line": 832, + "description": "

            Adds a spline curve segment to a custom shape.

            \n

            curveVertex() adds a curved segment to custom shapes. The spline curves\nit creates are defined like those made by the\ncurve() function. curveVertex() must be called\nbetween the beginShape() and\nendShape() functions.

            \n

            Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points. curveVertex() must be called at\nleast four times between\nbeginShape() and\nendShape() in order to draw a curve:

            \n\nbeginShape();\n\n

            // Add the first control point.\ncurveVertex(84, 91);

            \n

            // Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);

            \n

            // Add the second control point.\ncurveVertex(32, 91);

            \n

            endShape();\n

            \n

            The code snippet above would only draw the curve between the anchor points,\nsimilar to the curve() function. The segments\nbetween the control and anchor points can be drawn by calling\ncurveVertex() with the coordinates of the control points:

            \n\nbeginShape();\n\n

            // Add the first control point and draw a segment to it.\ncurveVertex(84, 91);\ncurveVertex(84, 91);

            \n

            // Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);

            \n

            // Add the second control point.\ncurveVertex(32, 91);

            \n

            // Uncomment the next line to draw the segment to the second control point.\n// curveVertex(32, 91);

            \n

            endShape();\n

            \n

            The first two parameters, x and y, set the vertex’s location. For\nexample, calling curveVertex(10, 10) adds a point to the curve at\n(10, 10).

            \n

            Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\ncurveVertex() has three arguments because each point has x-, y-, and\nz-coordinates. By default, the vertex’s z-coordinate is set to 0.

            \n

            Note: curveVertex() won’t work when an argument is passed to\nbeginShape().

            \n", "itemtype": "method", "name": "curveVertex", "chainable": 1, "example": [ - "\n
            \n\nstrokeWeight(5);\npoint(84, 91);\npoint(68, 19);\npoint(21, 17);\npoint(32, 91);\nstrokeWeight(1);\n\nnoFill();\nbeginShape();\ncurveVertex(84, 91);\ncurveVertex(84, 91);\ncurveVertex(68, 19);\ncurveVertex(21, 17);\ncurveVertex(32, 91);\ncurveVertex(32, 91);\nendShape();\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point.\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'\n );\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'\n );\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\n
            \n\n
            \n\n// Click the mouse near the red dot in the bottom-left corner\n// and drag to change the curve's shape.\n\nlet x1 = 32;\nlet y1 = 91;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(x1, y1);\n curveVertex(x1, y1);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(84, 91);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A ghost shape drawn in white on a gray background.');\n}\n\n
            " ], - "alt": "Upside-down u-shape line, mid canvas. left point extends beyond canvas view.", "class": "p5", "module": "Shape", "submodule": "Vertex", "overloads": [ { - "line": 419, + "line": 832, "params": [ { "name": "x", @@ -6297,7 +6272,7 @@ "chainable": 1 }, { - "line": 464, + "line": 1160, "params": [ { "name": "x", @@ -6311,7 +6286,7 @@ }, { "name": "z", - "description": "

            z-coordinate of the vertex (for WebGL mode)

            \n", + "description": "

            z-coordinate of the vertex.

            \n", "type": "Number", "optional": true } @@ -6322,23 +6297,22 @@ }, { "file": "src/core/shape/vertex.js", - "line": 528, - "description": "

            Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must \"wind\" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.

            \n

            These functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.

            \n", + "line": 1224, + "description": "

            Stops creating a hole within a flat shape.

            \n

            The beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices\nto a negative space and endContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().

            \n

            Transformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use other shapes, such as\nellipse() or rect(),\nbetween beginContour() and endContour().

            \n

            Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.

            \n", "itemtype": "method", "name": "endContour", "chainable": 1, "example": [ - "\n
            \n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
            " ], - "alt": "white rect and smaller grey rect with red outlines in center of canvas.", "class": "p5", "module": "Shape", "submodule": "Vertex" }, { "file": "src/core/shape/vertex.js", - "line": 591, - "description": "

            The endShape() function is the companion to beginShape() and may only be\ncalled after beginShape(). When endShape() is called, all of the image\ndata defined since the previous call to beginShape() is written into the image\nbuffer. The constant CLOSE is the value for the mode parameter to close\nthe shape (to connect the beginning and the end).\nWhen using instancing with endShape() the instancing will not apply to the strokes.\nWhen the count parameter is used with a value greater than 1, it enables instancing for shapes built when in WEBGL mode. Instancing\nis a feature that allows the GPU to efficiently draw multiples of the same shape. It's often used for particle effects or other\ntimes when you need a lot of repetition. In order to take advantage of instancing, you will also need to write your own custom\nshader using the gl_InstanceID keyword. You can read more about instancing\nhere or by working from the example on this\npage.

            \n", + "line": 1344, + "description": "

            Begins adding vertices to a custom shape.

            \n

            The beginShape() and endShape() functions\nallow for creating custom shapes in 2D or 3D.\nbeginShape() begins adding vertices to a\ncustom shape and endShape() stops adding them.

            \n

            The first parameter, mode, is optional. By default, the first and last\nvertices of a shape aren't connected. If the constant CLOSE is passed, as\nin endShape(CLOSE), then the first and last vertices will be connected.

            \n

            The second parameter, count, is also optional. In WebGL mode, it’s more\nefficient to draw many copies of the same shape using a technique called\ninstancing.\nThe count parameter tells WebGL mode how many copies to draw. For\nexample, calling endShape(CLOSE, 400) after drawing a custom shape will\nmake it efficient to draw 400 copies. This feature requires\nwriting a custom shader.

            \n

            After calling beginShape(), shapes can be\nbuilt by calling vertex(),\nbezierVertex(),\nquadraticVertex(), and/or\ncurveVertex(). Calling\nendShape() will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.

            \n

            Transformations such as translate(),\nrotate(), and\nscale() don't work between\nbeginShape() and endShape(). It's also not\npossible to use other shapes, such as ellipse() or\nrect(), between\nbeginShape() and endShape().

            \n", "itemtype": "method", "name": "endShape", "params": [ @@ -6357,57 +6331,54 @@ ], "chainable": 1, "example": [ - "\n
            \n\nnoFill();\n\nbeginShape();\nvertex(20, 20);\nvertex(45, 20);\nvertex(45, 80);\nendShape(CLOSE);\n\nbeginShape();\nvertex(50, 20);\nvertex(75, 20);\nvertex(75, 80);\nendShape();\n\n
            ", - "\n
            \n\nlet fx;\nlet vs = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // copy the instance ID to the fragment shader\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance\n // using gl_InstanceID allows us to move each instance separately\n // here we move each instance horizontally by id * 23\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // apply the offset to the final position\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\nlet fs = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance id\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance id\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n fx = createShader(vs, fs);\n}\n\nfunction draw() {\n background(220);\n\n // strokes aren't instanced, and are rather used for debug purposes\n shader(fx);\n fx.setUniform('numInstances', 4);\n\n // this doesn't have to do with instancing, this is just for centering the squares\n translate(25, -10);\n\n // here we draw the squares we want to instance\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n resetShader();\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shapes.\n noFill();\n\n // Left triangle.\n beginShape();\n vertex(20, 20);\n vertex(45, 20);\n vertex(45, 80);\n endShape(CLOSE);\n\n // Right triangle.\n beginShape();\n vertex(50, 20);\n vertex(75, 20);\n vertex(75, 80);\n endShape();\n\n describe(\n 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'\n );\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // Copy the instance ID to the fragment shader.\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance.\n // Using gl_InstanceID allows us to move each instance separately.\n // Here we move each instance horizontally by ID * 23.\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // Apply the offset to the final position.\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance ID.\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance ID.\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n background(220);\n\n // Compile and apply the p5.Shader.\n shader(myShader);\n\n // Set the numInstances uniform.\n myShader.setUniform('numInstances', 4);\n\n // Translate the origin to help align the drawing.\n translate(25, -10);\n\n // Style the shapes.\n noStroke();\n\n // Draw the shapes.\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n describe('A row of four squares. Their colors transition from purple on the left to red on the right');\n}\n\n
            " ], - "alt": "Triangle line shape with smallest interior angle on bottom and upside-down L.", "class": "p5", "module": "Shape", "submodule": "Vertex" }, { "file": "src/core/shape/vertex.js", - "line": 772, - "description": "

            Specifies vertex coordinates for quadratic Bezier curves. Each call to\nquadraticVertex() defines the position of one control points and one\nanchor point of a Bezier curve, adding a new segment to a line or shape.\nThe first time quadraticVertex() is used within a beginShape() call, it\nmust be prefaced with a call to vertex() to set the first anchor point.\nFor WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.\n2D mode expects 4 parameters, while 3D mode expects 6 parameters\n(including z coordinates).

            \n

            This function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().

            \n", + "line": 1569, + "description": "

            Adds a quadratic Bézier curve segment to a custom shape.

            \n

            quadraticVertex() adds a curved segment to custom shapes. The Bézier\ncurve segments it creates are similar to those made by the\nbezierVertex() function.\nquadraticVertex() must be called between the\nbeginShape() and\nendShape() functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to vertex() before quadraticVertex() can\nbe used.

            \n

            The first two parameters, cx and cy, set the curve’s control point.\nThe control point \"pulls\" the curve towards its.

            \n

            The last two parameters, x3, and y3, set the last anchor point. The\nlast anchor point is where the curve ends.

            \n

            Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezierVertex() has eight arguments because each point has x-, y-, and\nz-coordinates.

            \n

            Note: quadraticVertex() won’t work when an argument is passed to\nbeginShape().

            \n", "itemtype": "method", "name": "quadraticVertex", "chainable": 1, "example": [ - "\n
            \n\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nendShape();\n\n
            \n\n
            \n\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\npoint(20, 80);\npoint(80, 80);\npoint(80, 60);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nquadraticVertex(20, 80, 80, 80);\nvertex(80, 60);\nendShape();\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the curve.\n noFill();\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, 80, 20);\n line(50, 50, 80, 20);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(80, 20);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n\n
            \n\n
            \n\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 20;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(x2, y2, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, x2, y2);\n line(50, 50, x2, y2);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(x2, y2);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the curved segments.\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n quadraticVertex(20, 80, 80, 80);\n\n // Add the straight segments.\n vertex(80, 10);\n vertex(20, 10);\n vertex(20, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A white puzzle piece drawn on a gray background.');\n}\n\n
            \n\n
            \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the first puzzle piece.\n noStroke();\n fill(255);\n\n // Draw the first puzzle piece.\n beginShape();\n vertex(-30, -30, 0);\n quadraticVertex(30, -30, 0, 0, 0, 0);\n quadraticVertex(-30, 30, 0, 30, 30, 0);\n vertex(30, -40, 0);\n vertex(-30, -40, 0);\n vertex(-30, -30, 0);\n endShape();\n\n // Style the second puzzle piece.\n stroke(255);\n noFill();\n\n // Draw the second puzzle piece.\n beginShape();\n vertex(-30, -30, -20);\n quadraticVertex(30, -30, -20, 0, 0, -20);\n quadraticVertex(-30, 30, -20, 30, 30, -20);\n vertex(30, -40, -20);\n vertex(-30, -40, -20);\n vertex(-30, -30, -20);\n endShape();\n}\n\n
            " ], - "alt": "arched-shaped black line with 4 pixel thick stroke weight.\nbackwards s-shaped black line with 4 pixel thick stroke weight.", "class": "p5", "module": "Shape", "submodule": "Vertex", "overloads": [ { - "line": 772, + "line": 1569, "params": [ { "name": "cx", - "description": "

            x-coordinate for the control point

            \n", + "description": "

            x-coordinate of the control point.

            \n", "type": "Number" }, { "name": "cy", - "description": "

            y-coordinate for the control point

            \n", + "description": "

            y-coordinate of the control point.

            \n", "type": "Number" }, { "name": "x3", - "description": "

            x-coordinate for the anchor point

            \n", + "description": "

            x-coordinate of the anchor point.

            \n", "type": "Number" }, { "name": "y3", - "description": "

            y-coordinate for the anchor point

            \n", + "description": "

            y-coordinate of the anchor point.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 837, + "line": 1801, "params": [ { "name": "cx", @@ -6421,7 +6392,7 @@ }, { "name": "cz", - "description": "

            z-coordinate for the control point (for WebGL mode)

            \n", + "description": "

            z-coordinate of the control point.

            \n", "type": "Number" }, { @@ -6436,47 +6407,45 @@ }, { "name": "z3", - "description": "

            z-coordinate for the anchor point (for WebGL mode)

            \n", + "description": "

            z-coordinate of the anchor point.

            \n", "type": "Number" } - ], - "chainable": 1 + ] } ] }, { "file": "src/core/shape/vertex.js", - "line": 930, - "description": "

            All shapes are constructed by connecting a series of vertices. vertex()\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the beginShape() and\nendShape() functions.

            \n", + "line": 1850, + "description": "

            Adds a vertex to a custom shape.

            \n

            vertex() sets the coordinates of vertices drawn between the\nbeginShape() and\nendShape() functions.

            \n

            The first two parameters, x and y, set the x- and y-coordinates of the\nvertex.

            \n

            The third parameter, z, is optional. It sets the z-coordinate of the\nvertex in WebGL mode. By default, z is 0.

            \n

            The fourth and fifth parameters, u and v, are also optional. They set\nthe u- and v-coordinates for the vertex’s texture when used with\nendShape(). By default, u and v are both 0.

            \n", "itemtype": "method", "name": "vertex", "chainable": 1, "example": [ - "\n
            \n\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
            \n\n
            \n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(0, 35);\nvertex(35, 0);\nvertex(0, -35);\nvertex(-35, 0);\nendShape();\n\n
            \n\n
            \n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(-10, 10);\nvertex(0, 35);\nvertex(10, 10);\nvertex(35, 0);\nvertex(10, -8);\nvertex(0, -35);\nvertex(-10, -8);\nvertex(-35, 0);\nendShape();\n\n
            \n\n
            \n\nstrokeWeight(3);\nstroke(237, 34, 93);\nbeginShape(LINES);\nvertex(10, 35);\nvertex(90, 35);\nvertex(10, 65);\nvertex(90, 65);\nvertex(35, 10);\nvertex(35, 90);\nvertex(65, 10);\nvertex(65, 90);\nendShape();\n\n
            \n\n
            \n\n// Click to change the number of sides.\n// In WebGL mode, custom shapes will only\n// display hollow fill sections when\n// all calls to vertex() use the same z-value.\n\nlet sides = 3;\nlet angle, px, py;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n fill(237, 34, 93);\n strokeWeight(3);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n ngon(sides, 0, 0, 80);\n}\n\nfunction mouseClicked() {\n if (sides > 6) {\n sides = 3;\n } else {\n sides++;\n }\n}\n\nfunction ngon(n, x, y, d) {\n beginShape(TESS);\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 2;\n py = y - cos(angle) * d / 2;\n vertex(px, py, 0);\n }\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 4;\n py = y - cos(angle) * d / 4;\n vertex(px, py, 0);\n }\n endShape();\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n strokeWeight(3);\n\n // Start drawing the shape.\n // Only draw the vertices.\n beginShape(POINTS);\n\n // Add the vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around slowly on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load an image to apply as a texture.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A photograph of a ceiling rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the shape.\n noStroke();\n\n // Apply the texture.\n texture(img);\n textureMode(NORMAL);\n\n // Start drawing the shape\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0, 0, 0);\n vertex(35, -30, 0, 1, 0);\n vertex(35, 25, 0, 1, 1);\n vertex(-20, 25, 0, 0, 1);\n\n // Stop drawing the shape.\n endShape();\n}\n\n
            " ], - "alt": "4 black points in a square shape in middle-right of canvas.\n4 points making a diamond shape.\n8 points making a star.\n8 points making 4 lines.\nA rotating 3D shape with a hollow section in the middle.", "class": "p5", "module": "Shape", "submodule": "Vertex", "overloads": [ { - "line": 930, + "line": 1850, "params": [ { "name": "x", - "description": "

            x-coordinate of the vertex

            \n", + "description": "

            x-coordinate of the vertex.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y-coordinate of the vertex

            \n", + "description": "

            y-coordinate of the vertex.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 1061, + "line": 2021, "params": [ { "name": "x", @@ -6490,7 +6459,7 @@ }, { "name": "z", - "description": "

            z-coordinate of the vertex.\n Defaults to 0 if not specified.

            \n", + "description": "

            z-coordinate of the vertex. Defaults to 0.

            \n", "type": "Number", "optional": true } @@ -6498,7 +6467,7 @@ "chainable": 1 }, { - "line": 1069, + "line": 2028, "params": [ { "name": "x", @@ -6518,13 +6487,13 @@ }, { "name": "u", - "description": "

            the vertex's texture u-coordinate

            \n", + "description": "

            u-coordinate of the vertex's texture. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "v", - "description": "

            the vertex's texture v-coordinate

            \n", + "description": "

            v-coordinate of the vertex's texture. Defaults to 0.

            \n", "type": "Number", "optional": true } @@ -6535,45 +6504,45 @@ }, { "file": "src/core/shape/vertex.js", - "line": 1107, - "description": "

            Sets the 3d vertex normal to use for subsequent vertices drawn with\nvertex(). A normal is a vector that is generally\nnearly perpendicular to a shape's surface which controls how much light will\nbe reflected from that part of the surface.

            \n", + "line": 2066, + "description": "

            Sets the normal vector for vertices in a custom 3D shape.

            \n

            3D shapes created with beginShape() and\nendShape() are made by connecting sets of\npoints called vertices. Each vertex added with\nvertex() has a normal vector that points away\nfrom it. The normal vector controls how light reflects off the shape.

            \n

            normal() can be called two ways with different parameters to define the\nnormal vector's components.

            \n

            The first way to call normal() has three parameters, x, y, and z.\nIf Numbers are passed, as in normal(1, 2, 3), they set the x-, y-, and\nz-components of the normal vector.

            \n

            The second way to call normal() has one parameter, vector. If a\np5.Vector object is passed, as in\nnormal(myVector), its components will be used to set the normal vector.

            \n

            normal() changes the normal vector of vertices added to a custom shape\nwith vertex(). normal() must be called between\nthe beginShape() and\nendShape() functions, just like\nvertex(). The normal vector set by calling\nnormal() will affect all following vertices until normal() is called\nagain:

            \n\nbeginShape();\n\n

            // Set the vertex normal.\nnormal(-0.4, -0.4, 0.8);

            \n

            // Add a vertex.\nvertex(-30, -30, 0);

            \n

            // Set the vertex normal.\nnormal(0, 0, 1);

            \n

            // Add vertices.\nvertex(30, -30, 0);\nvertex(30, 30, 0);

            \n

            // Set the vertex normal.\nnormal(0.4, -0.4, 0.8);

            \n

            // Add a vertex.\nvertex(-30, 30, 0);

            \n

            endShape();\n

            \n", "itemtype": "method", "name": "normal", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n}\n\nfunction draw() {\n background(255);\n rotateY(frameCount / 100);\n normalMaterial();\n beginShape(TRIANGLE_STRIP);\n normal(-0.4, 0.4, 0.8);\n vertex(-30, 30, 0);\n\n normal(0, 0, 1);\n vertex(-30, -30, 30);\n vertex(30, 30, 30);\n\n normal(0.4, -0.4, 0.8);\n vertex(30, -30, 0);\n endShape();\n}\n\n
            " + "\n
            \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n beginShape();\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
            \n\n
            \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(-0.4, -0.4, 0.8);\n vertex(-30, -30, 0);\n\n normal(0, 0, 1);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(0.4, -0.4, 0.8);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
            \n\n
            \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Create p5.Vector objects.\n let n1 = createVector(-0.4, -0.4, 0.8);\n let n2 = createVector(0, 0, 1);\n let n3 = createVector(0.4, -0.4, 0.8);\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(n1);\n vertex(-30, -30, 0);\n\n normal(n2);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(n3);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
            " ], "class": "p5", "module": "Shape", "submodule": "Vertex", "overloads": [ { - "line": 1107, + "line": 2066, "params": [ { "name": "vector", - "description": "

            A p5.Vector representing the vertex normal.

            \n", - "type": "Vector" + "description": "

            vertex normal as a p5.Vector object.

            \n", + "type": "p5.Vector" } ], "chainable": 1 }, { - "line": 1144, + "line": 2241, "params": [ { "name": "x", - "description": "

            The x component of the vertex normal.

            \n", + "description": "

            x-component of the vertex normal.

            \n", "type": "Number" }, { "name": "y", - "description": "

            The y component of the vertex normal.

            \n", + "description": "

            y-component of the vertex normal.

            \n", "type": "Number" }, { "name": "z", - "description": "

            The z component of the vertex normal.

            \n", + "description": "

            z-component of the vertex normal.

            \n", "type": "Number" } ], @@ -6698,93 +6667,88 @@ { "file": "src/core/constants.js", "line": 88, - "description": "

            HALF_PI is a mathematical constant with the value\n1.57079632679489661923. It is half the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

            \n", + "description": "

            A Number constant that's approximately 1.5708.

            \n

            HALF_PI is half the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(HALF_PI) rotates the coordinate system HALF_PI radians, which is\na quarter turn (90˚).

            \n

            Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

            \n", "itemtype": "property", "name": "HALF_PI", "type": "Number", "final": 1, "example": [ - "\n
            \narc(50, 50, 80, 80, 0, HALF_PI);\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to HALF_PI.\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n describe('The bottom-right quarter of a circle drawn in white on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a quarter turn.\n rotate(HALF_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
            " ], - "alt": "80×80 white quarter-circle with curve toward bottom right of canvas.", "class": "p5", "module": "Constants", "submodule": "Constants" }, { "file": "src/core/constants.js", - "line": 106, - "description": "

            PI is a mathematical constant with the value\n3.14159265358979323846. It is the ratio of the circumference\nof a circle to its diameter. It is useful in combination with\nthe trigonometric functions sin() and cos().

            \n", + "line": 178, + "description": "

            A Number constant that's approximately 3.1416.

            \n

            PI is the mathematical constant π. It's useful for many tasks that\ninvolve rotation and oscillation. For example, calling rotate(PI) rotates\nthe coordinate system PI radians, which is a half turn (180˚).

            \n

            Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

            \n", "itemtype": "property", "name": "PI", "type": "Number", "final": 1, "example": [ - "\n
            \narc(50, 50, 80, 80, 0, PI);\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to PI.\n arc(50, 50, 80, 80, 0, PI);\n\n describe('The bottom half of a circle drawn in white on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a half turn.\n rotate(PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('A horizontal black line on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
            " ], - "alt": "white half-circle with curve toward bottom of canvas.", "class": "p5", "module": "Constants", "submodule": "Constants" }, { "file": "src/core/constants.js", - "line": 124, - "description": "

            QUARTER_PI is a mathematical constant with the value 0.7853982.\nIt is one quarter the ratio of the circumference of a circle to\nits diameter. It is useful in combination with the trigonometric\nfunctions sin() and cos().

            \n", + "line": 267, + "description": "

            A Number constant that's approximately 0.7854.

            \n

            QUARTER_PI is one-fourth the value of the mathematical constant π. It's\nuseful for many tasks that involve rotation and oscillation. For example,\ncalling rotate(QUARTER_PI) rotates the coordinate system QUARTER_PI\nradians, which is an eighth of a turn (45˚).

            \n

            Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

            \n", "itemtype": "property", "name": "QUARTER_PI", "type": "Number", "final": 1, "example": [ - "\n
            \narc(50, 50, 80, 80, 0, QUARTER_PI);\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to QUARTER_PI.\n arc(50, 50, 80, 80, 0, QUARTER_PI);\n\n describe('A one-eighth slice of a circle drawn in white on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate an eighth turn.\n rotate(QUARTER_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines that form a \"V\" opening towards the bottom-right corner of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
            " ], - "alt": "white eighth-circle rotated about 40 degrees with curve bottom right canvas.", "class": "p5", "module": "Constants", "submodule": "Constants" }, { "file": "src/core/constants.js", - "line": 142, - "description": "

            TAU is an alias for TWO_PI, a mathematical constant with the\nvalue 6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

            \n", + "line": 357, + "description": "

            A Number constant that's approximately 6.2382.

            \n

            TAU is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(TAU) rotates the coordinate system TAU radians, which is one\nfull turn (360˚). TAU and TWO_PI are equal.

            \n

            Note: TAU radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

            \n", "itemtype": "property", "name": "TAU", "type": "Number", "final": 1, "example": [ - "\n
            \narc(50, 50, 80, 80, 0, TAU);\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TAU.\n arc(50, 50, 80, 80, 0, TAU);\n\n describe('A white circle drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TAU);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TAU);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n\n
            " ], - "alt": "80×80 white ellipse shape in center of canvas.", "class": "p5", "module": "Constants", "submodule": "Constants" }, { "file": "src/core/constants.js", - "line": 160, - "description": "

            TWO_PI is a mathematical constant with the value\n6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

            \n", + "line": 452, + "description": "

            A Number constant that's approximately 6.2382.

            \n

            TWO_PI is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(TWO_PI) rotates the coordinate system TWO_PI radians, which is\none full turn (360˚). TWO_PI and TAU are equal.

            \n

            Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

            \n", "itemtype": "property", "name": "TWO_PI", "type": "Number", "final": 1, "example": [ - "\n
            \narc(50, 50, 80, 80, 0, TWO_PI);\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TWO_PI.\n arc(50, 50, 80, 80, 0, TWO_PI);\n\n describe('A white circle drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TWO_PI);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n\n
            " ], - "alt": "80×80 white ellipse shape in center of canvas.", "class": "p5", "module": "Constants", "submodule": "Constants" }, { "file": "src/core/constants.js", - "line": 178, - "description": "

            Constant to be used with the angleMode() function, to set the mode in\nwhich p5.js interprets and calculates angles (either DEGREES or RADIANS).

            \n", + "line": 547, + "description": "

            A String constant that's used to set the\nangleMode().

            \n

            By default, functions such as rotate() and\nsin() expect angles measured in units of radians.\nCalling angleMode(DEGREES) ensures that angles are measured in units of\ndegrees.

            \n

            Note: TWO_PI radians equals 360˚.

            \n", "itemtype": "property", "name": "DEGREES", "type": "String", "final": 1, "example": [ - "\n
            \nfunction setup() {\n angleMode(DEGREES);\n}\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a red arc from 0 to HALF_PI radians.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a blue arc from 90˚ to 180˚.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, 90, 180);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n\n
            " ], "class": "p5", "module": "Constants", @@ -6792,14 +6756,14 @@ }, { "file": "src/core/constants.js", - "line": 192, - "description": "

            Constant to be used with the angleMode() function, to set the mode\nin which p5.js interprets and calculates angles (either RADIANS or DEGREES).

            \n", + "line": 587, + "description": "

            A String constant that's used to set the\nangleMode().

            \n

            By default, functions such as rotate() and\nsin() expect angles measured in units of radians.\nCalling angleMode(RADIANS) ensures that angles are measured in units of\nradians. Doing so can be useful if the\nangleMode() has been set to\nDEGREES.

            \n

            Note: TWO_PI radians equals 360˚.

            \n", "itemtype": "property", "name": "RADIANS", "type": "String", "final": 1, "example": [ - "\n
            \nfunction setup() {\n angleMode(RADIANS);\n}\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a red arc from 0˚ to 90˚.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, 90);\n\n // Use radians.\n angleMode(RADIANS);\n\n // Draw a blue arc from HALF_PI to PI.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, HALF_PI, PI);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n\n
            " ], "class": "p5", "module": "Constants", @@ -6807,7 +6771,7 @@ }, { "file": "src/core/constants.js", - "line": 210, + "line": 635, "itemtype": "property", "name": "CORNER", "type": "String", @@ -6818,7 +6782,7 @@ }, { "file": "src/core/constants.js", - "line": 215, + "line": 640, "itemtype": "property", "name": "CORNERS", "type": "String", @@ -6829,7 +6793,7 @@ }, { "file": "src/core/constants.js", - "line": 220, + "line": 645, "itemtype": "property", "name": "RADIUS", "type": "String", @@ -6840,7 +6804,7 @@ }, { "file": "src/core/constants.js", - "line": 225, + "line": 650, "itemtype": "property", "name": "RIGHT", "type": "String", @@ -6851,7 +6815,7 @@ }, { "file": "src/core/constants.js", - "line": 230, + "line": 655, "itemtype": "property", "name": "LEFT", "type": "String", @@ -6862,7 +6826,7 @@ }, { "file": "src/core/constants.js", - "line": 235, + "line": 660, "itemtype": "property", "name": "CENTER", "type": "String", @@ -6873,7 +6837,7 @@ }, { "file": "src/core/constants.js", - "line": 240, + "line": 665, "itemtype": "property", "name": "TOP", "type": "String", @@ -6884,7 +6848,7 @@ }, { "file": "src/core/constants.js", - "line": 245, + "line": 670, "itemtype": "property", "name": "BOTTOM", "type": "String", @@ -6895,7 +6859,7 @@ }, { "file": "src/core/constants.js", - "line": 250, + "line": 675, "itemtype": "property", "name": "BASELINE", "type": "String", @@ -6907,7 +6871,7 @@ }, { "file": "src/core/constants.js", - "line": 256, + "line": 681, "itemtype": "property", "name": "POINTS", "type": "Number", @@ -6919,7 +6883,7 @@ }, { "file": "src/core/constants.js", - "line": 262, + "line": 687, "itemtype": "property", "name": "LINES", "type": "Number", @@ -6931,7 +6895,7 @@ }, { "file": "src/core/constants.js", - "line": 268, + "line": 693, "itemtype": "property", "name": "LINE_STRIP", "type": "Number", @@ -6943,7 +6907,7 @@ }, { "file": "src/core/constants.js", - "line": 274, + "line": 699, "itemtype": "property", "name": "LINE_LOOP", "type": "Number", @@ -6955,7 +6919,7 @@ }, { "file": "src/core/constants.js", - "line": 280, + "line": 705, "itemtype": "property", "name": "TRIANGLES", "type": "Number", @@ -6967,7 +6931,7 @@ }, { "file": "src/core/constants.js", - "line": 286, + "line": 711, "itemtype": "property", "name": "TRIANGLE_FAN", "type": "Number", @@ -6979,7 +6943,7 @@ }, { "file": "src/core/constants.js", - "line": 292, + "line": 717, "itemtype": "property", "name": "TRIANGLE_STRIP", "type": "Number", @@ -6991,7 +6955,7 @@ }, { "file": "src/core/constants.js", - "line": 298, + "line": 723, "itemtype": "property", "name": "QUADS", "type": "String", @@ -7002,7 +6966,7 @@ }, { "file": "src/core/constants.js", - "line": 303, + "line": 728, "itemtype": "property", "name": "QUAD_STRIP", "type": "String", @@ -7014,7 +6978,7 @@ }, { "file": "src/core/constants.js", - "line": 309, + "line": 734, "itemtype": "property", "name": "TESS", "type": "String", @@ -7026,7 +6990,7 @@ }, { "file": "src/core/constants.js", - "line": 315, + "line": 740, "itemtype": "property", "name": "CLOSE", "type": "String", @@ -7037,7 +7001,7 @@ }, { "file": "src/core/constants.js", - "line": 320, + "line": 745, "itemtype": "property", "name": "OPEN", "type": "String", @@ -7048,7 +7012,7 @@ }, { "file": "src/core/constants.js", - "line": 325, + "line": 750, "itemtype": "property", "name": "CHORD", "type": "String", @@ -7059,7 +7023,7 @@ }, { "file": "src/core/constants.js", - "line": 330, + "line": 755, "itemtype": "property", "name": "PIE", "type": "String", @@ -7070,7 +7034,7 @@ }, { "file": "src/core/constants.js", - "line": 335, + "line": 760, "itemtype": "property", "name": "PROJECT", "type": "String", @@ -7082,7 +7046,7 @@ }, { "file": "src/core/constants.js", - "line": 341, + "line": 766, "itemtype": "property", "name": "SQUARE", "type": "String", @@ -7094,7 +7058,7 @@ }, { "file": "src/core/constants.js", - "line": 347, + "line": 772, "itemtype": "property", "name": "ROUND", "type": "String", @@ -7105,7 +7069,7 @@ }, { "file": "src/core/constants.js", - "line": 352, + "line": 777, "itemtype": "property", "name": "BEVEL", "type": "String", @@ -7116,7 +7080,7 @@ }, { "file": "src/core/constants.js", - "line": 357, + "line": 782, "itemtype": "property", "name": "MITER", "type": "String", @@ -7127,7 +7091,7 @@ }, { "file": "src/core/constants.js", - "line": 364, + "line": 789, "itemtype": "property", "name": "RGB", "type": "String", @@ -7138,7 +7102,7 @@ }, { "file": "src/core/constants.js", - "line": 369, + "line": 794, "description": "

            HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\nHSB.

            \n", "itemtype": "property", "name": "HSB", @@ -7150,7 +7114,7 @@ }, { "file": "src/core/constants.js", - "line": 378, + "line": 803, "itemtype": "property", "name": "HSL", "type": "String", @@ -7161,7 +7125,7 @@ }, { "file": "src/core/constants.js", - "line": 385, + "line": 810, "description": "

            AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the size function as AUTO, at a time.

            \n", "itemtype": "property", "name": "AUTO", @@ -7173,7 +7137,7 @@ }, { "file": "src/core/constants.js", - "line": 395, + "line": 820, "itemtype": "property", "name": "ALT", "type": "Number", @@ -7184,7 +7148,7 @@ }, { "file": "src/core/constants.js", - "line": 401, + "line": 826, "itemtype": "property", "name": "BACKSPACE", "type": "Number", @@ -7195,7 +7159,7 @@ }, { "file": "src/core/constants.js", - "line": 406, + "line": 831, "itemtype": "property", "name": "CONTROL", "type": "Number", @@ -7206,7 +7170,7 @@ }, { "file": "src/core/constants.js", - "line": 411, + "line": 836, "itemtype": "property", "name": "DELETE", "type": "Number", @@ -7217,7 +7181,7 @@ }, { "file": "src/core/constants.js", - "line": 416, + "line": 841, "itemtype": "property", "name": "DOWN_ARROW", "type": "Number", @@ -7228,7 +7192,7 @@ }, { "file": "src/core/constants.js", - "line": 421, + "line": 846, "itemtype": "property", "name": "ENTER", "type": "Number", @@ -7239,7 +7203,7 @@ }, { "file": "src/core/constants.js", - "line": 426, + "line": 851, "itemtype": "property", "name": "ESCAPE", "type": "Number", @@ -7250,7 +7214,7 @@ }, { "file": "src/core/constants.js", - "line": 431, + "line": 856, "itemtype": "property", "name": "LEFT_ARROW", "type": "Number", @@ -7261,7 +7225,7 @@ }, { "file": "src/core/constants.js", - "line": 436, + "line": 861, "itemtype": "property", "name": "OPTION", "type": "Number", @@ -7272,7 +7236,7 @@ }, { "file": "src/core/constants.js", - "line": 441, + "line": 866, "itemtype": "property", "name": "RETURN", "type": "Number", @@ -7283,7 +7247,7 @@ }, { "file": "src/core/constants.js", - "line": 446, + "line": 871, "itemtype": "property", "name": "RIGHT_ARROW", "type": "Number", @@ -7294,7 +7258,7 @@ }, { "file": "src/core/constants.js", - "line": 451, + "line": 876, "itemtype": "property", "name": "SHIFT", "type": "Number", @@ -7305,7 +7269,7 @@ }, { "file": "src/core/constants.js", - "line": 456, + "line": 881, "itemtype": "property", "name": "TAB", "type": "Number", @@ -7316,7 +7280,7 @@ }, { "file": "src/core/constants.js", - "line": 461, + "line": 886, "itemtype": "property", "name": "UP_ARROW", "type": "Number", @@ -7327,7 +7291,7 @@ }, { "file": "src/core/constants.js", - "line": 468, + "line": 893, "itemtype": "property", "name": "BLEND", "type": "String", @@ -7339,7 +7303,7 @@ }, { "file": "src/core/constants.js", - "line": 474, + "line": 899, "itemtype": "property", "name": "REMOVE", "type": "String", @@ -7351,7 +7315,7 @@ }, { "file": "src/core/constants.js", - "line": 480, + "line": 905, "itemtype": "property", "name": "ADD", "type": "String", @@ -7363,7 +7327,7 @@ }, { "file": "src/core/constants.js", - "line": 488, + "line": 913, "itemtype": "property", "name": "DARKEST", "type": "String", @@ -7374,7 +7338,7 @@ }, { "file": "src/core/constants.js", - "line": 493, + "line": 918, "itemtype": "property", "name": "LIGHTEST", "type": "String", @@ -7386,7 +7350,7 @@ }, { "file": "src/core/constants.js", - "line": 499, + "line": 924, "itemtype": "property", "name": "DIFFERENCE", "type": "String", @@ -7397,7 +7361,7 @@ }, { "file": "src/core/constants.js", - "line": 504, + "line": 929, "itemtype": "property", "name": "SUBTRACT", "type": "String", @@ -7408,7 +7372,7 @@ }, { "file": "src/core/constants.js", - "line": 509, + "line": 934, "itemtype": "property", "name": "EXCLUSION", "type": "String", @@ -7419,7 +7383,7 @@ }, { "file": "src/core/constants.js", - "line": 514, + "line": 939, "itemtype": "property", "name": "MULTIPLY", "type": "String", @@ -7430,7 +7394,7 @@ }, { "file": "src/core/constants.js", - "line": 519, + "line": 944, "itemtype": "property", "name": "SCREEN", "type": "String", @@ -7441,7 +7405,7 @@ }, { "file": "src/core/constants.js", - "line": 524, + "line": 949, "itemtype": "property", "name": "REPLACE", "type": "String", @@ -7453,7 +7417,7 @@ }, { "file": "src/core/constants.js", - "line": 530, + "line": 955, "itemtype": "property", "name": "OVERLAY", "type": "String", @@ -7464,7 +7428,7 @@ }, { "file": "src/core/constants.js", - "line": 535, + "line": 960, "itemtype": "property", "name": "HARD_LIGHT", "type": "String", @@ -7475,7 +7439,7 @@ }, { "file": "src/core/constants.js", - "line": 540, + "line": 965, "itemtype": "property", "name": "SOFT_LIGHT", "type": "String", @@ -7486,7 +7450,7 @@ }, { "file": "src/core/constants.js", - "line": 545, + "line": 970, "itemtype": "property", "name": "DODGE", "type": "String", @@ -7498,7 +7462,7 @@ }, { "file": "src/core/constants.js", - "line": 551, + "line": 976, "itemtype": "property", "name": "BURN", "type": "String", @@ -7510,7 +7474,7 @@ }, { "file": "src/core/constants.js", - "line": 559, + "line": 984, "itemtype": "property", "name": "THRESHOLD", "type": "String", @@ -7521,7 +7485,7 @@ }, { "file": "src/core/constants.js", - "line": 564, + "line": 989, "itemtype": "property", "name": "GRAY", "type": "String", @@ -7532,7 +7496,7 @@ }, { "file": "src/core/constants.js", - "line": 569, + "line": 994, "itemtype": "property", "name": "OPAQUE", "type": "String", @@ -7543,7 +7507,7 @@ }, { "file": "src/core/constants.js", - "line": 574, + "line": 999, "itemtype": "property", "name": "INVERT", "type": "String", @@ -7554,7 +7518,7 @@ }, { "file": "src/core/constants.js", - "line": 579, + "line": 1004, "itemtype": "property", "name": "POSTERIZE", "type": "String", @@ -7565,7 +7529,7 @@ }, { "file": "src/core/constants.js", - "line": 584, + "line": 1009, "itemtype": "property", "name": "DILATE", "type": "String", @@ -7576,7 +7540,7 @@ }, { "file": "src/core/constants.js", - "line": 589, + "line": 1014, "itemtype": "property", "name": "ERODE", "type": "String", @@ -7587,7 +7551,7 @@ }, { "file": "src/core/constants.js", - "line": 594, + "line": 1019, "itemtype": "property", "name": "BLUR", "type": "String", @@ -7598,7 +7562,7 @@ }, { "file": "src/core/constants.js", - "line": 601, + "line": 1026, "itemtype": "property", "name": "NORMAL", "type": "String", @@ -7609,7 +7573,7 @@ }, { "file": "src/core/constants.js", - "line": 606, + "line": 1031, "itemtype": "property", "name": "ITALIC", "type": "String", @@ -7620,7 +7584,7 @@ }, { "file": "src/core/constants.js", - "line": 611, + "line": 1036, "itemtype": "property", "name": "BOLD", "type": "String", @@ -7631,7 +7595,7 @@ }, { "file": "src/core/constants.js", - "line": 616, + "line": 1041, "itemtype": "property", "name": "BOLDITALIC", "type": "String", @@ -7642,7 +7606,7 @@ }, { "file": "src/core/constants.js", - "line": 621, + "line": 1046, "itemtype": "property", "name": "CHAR", "type": "String", @@ -7653,7 +7617,7 @@ }, { "file": "src/core/constants.js", - "line": 626, + "line": 1051, "itemtype": "property", "name": "WORD", "type": "String", @@ -7664,7 +7628,7 @@ }, { "file": "src/core/constants.js", - "line": 638, + "line": 1063, "itemtype": "property", "name": "LINEAR", "type": "String", @@ -7675,7 +7639,7 @@ }, { "file": "src/core/constants.js", - "line": 643, + "line": 1068, "itemtype": "property", "name": "QUADRATIC", "type": "String", @@ -7686,7 +7650,7 @@ }, { "file": "src/core/constants.js", - "line": 648, + "line": 1073, "itemtype": "property", "name": "BEZIER", "type": "String", @@ -7697,7 +7661,7 @@ }, { "file": "src/core/constants.js", - "line": 653, + "line": 1078, "itemtype": "property", "name": "CURVE", "type": "String", @@ -7708,7 +7672,7 @@ }, { "file": "src/core/constants.js", - "line": 660, + "line": 1085, "itemtype": "property", "name": "STROKE", "type": "String", @@ -7719,7 +7683,7 @@ }, { "file": "src/core/constants.js", - "line": 665, + "line": 1090, "itemtype": "property", "name": "FILL", "type": "String", @@ -7730,7 +7694,7 @@ }, { "file": "src/core/constants.js", - "line": 670, + "line": 1095, "itemtype": "property", "name": "TEXTURE", "type": "String", @@ -7741,7 +7705,7 @@ }, { "file": "src/core/constants.js", - "line": 675, + "line": 1100, "itemtype": "property", "name": "IMMEDIATE", "type": "String", @@ -7752,7 +7716,7 @@ }, { "file": "src/core/constants.js", - "line": 683, + "line": 1108, "itemtype": "property", "name": "IMAGE", "type": "String", @@ -7763,7 +7727,7 @@ }, { "file": "src/core/constants.js", - "line": 691, + "line": 1116, "itemtype": "property", "name": "NEAREST", "type": "String", @@ -7774,7 +7738,7 @@ }, { "file": "src/core/constants.js", - "line": 696, + "line": 1121, "itemtype": "property", "name": "REPEAT", "type": "String", @@ -7785,7 +7749,7 @@ }, { "file": "src/core/constants.js", - "line": 701, + "line": 1126, "itemtype": "property", "name": "CLAMP", "type": "String", @@ -7796,7 +7760,7 @@ }, { "file": "src/core/constants.js", - "line": 706, + "line": 1131, "itemtype": "property", "name": "MIRROR", "type": "String", @@ -7807,7 +7771,7 @@ }, { "file": "src/core/constants.js", - "line": 713, + "line": 1138, "itemtype": "property", "name": "FLAT", "type": "String", @@ -7818,7 +7782,7 @@ }, { "file": "src/core/constants.js", - "line": 718, + "line": 1143, "itemtype": "property", "name": "SMOOTH", "type": "String", @@ -7829,7 +7793,7 @@ }, { "file": "src/core/constants.js", - "line": 725, + "line": 1150, "itemtype": "property", "name": "LANDSCAPE", "type": "String", @@ -7840,7 +7804,7 @@ }, { "file": "src/core/constants.js", - "line": 730, + "line": 1155, "itemtype": "property", "name": "PORTRAIT", "type": "String", @@ -7851,7 +7815,7 @@ }, { "file": "src/core/constants.js", - "line": 740, + "line": 1165, "itemtype": "property", "name": "GRID", "type": "String", @@ -7862,7 +7826,7 @@ }, { "file": "src/core/constants.js", - "line": 746, + "line": 1171, "itemtype": "property", "name": "AXES", "type": "String", @@ -7873,7 +7837,7 @@ }, { "file": "src/core/constants.js", - "line": 752, + "line": 1177, "itemtype": "property", "name": "LABEL", "type": "String", @@ -7884,7 +7848,7 @@ }, { "file": "src/core/constants.js", - "line": 757, + "line": 1182, "itemtype": "property", "name": "FALLBACK", "type": "String", @@ -7895,7 +7859,7 @@ }, { "file": "src/core/constants.js", - "line": 763, + "line": 1188, "itemtype": "property", "name": "CONTAIN", "type": "String", @@ -7906,7 +7870,7 @@ }, { "file": "src/core/constants.js", - "line": 769, + "line": 1194, "itemtype": "property", "name": "COVER", "type": "String", @@ -7917,7 +7881,7 @@ }, { "file": "src/core/constants.js", - "line": 775, + "line": 1200, "itemtype": "property", "name": "UNSIGNED_BYTE", "type": "String", @@ -7928,7 +7892,7 @@ }, { "file": "src/core/constants.js", - "line": 781, + "line": 1206, "itemtype": "property", "name": "UNSIGNED_INT", "type": "String", @@ -7939,7 +7903,7 @@ }, { "file": "src/core/constants.js", - "line": 787, + "line": 1212, "itemtype": "property", "name": "FLOAT", "type": "String", @@ -7950,7 +7914,7 @@ }, { "file": "src/core/constants.js", - "line": 793, + "line": 1218, "itemtype": "property", "name": "HALF_FLOAT", "type": "String", @@ -7961,7 +7925,7 @@ }, { "file": "src/core/constants.js", - "line": 799, + "line": 1224, "itemtype": "property", "name": "RGBA", "type": "String", @@ -9023,281 +8987,160 @@ { "file": "src/core/reference.js", "line": 7, - "description": "

            Creates and names a new variable. A variable is a container for a value.

            \n

            Variables that are declared with let will have block-scope.\nThis means that the variable only exists within the\n\nblock that it is created within.

            \n

            From the MDN entry:\nDeclares a block scope local variable, optionally initializing it to a value.

            \n", + "description": "

            Declares a new variable.

            \n

            A variable is a container for a value. For example, a variable might\ncontain a creature's x-coordinate as a Number or its name as a\nString. Variables can change value by reassigning them as follows:

            \n\n// Declare the variable x and assign it the value 10.\nlet x = 10;\n\n

            // Reassign x to 50.\nx = 50;\n

            \n

            Variables have block scope. When a variable is declared between curly\nbraces {}, it only exists within the block defined by those braces. For\nexample, the following code would throw a ReferenceError because x is\ndeclared within the setup() function's block:

            \n\nfunction setup() {\n createCanvas(100, 100);\n\n

            let x = 50;\n}

            \n

            function draw() {\n background(200);

            \n

            // x was declared in setup(), so it can't be referenced here.\n circle(x, 50, 20);\n}\n

            \n

            Variables declared outside of all curly braces {} are in the global\nscope. A variable that's in the global scope can be used and changed\nanywhere in a sketch:

            \n\nlet x = 50;\n\n

            function setup() {\n createCanvas(100, 100);\n}

            \n

            function draw() {\n background(200);

            \n

            // Change the value of x.\n x += 10;

            \n

            circle(x, 50, 20);\n}\n

            \n", "itemtype": "property", "name": "let", "example": [ - "\n
            \n\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 34, - "description": "

            Creates and names a new constant. Like a variable created with let,\na constant that is created with const is a container for a value,\nhowever constants cannot be reassigned once they are declared. Although it is\nnoteworthy that for non-primitive data types like objects & arrays, their\nelements can still be changeable. So if a variable is assigned an array, you\ncan still add or remove elements from the array but cannot reassign another\narray to it. Also unlike let, you cannot declare variables without value\nusing const.

            \n

            Constants have block-scope. This means that the constant only exists within\nthe \nblock that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.

            \n

            From the MDN entry:\nDeclares a read-only named constant.\nConstants are block-scoped, much like variables defined using the 'let' statement.\nThe value of a constant can't be changed through reassignment, and it can't be redeclared.

            \n", - "itemtype": "property", - "name": "const", - "example": [ - "\n
            \n\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n\n
            \n\n
            \n\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n\n
            \n\n
            \n\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n\n
            " - ], - "alt": "These examples do not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 87, - "description": "

            The strict equality operator ===\nchecks to see if two values are equal and of the same type.

            \n

            A comparison expression always evaluates to a boolean.

            \n

            From the MDN entry:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.

            \n

            Note: In some examples around the web you may see a double-equals-sign\n==,\nused for comparison instead. This is the non-strict equality operator in Javascript.\nThis will convert the two values being compared to the same type before comparing them.

            \n", - "itemtype": "property", - "name": "===", - "example": [ - "\n
            \n\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 115, - "description": "

            The greater than operator \">>\nevaluates to true if the left value is greater than\nthe right value.

            \n\nThere is more info on comparison operators on MDN.", - "itemtype": "property", - "name": ">", - "example": [ - "\n
            \n\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 137, - "description": "

            The greater than or equal to operator =\">>=\nevaluates to true if the left value is greater than or equal to\nthe right value.

            \n

            There is more info on comparison operators on MDN.

            \n", - "itemtype": "property", - "name": ">=", - "example": [ - "\n
            \n\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 158, - "description": "

            The less than operator <\nevaluates to true if the left value is less than\nthe right value.

            \n

            There is more info on comparison operators on MDN.

            \n", - "itemtype": "property", - "name": "<", - "example": [ - "\n
            \n\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "p5", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 179, - "description": "

            The less than or equal to operator <=\nevaluates to true if the left value is less than or equal to\nthe right value.

            \n

            There is more info on comparison operators on MDN.

            \n", - "itemtype": "property", - "name": "<=", - "example": [ - "\n
            \n\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, 🌍!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n\n
            \n\n
            \n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 200, - "description": "

            The if-else statement helps control the flow of your code.

            \n

            A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to truthy,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to falsy,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.

            \n

            From the MDN entry:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed

            \n", + "line": 110, + "description": "

            A way to choose whether to run a block of code.

            \n

            if statements are helpful for running a block of code based on a\ncondition. For example, an if statement makes it easy to express the\nidea \"Draw a circle if the mouse is pressed.\":

            \n\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

            The statement header begins with the keyword if. The expression in\nparentheses mouseIsPressed === true is a Boolean expression that's\neither true or false. The code between the curly braces {} is the if\nstatement's body. The body only runs if the Boolean expression is true.

            \n

            The mouseIsPressed system variable is\nalways true or false, so the code snippet above could also be written\nas follows:

            \n\nif (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

            An if-else statement adds a block of code that runs if the Boolean\nexpression is false. For example, here's an if-else statement that\nexpresses the idea \"Draw a circle if the mouse is pressed. Otherwise,\ndisplay a message.\":

            \n\nif (mouseIsPressed === true) {\n // When true.\n circle(mouseX, mouseY, 20);\n} else {\n // When false.\n text('Click me!', 50, 50);\n}\n\n\n

            There are two possible paths, or branches, in this code snippet. The\nprogram must follow one branch or the other.

            \n

            An else-if statement makes it possible to add more branches.\nelse-if statements run different blocks of code under different\nconditions. For example, an else-if statement makes it easy to express\nthe idea \"If the mouse is on the left, paint the canvas white. If the mouse\nis in the middle, paint the canvas gray. Otherwise, paint the canvas\nblack.\":

            \n\nif (mouseX < 33) {\n background(255);\n} else if (mouseX < 67) {\n background(200);\n} else {\n background(0);\n}\n\n\n

            if statements can add as many else-if statements as needed. However,\nthere can only be one else statement and it must be last.

            \n

            if statements can also check for multiple conditions at once. For\nexample, the Boolean operator && (AND) checks whether two expressions\nare both true:

            \n\nif (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n\n\n

            If the user is pressing a key AND that key is 'p', then a message will\ndisplay.

            \n

            The Boolean operator || (OR) checks whether at least one of two\nexpressions is true:

            \n\nif (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n\n\n

            If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.

            \n

            The body of an if statement can contain another if statement. This is\ncalled a \"nested if statement.\" For example, nested if statements make\nit easy to express the idea \"If a key is pressed, then check if the key is\n'r'. If it is, then set the fill to red.\":

            \n\nif (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n}\n\n\n

            See Boolean and Number\nto learn more about these data types and the operations they support.

            \n", "itemtype": "property", - "name": "if-else", + "name": "if", "example": [ - "\n
            \n\nlet a = 4;\nif (a > 0) {\n console.log('positive');\n} else {\n console.log('negative');\n}\n\n
            " + "\n
            \n\n// Click the mouse to show the circle.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
            \n\n
            \n\n// Click the mouse to show different shapes.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(50, 50, 20);\n } else {\n ellipse(50, 50, 20, 50);\n }\n}\n\n
            \n\n
            \n\n// Move the mouse to change the background color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A square changes color from white to black as the user moves the mouse from left to right.'\n );\n}\n\nfunction draw() {\n if (mouseX < 33) {\n background(255);\n } else if (mouseX < 67) {\n background(200);\n } else {\n background(0);\n }\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The circle changes color to red when the user presses the \"r\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n }\n\n circle(50, 50, 40);\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 231, - "description": "

            Creates and names a function.\nA function is a set of statements that perform a task.

            \n

            Optionally, functions can have parameters. Parameters\nare variables that are scoped to the function, that can be assigned a value\nwhen calling the function.Multiple parameters can be given by seperating them\nwith commmas.

            \n

            From the MDN entry:\nDeclares a function with the specified parameters.

            \n", + "line": 317, + "description": "

            A named group of statements.

            \n

            Functions\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":

            \n\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n

            // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n

            \n

            The function header begins with the keyword function. The function's\nname, drawFlower, is followed by parentheses () and curly braces {}.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:

            \n\ndrawFlower();\n\n\n

            Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the drawFlower() function could include\na parameter for the flower's size:

            \n\nfunction drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n

            // Use the size parameter.\n textSize(size);

            \n

            // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n

            \n

            Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:

            \n\n// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n\n\n

            Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the drawFlower() function could accept\nNumber parameters for the flower's x- and y-coordinates along with its\nsize:

            \n\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n

            // Use the size parameter.\n textSize(size);

            \n

            // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n

            \n

            Functions can also produce outputs by adding a return statement:

            \n\nfunction double(x) {\n let answer = 2 * x;\n return answer;\n}\n\n\n

            The expression following return can produce an output that's used\nelsewhere. For example, the output of the double() function can be\nassigned to a variable:

            \n\nlet six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n", "itemtype": "property", "name": "function", "example": [ - "\n
            \n\nlet myName = 'Hridi';\nfunction sayHello(name) {\n console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n\n
            \n\n
            \n\nlet square = number => number * number;\nconsole.log(square(5));\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, 🌍!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('🌍');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 267, - "description": "

            Specifies the value to be returned by a function.\nFor more info checkout \nthe MDN entry for return.

            \n", + "line": 502, + "description": "

            A value that's either true or false.

            \n

            Boolean values help to make decisions in code. They appear any time a\nlogical condition is checked. For example, the condition\n\"Is a mouse button being pressed?\" must be either true or\nfalse:

            \n\n// If the user presses the mouse, draw a circle at\n// the mouse's location.\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

            The if statement checks whether\nmouseIsPressed is true and draws a\ncircle if it is. Boolean expressions such as mouseIsPressed === true\nevaluate to one of the two possible Boolean values: true or false.

            \n

            The === operator (EQUAL) checks whether two values are equal. If they\nare, the expression evaluates to true. Otherwise, it evaluates to\nfalse.

            \n

            Note: There's also a == operator with two = instead of three. Don't use\nit.

            \n

            The mouseIsPressed system variable is\nalways true or false, so the code snippet above could also be written\nas follows:

            \n\nif (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

            The !== operator (NOT EQUAL) checks whether two values are not equal, as\nin the following example:

            \n\nif (2 + 2 !== 4) {\n text('War is peace.', 50, 50);\n}\n\n\n

            Starting from the left, the arithmetic expression 2 + 2 produces the\nvalue 4. The Boolean expression 4 !== 4 evaluates to false because\n4 is equal to itself. As a result, the if statement's body is skipped.

            \n

            Note: There's also a != operator with one = instead of two. Don't use\nit.

            \n

            The Boolean operator && (AND) checks whether two expressions are both\ntrue:

            \n\nif (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n\n\n

            If the user is pressing a key AND that key is 'p', then a message will\ndisplay.

            \n

            The Boolean operator || (OR) checks whether at least one of two\nexpressions is true:

            \n\nif (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n\n\n

            If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.

            \n

            The following truth table summarizes a few common scenarios with && and\n||:

            \n\ntrue && true // true\ntrue && false // false\nfalse && false // false\ntrue || true // true\ntrue || false // true\nfalse || false // true\n\n\n

            The relational operators >, <, >=, and <= also produce Boolean\nvalues:

            \n\n2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n\n\n

            See Number for more information about Numbers.

            \n", "itemtype": "property", - "name": "return", + "name": "Boolean", "example": [ - "\n
            \n\nfunction calculateSquare(x) {\n return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square that turns pink when the user presses the mouse or a key.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, change the background color.\n if (mouseIsPressed === true || keyIsPressed === true) {\n background('deeppink');\n }\n}\n\n
            \n\n\n
            \n// Click the canvas to begin detecting key presses.\n\n// Create a Boolean variable.\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'The message \"Begin?\\nY or N\" written in green on a black background. The message \"Good luck!\" appears when they press the \"y\" key.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n fill(0, 255, 0);\n\n // Display a different message when the user begins playing.\n if (isPlaying === false) {\n text('Begin?', 50, 40);\n text('Y or N', 50, 60);\n } else {\n text('Good luck!', 50, 50);\n }\n}\n\n// Start playing when the user presses the 'y' key.\nfunction keyPressed() {\n if (key === 'y') {\n isPlaying = true;\n }\n}\n
            \n            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 288, - "description": "

            A boolean is one of the 7 primitive data types in Javascript.\nA boolean can only be true or false.

            \n

            From the MDN entry:\nBoolean represents a logical entity and can have two values: true, and false.

            \n", + "line": 709, + "description": "

            A sequence of text characters.

            \n

            The String data type is helpful for working with text. For example, a\nstring could contain a welcome message:

            \n\n// Use a string literal.\ntext('Hello!', 10, 10);\n\n\n\n// Create a string variable.\nlet message = 'Hello!';\n\n

            // Use the string variable.\ntext(message, 10, 10);\n

            \n

            The most common way to create strings is to use some form of quotations as\nfollows:

            \n\ntext(\"hi\", 50, 50);\n\n\n\ntext('hi', 50, 50);\n\n\n\ntext(`hi`, 50, 50);\n\n\n

            \"hi\", 'hi', and hi are all string literals. A \"literal\" means a\nvalue was actually written, as in text('hi', 50, 50). By contrast,\ntext(message, 50, 50) uses the variable message, so it isn't a string\nliteral.

            \n

            Single quotes '' and double quotes \"\" mean the same thing. It's nice to\nhave the option for cases when a string contains one type of quote:

            \n\ntext(\"What's up?\", 50, 50);\n\n\n\ntext('Air quotes make you look \"cool.\"', 50, 50);\n\n\n

            Backticks ```` create template literals. Template literals have many uses.\nFor example, they can contain both single and double quotes as needed:

            \n\ntext(`\"Don't you forget about me\"`, 10, 10); \n\n\n

            Template literals are helpful when strings are created from variables like\nso:

            \n\nlet size = random(10, 20);\ncircle(50, 50, size);\n\n

            text(The circle's diameter is ${size} pixels., 10, 10);\n

            \n

            The size variable's value will replace ${size} when the string is\ncreated. ${} is a placeholder for any value. That means an expression can\nbe used, as in ${round(PI, 3)}. All of the following are valid template\nliterals:

            \n\ntext(`π is about ${round(PI, 2)} pixels.`, 10, 10);\ntext(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);\n\n\n

            Template literals can include several variables:

            \n\nlet x = random(0, 100);\nlet y = random(0, 100);\nlet size = random(10, 20);\ncircle(x, y, size);\n\n

            text(The circle at (${x}, ${y}) has a diameter of ${size} pixels., 10, 10);\n

            \n

            Template literals are also helpful for creating multi-line text like so:

            \n\nlet poem = `My sketch doesn't run;\nit waits for me patiently\nwhile bugs point the way.`;\n\n

            text(poem, 10, 10);\n

            \n", "itemtype": "property", - "name": "boolean", + "name": "String", "example": [ - "\n
            \n\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Display a welcome message.\n text('Hello!', 50, 50);\n\n describe('The text \"Hello!\" written on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Create a string variable.\n let world = '🌍';\n\n // Display a welcome message using a template string.\n text(`Hello, ${world}!`, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 309, - "description": "

            A string is one of the 7 primitive data types in Javascript.\nA string is a series of text characters. In Javascript, a string value must\nbe surrounded by either single-quotation marks(') or double-quotation marks(\").

            \n

            From the MDN entry:\nA string is a sequence of characters used to represent text.

            \n", + "line": 852, + "description": "

            A number that can be positive, negative, or zero.

            \n

            The Number data type is useful for describing values such as position,\nsize, and color. A number can be an integer such as 20 or a decimal number\nsuch as 12.34. For example, a circle's position and size can be described\nby three numbers:

            \n\ncircle(50, 50, 20);\n\n\n\ncircle(50, 50, 12.34);\n\n\n

            Numbers support basic arithmetic and follow the standard order of\noperations: Parentheses, Exponents, Multiplication, Division, Addition,\nand Subtraction (PEMDAS). For example, it's common to use arithmetic\noperators with p5.js' system variables that are numbers:

            \n\n// Draw a circle at the center.\ncircle(width / 2, height / 2, 20);\n\n\n\n// Draw a circle that moves from left to right.\ncircle(frameCount * 0.01, 50, 20);\n\n\n

            Here's a quick overview of the arithmetic operators:

            \n\n1 + 2 // Add\n1 - 2 // Subtract\n1 * 2 // Multiply\n1 / 2 // Divide\n1 % 2 // Remainder\n1 ** 2 // Exponentiate\n\n\n

            It's common to update a number variable using arithmetic. For example, an\nobject's location can be updated like so:

            \n\nx = x + 1;\n\n\n

            The statement above adds 1 to a variable x using the + operator. The\naddition assignment operator += expresses the same idea:

            \n\nx += 1;\n\n\n

            Here's a quick overview of the assignment operators:

            \n\nx += 2 // Addition assignment\nx -= 2 // Subtraction assignment\nx *= 2 // Multiplication assignment\nx /= 2 // Division assignment\nx %= 2 // Remainder assignment\n\n\n

            Numbers can be compared using the\nrelational operators\n>, <, >=, <=, ===, and !==. For example, a sketch's\nframeCount can be used as a timer:

            \n\nif (frameCount > 1000) {\n text('Game over!', 50, 50);\n}\n\n\n

            An expression such as frameCount > 1000 evaluates to a Boolean value\nthat's either true or false. The relational operators all produce\nBoolean values:

            \n\n2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n2 === 2 // true\n2 !== 2 // false\n\n\n

            See Boolean for more information about comparisons and conditions.

            \n

            Note: There are also == and != operators with one fewer =. Don't use them.

            \n

            Expressions with numbers can also produce special values when something\ngoes wrong:

            \n\nsqrt(-1) // NaN\n1 / 0 // Infinity\n\n\n

            The value NaN stands for\nNot-A-Number.\nNaN appears when calculations or conversions don't work. Infinity is a\nvalue that's larger than any number. It appears during certain\ncalculations.

            \n", "itemtype": "property", - "name": "string", + "name": "Number", "example": [ - "\n
            \n\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle at the center.\n circle(50, 50, 70);\n\n // Draw a smaller circle at the center.\n circle(width / 2, height / 2, 30);\n\n describe('Two concentric, white circles drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle travels from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n circle(frameCount * 0.01, 50, 20);\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 331, - "description": "

            A number is one of the 7 primitive data types in Javascript.\nA number can be a whole number or a decimal number.

            \n

            The MDN entry for number

            \n", + "line": 998, + "description": "

            A container for data that's stored as key-value pairs.

            \n

            Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.

            \n

            For example, an object could contain the location, size, and appearance of\na dog:

            \n\n// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '🐶' };\n\n

            // Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);

            \n

            // Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n

            \n

            The variable dog is assigned an object with four properties. Objects\nare declared with curly braces {}. Values can be accessed using the dot\noperator, as in dog.size. In the example above, the key size\ncorresponds to the value 20. Objects can also be empty to start:

            \n\n// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n

            // Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '🐱';

            \n

            // Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);

            \n

            // Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n

            \n

            An object's data can be updated while a sketch runs. For example, the cat\ncould run away from the dog by updating its location:

            \n\n// Run to the right.\ncat.x += 5;\n\n\n

            If needed, an object's values can be accessed using square brackets []\nand strings instead of dot notation:

            \n\n// Run to the right.\ncat[\"x\"] += 5;\n\n\n

            This syntax can be helpful when the key's name has spaces, as in\ncat['height (m)'].

            \n", "itemtype": "property", - "name": "number", + "name": "Object", "example": [ - "\n
            \n\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n\n
            " + "\n
            \n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n circle(data.x, data.y, data.d);\n}\n\n
            \n\n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n}\n\n\n
            \n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n\n // Update the object's x and y properties.\n data.x += random(-1, 1);\n data.y += random(-1, 1);\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 351, - "description": "

            From MDN's object basics:\n An object is a collection of related data and/or\n functionality (which usually consists of several variables and functions —\n which are called properties and methods when they are inside objects.)

            \n", + "line": 1137, + "description": "

            A list that keeps several pieces of data in order.

            \n

            Arrays are helpful for storing related data. They can contain data of any\ntype. For example, an array could contain a list of someone's favorite\ncolors as strings. Arrays are created as follows:

            \n\nlet colors = ['deeppink', 'darkorchid', 'magenta'];\n\n\n

            Each piece of data in an array is called an element. Each element has an\naddress, or index, within its array. The variable colors refers to an\narray with three String> elements, 'deeppink',\n'darkorchid', and 'magenta'. Arrays are zero-indexed, which means\nthat 'deeppink' is at index 0, 'darkorchid' is at index 1, and\n'magenta' is at index 2. Array elements can be accessed using their\nindices as follows:

            \n\nlet zeroth = colors[0]; // 'deeppink'\nlet first = colors[1]; // 'darkorchid'\nlet second = colors[2]; // 'magenta'\n\n\n

            Elements can be added to the end of an array by calling the push()\nmethod as follows:

            \n\ncolors.push('lavender');\n\n

            let third = colors[3]; // 'lavender'\n

            \n

            See MDN\nfor more information about arrays.

            \n", "itemtype": "property", - "name": "object", + "name": "Array", "example": [ - "\n
            \n \n let author = {\n name: 'Ursula K Le Guin',\n books: [\n 'The Left Hand of Darkness',\n 'The Dispossessed',\n 'A Wizard of Earthsea'\n ]\n };\n console.log(author.name); // prints 'Ursula K Le Guin' to the console\n \n
            " + "\n
            \n\n// Declare the variable xCoordinates and assign it an array\n// with three numeric elements.\nlet xCoordinates = [25, 50, 75];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Three white circles drawn in a horizontal line on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 25.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 50.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 75.\n circle(xCoordinates[2], 50, 20);\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an array with three numeric elements.\nlet xCoordinates = [20, 40, 60];\n\n// Add another element to the end of the array.\nxCoordinates.push(80);\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 20.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 40.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 60.\n circle(xCoordinates[2], 50, 20);\n\n // Access the element at index 3, which is 80.\n circle(xCoordinates[3], 50, 20);\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe(\n 'Four white circles in a horizontal line on a gray background. The circles move randomly.'\n );\n}\n\nfunction draw() {\n background(200);\n\n for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element at index i.\n xCoordinates[i] += random(-1, 1);\n\n // Use the element at index i to draw a circle.\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 379, - "description": "

            Creates and names a class which is a template for\nthe creation of objects.

            \n

            From the MDN entry:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.

            \n", + "line": 1325, + "description": "

            A template for creating objects of a particular type.

            \n

            Classes can make it easier to program with objects. For example, a Frog\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a Frog\nclass:

            \n\nlet fifi = new Frog(50, 50, 20);\n\n\n

            The variable fifi refers to an instance of the Frog class. The keyword\nnew is used to call the Frog class' constructor in the statement\nnew Frog(). Altogether, a new Frog object was created and assigned to\nthe variable fifi. Classes are templates, so they can be used to create\nmore than one instance:

            \n\n// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n

            // Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n

            \n

            A simple Frog class could be declared as follows:

            \n\nclass Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n

            show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }

            \n

            hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}\n

            \n

            Class declarations begin with the keyword class followed by the class\nname, such as Frog, and curly braces {}. Class names should use\nPascalCase and can't have spaces in their names. For example, naming a\nclass Kermit The Frog with spaces between each word would throw a\nSyntaxError. The code between the curly braces {} defines the class.

            \n

            Functions that belong to a class are called methods. constructor(),\nshow(), and hop() are methods in the Frog class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the function keyword.

            \n

            constructor() is a special method that's called once when an instance of\nthe class is created. The statement new Frog() calls the Frog class'\nconstructor() method.

            \n

            A class definition is a template for instances. The keyword this refers\nto an instance's data and methods. For example, each Frog instance has\nunique coordinates stored in this.x and this.y. The show() method\nuses those coordinates to draw the frog. The hop() method updates those\ncoordinates when called. Once a Frog instance is created, its data and\nmethods can be accessed using the dot operator . as follows:

            \n\n// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n

            // Show the Frog.\nfifi.show();

            \n

            // Hop.\nfifi.hop();\n

            \n", "itemtype": "property", "name": "class", "example": [ - "\n
            \n\nclass Rectangle {\n constructor(name, height, width) {\n this.name = name;\n this.height = height;\n this.width = width;\n }\n}\nlet square = new Rectangle('square', 1, 1); // creating new instance of Polygon Class.\nconsole.log(square.width); // prints '1' to the console\n\n
            " + "\n
            \n\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
            \n\n
            \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
            \n\n
            \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a gray background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n\n
            \n\n
            \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
            \n\n
            \n\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a gray background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 408, - "description": "

            for creates a loop that is useful for executing one\nsection of code multiple times.

            \n

            A 'for loop' consists of three different expressions inside of a parenthesis,\nall of which are optional.These expressions are used to control the number of\ntimes the loop is run.The first expression is a statement that is used to set\nthe initial state for the loop.The second expression is a condition that you\nwould like to check before each loop. If this expression returns false then\nthe loop will exit.The third expression is executed at the end of each loop.\nThese expression are separated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.

            \n

            The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.

            \n

            As with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. The test condition with a for loop\nis the second expression detailed above. Ensuring that this expression can eventually\nbecome false ensures that your loop doesn't attempt to run an infinite amount of times,\nwhich can crash your browser.

            \n

            From the MDN entry:\nCreates a loop that executes a specified statement until the test condition evaluates to false.\nThe condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

            \n", + "line": 1684, + "description": "

            A way to repeat a block of code when the number of iterations is known.

            \n

            for loops are helpful for repeating statements a certain number of times.\nFor example, a for loop makes it easy to express the idea\n\"draw five lines\" like so:

            \n\nfor (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n}\n\n\n

            The loop's header begins with the keyword for. Loops generally count up\nor count down as they repeat, or iterate. The statements in parentheses\nlet x = 10; x < 100; x += 20 tell the loop how it should repeat:

            \n
              \n
            • let x = 10 tells the loop to start counting at 10 and keep track of iterations using the variable x.
              • \n
            • x < 100 tells the loop to count up to, but not including, 100.
              • \n
            • x += 20 tells the loop to count up by 20 at the end of each iteration.
              • \n
            \n

            The code between the curly braces {} is the loop's body. Statements in the\nloop body are repeated during each iteration of the loop.

            \n

            It's common to create infinite loops accidentally. When this happens,\nsketches may become unresponsive and the web browser may display a warning.\nFor example, the following loop never stops iterating because it doesn't\ncount up:

            \n\nfor (let x = 10; x < 100; x = 20) {\n line(x, 25, x, 75);\n}\n\n\n

            The statement x = 20 keeps the variable x stuck at 20, which is\nalways less than 100.

            \n

            for loops can also count down:

            \n\nfor (let d = 100; d > 0; d -= 10) {\n circle(50, 50, d);\n}\n\n\n

            for loops can also contain other loops. The following nested loop draws a\ngrid of points:

            \n\n// Loop from left to right.\nfor (let x = 10; x < 100; x += 10) {\n\n

            // Loop from top to bottom.\n for (let y = 10; y < 100; y += 10) {\n point(x, y);\n }

            \n

            }\n

            \n

            for loops are also helpful for iterating through the elements of an\narray. For example, it's common to iterate through an array that contains\ninformation about where or what to draw:

            \n\n// Create an array of x-coordinates.\nlet xCoordinates = [20, 40, 60];\n\n

            for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element.\n xCoordinates[i] += random(-1, 1);

            \n

            // Draw a circle.\n circle(xCoordinates[i], 50, 20);\n}\n

            \n

            If the array's values aren't modified, the for...of statement can\nsimplify the code. They're similar to for loops in Python and for-each\nloops in C++ and Java. The following loops have the same effect:

            \n\n// Draw circles with a for loop.\nlet xCoordinates = [20, 40, 60];\n\n

            for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n}\n

            \n\n// Draw circles with a for...of statement.\nlet xCoordinates = [20, 40, 60];\n\n

            for (let x of xCoordinates) {\n circle(x, 50, 20);\n}\n

            \n

            In the code snippets above, the variables i and x have different roles.

            \n

            In the first snippet, i counts from 0 up to 2, which is one less than\nxCoordinates.length. i is used to access the element in xCoordinates\nat index i.

            \n

            In the second code snippet, x isn't keeping track of the loop's progress\nor an index. During each iteration, x contains the next element of\nxCoordinates. x starts from the beginning of xCoordinates (20) and\nupdates its value to 40 and then 60 during the next iterations.

            \n", "itemtype": "property", "name": "for", "example": [ - "\n
            \n\nfor (let i = 0; i < 9; i++) {\n console.log(i);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw vertical lines using a loop.\n for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five white concentric circles drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw concentric circles using a loop.\n for (let d = 100; d > 0; d -= 20) {\n circle(50, 50, d);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A grid of black dots on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the spacing for points on the grid.\n let space = 10;\n\n // Increase the stroke weight.\n strokeWeight(3);\n\n // Loop from the left to the right.\n for (let x = space; x < 100; x += space) {\n // Loop from the top to the bottom.\n for (let y = space; y < 100; y += space) {\n point(x, y);\n }\n }\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
            \n\n
            \n\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 448, - "description": "

            while creates a loop that is useful for executing\none section of code multiple times.

            \n

            With a 'while loop', the code inside of the loop body (between the curly\nbraces) is run repeatedly until the test condition (inside of the parenthesis)\nevaluates to false. The condition is tested before executing the code body\nwith while, so if the condition is initially false\nthe loop body, or statement, will never execute.

            \n

            As with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. This is to keep your loop\nfrom trying to run an infinite amount of times, which can crash your browser.

            \n

            From the MDN entry:\nThe while statement creates a loop that executes a specified statement as long\nas the test condition evaluates to true.The condition is evaluated before\nexecuting the statement.

            \n", + "line": 1908, + "description": "

            A way to repeat a block of code.

            \n

            while loops are helpful for repeating statements while a condition is\ntrue. They're like if statements that repeat. For example, a while\nloop makes it easy to express the idea \"draw several lines\" like so:

            \n\n// Declare a variable to keep track of iteration.\nlet x = 10;\n\n

            // Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);

            \n

            // Increment by 20.\n x += 20;\n}\n

            \n

            The loop's header begins with the keyword while. Loops generally count up\nor count down as they repeat, or iterate. The statement in parentheses\nx < 100 is a condition the loop checks each time it iterates. If the\ncondition is true, the loop runs the code between the curly braces {},\nThe code between the curly braces is called the loop's body. If the\ncondition is false, the body is skipped and the loop is stopped.

            \n

            It's common to create infinite loops accidentally. For example, the\nfollowing loop never stops iterating because it doesn't count up:

            \n\n// Declare a variable to keep track of iteration.\nlet x = 10;\n\n

            // Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n}

            \n

            // This should be in the loop's body!\nx += 20;\n

            \n

            The statement x += 20 appears after the loop's body. That means the\nvariable x is stuck at 10, which is always less than 100.

            \n

            while loops are useful when the number of iterations isn't known in\nadvance. For example, concentric circles could be drawn at random\nincrements:

            \n\nlet d = 100;\nlet minSize = 5;\n\n

            while (d > minSize) {\n circle(50, 50, d);\n d -= random(10);\n}\n

            \n", "itemtype": "property", "name": "while", "example": [ - "\n
            \n\n// This example logs the lines below to the console\n// 4\n// 3\n// 2\n// 1\n// 0\nlet num = 5;\nwhile (num > 0) {\n num = num - 1;\n console.log(num);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Declare a variable to keep track of iteration.\n let x = 10;\n\n // Repeat as long as x < 100\n while (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n \"A gray square with several concentric circles at the center. The circles' sizes decrease at random increments.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n let d = 100;\n let minSize = 5;\n\n while (d > minSize) {\n circle(50, 50, d);\n d -= random(5, 15);\n }\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "p5", "module": "Foundation", "submodule": "Foundation" }, { "file": "src/core/reference.js", - "line": 490, - "description": "

            From the MDN entry:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON string.

            \n", - "itemtype": "method", - "name": "stringify", - "static": 1, - "params": [ - { - "name": "object", - "description": "

            :Javascript object that you would like to convert to JSON

            \n", - "type": "Object" - } - ], - "example": [ - "\n
            \n\nlet myObject = { x: 5, y: 6 };\nlet myObjectAsString = JSON.stringify(myObject);\nconsole.log(myObjectAsString); // prints \"{\"x\":5,\"y\":6}\" to the console\nconsole.log(typeof myObjectAsString); // prints 'string' to the console\n\n
            " - ], - "alt": "This example does not render anything", - "class": "JSON", - "module": "Foundation", - "submodule": "Foundation" - }, - { - "file": "src/core/reference.js", - "line": 512, - "description": "

            Prints a message to your browser's web console. When using p5, you can use print\nand console.log interchangeably.

            \n

            The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in Firefox\n, Chrome, Edge,\nand Safari.\nWith the online p5 editor the console\nis embedded directly in the page underneath the code editor.

            \n

            From the MDN entry:\nThe Console method log() outputs a message to the web console. The message may\nbe a single string (with optional substitution values),\nor it may be any one or more JavaScript objects.

            \n", - "itemtype": "method", - "name": "log", - "static": 1, + "line": 2024, + "description": "

            Prints a message to the web browser's console.

            \n

            The console\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a console.log() statement while studying how a section of\ncode works:

            \n\nif (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n

            // Game logic.\n}\n

            \n

            console.error() is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:

            \n\n// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n

            // Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n

            \n", "params": [ { "name": "message", - "description": "

            :Message that you would like to print to the console

            \n", + "description": "

            message to print to the console.

            \n", "type": "String|Expression|Object" } ], "example": [ - "\n
            \n\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n\n
            " + "\n
            \n\nfunction setup() {\n noCanvas();\n\n // Prints \"Hello!\" to the console.\n console.log('Hello!');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Try to load an image from a fake URL.\n // Call handleError() if the image fails to load.\n loadImage('https://example.com/cat.jpg', handleImage, handleError);\n}\n\n// Displays the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('A cat on a gray background.');\n}\n\n// Prints the error.\nfunction handleError(error) {\n console.error('Oops!', error);\n\n describe('A gray square.');\n}\n\n
            " ], - "alt": "This example does not render anything", "class": "console", "module": "Foundation", "submodule": "Foundation" @@ -9716,14 +9559,13 @@ { "file": "src/core/transform.js", "line": 11, - "description": "

            Multiplies the current matrix by the one specified through the parameters.\nThis is a powerful operation that can perform the equivalent of translate,\nscale, shear and rotate all at once. You can learn more about transformation\nmatrices on \nWikipedia.

            \n

            The naming of the arguments here follows the naming of the \nWHATWG specification and corresponds to a\ntransformation matrix of the\nform:

            \n
            \n

            \n
            \n

            \n", + "description": "

            Applies a transformation matrix to the coordinate system.

            \n

            Transformations such as\ntranslate(),\nrotate(), and\nscale()\nuse matrix-vector multiplication behind the scenes. A table of numbers,\ncalled a matrix, encodes each transformation. The values in the matrix\nthen multiply each point on the canvas, which is represented by a vector.

            \n

            applyMatrix() allows for many transformations to be applied at once. See\nWikipedia\nand MDN\nfor more details about transformations.

            \n

            There are two ways to call applyMatrix() in two and three dimensions.

            \n

            In 2D mode, the parameters a, b, c, d, e, and f, correspond to\nelements in the following transformation matrix:

            \n
            \n

            \n
            \n

            The numbers can be passed individually, as in\napplyMatrix(2, 0, 0, 0, 2, 0). They can also be passed in an array, as in\napplyMatrix([2, 0, 0, 0, 2, 0]).

            \n

            In 3D mode, the parameters a, b, c, d, e, f, g, h, i,\nj, k, l, m, n, o, and p correspond to elements in the\nfollowing transformation matrix:

            \n

            \n

            The numbers can be passed individually, as in\napplyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1). They can\nalso be passed in an array, as in\napplyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]).

            \n

            By default, transformations accumulate. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\napplyMatrix() inside the draw() function won't\ncause shapes to transform continuously.

            \n", "itemtype": "method", "name": "applyMatrix", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n // Equivalent to translate(x, y);\n applyMatrix(1, 0, 0, 1, 40 + step, 50);\n rect(0, 0, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n translate(50, 50);\n // Equivalent to scale(x, y);\n applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, 0, TWO_PI);\n let cos_a = cos(angle);\n let sin_a = sin(angle);\n background(200);\n translate(50, 50);\n // Equivalent to rotate(angle);\n applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, -PI / 4, PI / 4);\n background(200);\n translate(50, 50);\n // equivalent to shearX(angle);\n let shear_factor = 1 / tan(PI / 2 - angle);\n applyMatrix(1, 0, shear_factor, 1, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n}\n\nfunction draw() {\n background(200);\n rotateY(PI / 6);\n stroke(153);\n box(35);\n let rad = millis() / 1000;\n // Set rotation angles\n let ct = cos(rad);\n let st = sin(rad);\n // Matrix for rotation around the Y axis\n applyMatrix(\n ct, 0.0, st, 0.0,\n 0.0, 1.0, 0.0, 0.0,\n -st, 0.0, ct, 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n stroke(255);\n box(50);\n}\n\n
            \n\n
            \n\nfunction draw() {\n background(200);\n let testMatrix = [1, 0, 0, 1, 0, 0];\n applyMatrix(testMatrix);\n rect(0, 0, 50, 50);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n applyMatrix(1, 0, 0, 1, 50, 50);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n let m = [1, 0, 0, 1, 50, 50];\n applyMatrix(m);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n let angle = QUARTER_PI;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, sa, -sa, ca, 0, 0);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n applyMatrix(0.5, 0, 0, 0.5, 0, 0);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the shear factor.\n let angle = QUARTER_PI;\n let shearFactor = 1 / tan(HALF_PI - angle);\n\n // Shear the coordinate system along the x-axis.\n applyMatrix(1, 0, shearFactor, 1, 0, 0);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);\n\n // Draw a box.\n box();\n}\n\n
            " ], - "alt": "A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing\nA rectangle in the upper left corner", "class": "p5", "module": "Transform", "submodule": "Transform", @@ -9733,50 +9575,50 @@ "params": [ { "name": "arr", - "description": "

            an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)

            \n", + "description": "

            an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).

            \n", "type": "Array" } ], "chainable": 1 }, { - "line": 157, + "line": 206, "params": [ { "name": "a", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "b", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "c", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "d", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "e", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "f", - "description": "

            numbers which define the 2×3 or 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 167, + "line": 216, "params": [ { "name": "a", @@ -9810,52 +9652,52 @@ }, { "name": "g", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "h", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "i", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "j", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "k", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "l", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "m", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "n", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "o", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" }, { "name": "p", - "description": "

            numbers which define the 4×4 matrix to be multiplied

            \n", + "description": "

            an element of the transformation matrix.

            \n", "type": "Number" } ], @@ -9865,23 +9707,22 @@ }, { "file": "src/core/transform.js", - "line": 197, - "description": "

            Replaces the current matrix with the identity matrix.

            \n", + "line": 246, + "description": "

            Clears all transformations applied to the coordinate system.

            \n", "itemtype": "method", "name": "resetMatrix", "chainable": 1, "example": [ - "\n
            \n\ntranslate(50, 50);\napplyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\nrect(0, 0, 20, 20);\n// Note that the translate is also reset.\nresetMatrix();\nrect(0, 0, 20, 20);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a red circle at the coordinates (25, 25).\n fill('blue');\n circle(25, 25, 20);\n\n // Clear all transformations.\n // The origin is now at the top-left corner.\n resetMatrix();\n\n // Draw a blue circle at the coordinates (25, 25).\n fill('red');\n circle(25, 25, 20);\n}\n\n
            " ], - "alt": "A rotated rectangle in the center with another at the top left corner", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 222, - "description": "

            Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for angleMode, so angles\ncan be entered in either RADIANS or DEGREES.

            \n

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

            \n

            Technically, rotate() multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\npush() and pop().

            \n", + "line": 289, + "description": "

            Rotates the coordinate system.

            \n

            By default, the positive x-axis points to the right and the positive y-axis\npoints downward. The rotate() function changes this orientation by\nrotating the coordinate system about the origin. Everything drawn after\nrotate() is called will appear to be rotated.

            \n

            The first parameter, angle, is the amount to rotate. For example, calling\nrotate(1) rotates the coordinate system clockwise 1 radian which is\nnearly 57˚. rotate() interprets angle values using the current\nangleMode().

            \n

            The second parameter, axis, is optional. It's used to orient 3D rotations\nin WebGL mode. If a p5.Vector is passed, as in\nrotate(QUARTER_PI, myVector), then the coordinate system will rotate\nQUARTER_PI radians about myVector. If an array of vector components is\npassed, as in rotate(QUARTER_PI, [1, 0, 0]), then the coordinate system\nwill rotate QUARTER_PI radians about a vector with the components\n[1, 0, 0].

            \n

            By default, transformations accumulate. For example, calling rotate(1)\ntwice has the same effect as calling rotate(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nrotate(1) inside the draw() function won't cause\nshapes to spin.

            \n", "itemtype": "method", "name": "rotate", "params": [ @@ -9899,111 +9740,106 @@ ], "chainable": 1, "example": [ - "\n
            \n\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Rotate the coordinate system another 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(45);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotate(angle);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = createVector(1, 1, 0);\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = [1, 1, 0];\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n\n
            " ], - "alt": "white 52×52 rect with black outline at center rotated counter 45 degrees", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 261, - "description": "

            Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

            \n

            Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

            \n", + "line": 471, + "description": "

            Rotates the coordinate system about the x-axis in WebGL mode.

            \n

            The parameter, angle, is the amount to rotate. For example, calling\nrotateX(1) rotates the coordinate system about the x-axis by 1 radian.\nrotateX() interprets angle values using the current\nangleMode().

            \n

            By default, transformations accumulate. For example, calling rotateX(1)\ntwice has the same effect as calling rotateX(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateX(1) inside the draw() function won't cause\nshapes to spin.

            \n", "itemtype": "method", "name": "rotateX", "params": [ { "name": "angle", - "description": "

            the angle of rotation, specified in radians\n or degrees, depending on current angleMode

            \n", + "description": "

            angle of rotation in the current angleMode().

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateX(millis() / 1000);\n box();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(45);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateX(angle);\n\n // Draw a box.\n box();\n}\n\n
            " ], - "alt": "3d box rotating around the x axis.", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 299, - "description": "

            Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

            \n

            Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

            \n", + "line": 607, + "description": "

            Rotates the coordinate system about the y-axis in WebGL mode.

            \n

            The parameter, angle, is the amount to rotate. For example, calling\nrotateY(1) rotates the coordinate system about the y-axis by 1 radian.\nrotateY() interprets angle values using the current\nangleMode().

            \n

            By default, transformations accumulate. For example, calling rotateY(1)\ntwice has the same effect as calling rotateY(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateY(1) inside the draw() function won't cause\nshapes to spin.

            \n", "itemtype": "method", "name": "rotateY", "params": [ { "name": "angle", - "description": "

            the angle of rotation, specified in radians\n or degrees, depending on current angleMode

            \n", + "description": "

            angle of rotation in the current angleMode().

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateY(millis() / 1000);\n box();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(45);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateY(angle);\n\n // Draw a box.\n box();\n}\n\n
            " ], - "alt": "3d box rotating around the y axis.", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 337, - "description": "

            Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

            \n

            This method works in WEBGL mode only.

            \n

            Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

            \n", + "line": 743, + "description": "

            Rotates the coordinate system about the z-axis in WebGL mode.

            \n

            The parameter, angle, is the amount to rotate. For example, calling\nrotateZ(1) rotates the coordinate system about the z-axis by 1 radian.\nrotateZ() interprets angle values using the current\nangleMode().

            \n

            By default, transformations accumulate. For example, calling rotateZ(1)\ntwice has the same effect as calling rotateZ(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateZ(1) inside the draw() function won't cause\nshapes to spin.

            \n", "itemtype": "method", "name": "rotateZ", "params": [ { "name": "angle", - "description": "

            the angle of rotation, specified in radians\n or degrees, depending on current angleMode

            \n", + "description": "

            angle of rotation in the current angleMode().

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateZ(millis() / 1000);\n box();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(45);\n\n // Draw a box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateZ(angle);\n\n // Draw a box.\n box();\n}\n\n
            " ], - "alt": "3d box rotating around the z axis.", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 377, - "description": "

            Increases or decreases the size of a shape by expanding or contracting\nvertices. Objects always scale from their relative origin to the\ncoordinate system. Scale values are specified as decimal percentages.\nFor example, the function call scale(2.0) increases the dimension of a\nshape by 200%.

            \n

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

            \n

            Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with push() and pop().

            \n", + "line": 879, + "description": "

            Scales the coordinate system.

            \n

            By default, shapes are drawn at their original scale. A rectangle that's 50\npixels wide appears to take up half the width of a 100 pixel-wide canvas.\nThe scale() function can shrink or stretch the coordinate system so that\nshapes appear at different sizes. There are two ways to call scale() with\nparameters that set the scale factor(s).

            \n

            The first way to call scale() uses numbers to set the amount of scaling.\nThe first parameter, s, sets the amount to scale each axis. For example,\ncalling scale(2) stretches the x-, y-, and z-axes by a factor of 2. The\nnext two parameters, y and z, are optional. They set the amount to\nscale the y- and z-axes. For example, calling scale(2, 0.5, 1) stretches\nthe x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and\nleaves the z-axis unchanged.

            \n

            The second way to call scale() uses a p5.Vector\nobject to set the scale factors. For example, calling scale(myVector)\nuses the x-, y-, and z-components of myVector to set the amount of\nscaling along the x-, y-, and z-axes. Doing so is the same as calling\nscale(myVector.x, myVector.y, myVector.z).

            \n

            By default, transformations accumulate. For example, calling scale(1)\ntwice has the same effect as calling scale(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nscale(2) inside the draw() function won't cause\nshapes to grow continuously.

            \n", "itemtype": "method", "name": "scale", "chainable": 1, "example": [ - "\n
            \n\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n\n
            \n\n
            \n\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n scale(0.5);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(0.5, 1.3);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Create a p5.Vector object.\n let v = createVector(0.5, 1.3);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(v);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n box();\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis and\n // 2 along the z-axis.\n scale(0.5, 1.3, 2);\n\n // Draw the blue sphere.\n fill('blue');\n box();\n}\n\n
            " ], - "alt": "white 52×52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50×50 at center. other 25×65 bottom left", "class": "p5", "module": "Transform", "submodule": "Transform", "overloads": [ { - "line": 377, + "line": 879, "params": [ { "name": "s", - "description": "

            percent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given

            \n", + "description": "

            amount to scale along the positive x-axis.

            \n", "type": "Number|p5.Vector|Number[]" }, { "name": "y", - "description": "

            percent to scale the object in the y-axis

            \n", + "description": "

            amount to scale along the positive y-axis. Defaults to s.

            \n", "type": "Number", "optional": true }, { "name": "z", - "description": "

            percent to scale the object in the z-axis (webgl only)

            \n", + "description": "

            amount to scale along the positive z-axis. Defaults to y.

            \n", "type": "Number", "optional": true } @@ -10011,11 +9847,11 @@ "chainable": 1 }, { - "line": 421, + "line": 1040, "params": [ { "name": "scales", - "description": "

            per-axis percents to scale the object

            \n", + "description": "

            vector whose components should be used to scale.

            \n", "type": "p5.Vector|Number[]" } ], @@ -10025,79 +9861,76 @@ }, { "file": "src/core/transform.js", - "line": 451, - "description": "

            Shears a shape around the x-axis by the amount specified by the angle\nparameter. Angles should be specified in the current angleMode.\nObjects are always sheared around their relative position to the origin\nand positive numbers shear objects in a clockwise direction.

            \n

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

            \n

            Technically, shearX() multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the push() and pop() functions.

            \n", + "line": 1070, + "description": "

            Shears the x-axis so that shapes appear skewed.

            \n

            By default, the x- and y-axes are perpendicular. The shearX() function\ntransforms the coordinate system so that x-coordinates are translated while\ny-coordinates are fixed.

            \n

            The first parameter, angle, is the amount to shear. For example, calling\nshearX(1) transforms all x-coordinates using the formula\nx = x + y * tan(angle). shearX() interprets angle values using the\ncurrent angleMode().

            \n

            By default, transformations accumulate. For example, calling\nshearX(1) twice has the same effect as calling shearX(2) once. The\npush() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nshearX(1) inside the draw() function won't\ncause shapes to shear continuously.

            \n", "itemtype": "method", "name": "shearX", "params": [ { "name": "angle", - "description": "

            angle of shear specified in radians or degrees,\n depending on current angleMode

            \n", + "description": "

            angle to shear by in the current angleMode().

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
            " ], - "alt": "white irregular quadrilateral with black outline at top middle.", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 490, - "description": "

            Shears a shape around the y-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode. Objects\nare always sheared around their relative position to the origin and\npositive numbers shear objects in a clockwise direction.

            \n

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

            \n

            Technically, shearY() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.

            \n", + "line": 1147, + "description": "

            Shears the y-axis so that shapes appear skewed.

            \n

            By default, the x- and y-axes are perpendicular. The shearY() function\ntransforms the coordinate system so that y-coordinates are translated while\nx-coordinates are fixed.

            \n

            The first parameter, angle, is the amount to shear. For example, calling\nshearY(1) transforms all y-coordinates using the formula\ny = y + x * tan(angle). shearY() interprets angle values using the\ncurrent angleMode().

            \n

            By default, transformations accumulate. For example, calling\nshearY(1) twice has the same effect as calling shearY(2) once. The\npush() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\nshearY(1) inside the draw() function won't\ncause shapes to shear continuously.

            \n", "itemtype": "method", "name": "shearY", "params": [ { "name": "angle", - "description": "

            angle of shear specified in radians or degrees,\n depending on current angleMode

            \n", + "description": "

            angle to shear by in the current angleMode().

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
            " ], - "alt": "white irregular quadrilateral with black outline at middle bottom.", "class": "p5", "module": "Transform", "submodule": "Transform" }, { "file": "src/core/transform.js", - "line": 529, - "description": "

            Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.

            \n

            Transformations are cumulative and apply to everything that happens after\nand subsequent calls to the function accumulates the effect. For example,\ncalling translate(50, 0) and then translate(20, 0) is the same as\ntranslate(70, 0). If translate() is called within draw(), the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using push() and pop().

            \n", + "line": 1224, + "description": "

            Translates the coordinate system.

            \n

            By default, the origin (0, 0) is at the sketch's top-left corner in 2D\nmode and center in WebGL mode. The translate() function shifts the origin\nto a different position. Everything drawn after translate() is called\nwill appear to be shifted. There are two ways to call translate() with\nparameters that set the origin's position.

            \n

            The first way to call translate() uses numbers to set the amount of\ntranslation. The first two parameters, x and y, set the amount to\ntranslate along the positive x- and y-axes. For example, calling\ntranslate(20, 30) translates the origin 20 pixels along the x-axis and 30\npixels along the y-axis. The third parameter, z, is optional. It sets the\namount to translate along the positive z-axis. For example, calling\ntranslate(20, 30, 40) translates the origin 20 pixels along the x-axis,\n30 pixels along the y-axis, and 40 pixels along the z-axis.

            \n

            The second way to call translate() uses a\np5.Vector object to set the amount of\ntranslation. For example, calling translate(myVector) uses the x-, y-,\nand z-components of myVector to set the amount to translate along the x-,\ny-, and z-axes. Doing so is the same as calling\ntranslate(myVector.x, myVector.y, myVector.z).

            \n

            By default, transformations accumulate. For example, calling\ntranslate(10, 0) twice has the same effect as calling\ntranslate(20, 0) once. The push() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

            \n

            Note: Transformations are reset at the beginning of the draw loop. Calling\ntranslate(10, 0) inside the draw() function won't\ncause shapes to move continuously.

            \n", "itemtype": "method", "name": "translate", "chainable": 1, "example": [ - "\n
            \n\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n\n
            \n\n
            \n\nrect(0, 0, 55, 55); // Draw rect at original 0,0\ntranslate(30, 20);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\ntranslate(14, 14);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\n\n
            \n\n\n
            \n\nfunction draw() {\n background(200);\n rectMode(CENTER);\n translate(width / 2, height / 2);\n translate(p5.Vector.fromAngle(millis() / 1000, 40));\n rect(0, 0, 20, 20);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw the red circle.\n fill('red');\n circle(0, 0, 40);\n\n // Translate the origin to the right.\n translate(25, 0);\n\n // Draw the blue circle.\n fill('blue');\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves slowly from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the x-coordinate.\n let x = frameCount * 0.2;\n\n // Translate the origin.\n translate(x, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector object.\n let v = createVector(50, 50);\n\n // Translate the origin by the vector.\n translate(v);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n sphere(10);\n\n // Translate the origin to the right.\n translate(30, 0, 0);\n\n // Draw the blue sphere.\n fill('blue');\n sphere(10);\n}\n\n
            " ], - "alt": "white 55×55 rect with black outline at center right.\n3 white 55×55 rects with black outlines at top-l, center-r and bottom-r.\na 20×20 white rect moving in a circle around the canvas", "class": "p5", "module": "Transform", "submodule": "Transform", "overloads": [ { - "line": 529, + "line": 1224, "params": [ { "name": "x", - "description": "

            left/right translation

            \n", + "description": "

            amount to translate along the positive x-axis.

            \n", "type": "Number" }, { "name": "y", - "description": "

            up/down translation

            \n", + "description": "

            amount to translate along the positive y-axis.

            \n", "type": "Number" }, { "name": "z", - "description": "

            forward/backward translation (WEBGL only)

            \n", + "description": "

            amount to translate along the positive z-axis.

            \n", "type": "Number", "optional": true } @@ -10105,11 +9938,11 @@ "chainable": 1 }, { - "line": 582, + "line": 1395, "params": [ { "name": "vector", - "description": "

            the vector to translate by

            \n", + "description": "

            vector by which to translate.

            \n", "type": "p5.Vector" } ], @@ -11476,7 +11309,7 @@ }, { "file": "src/dom/dom.js", - "line": 2467, + "line": 2474, "description": "

            Creates a new p5.Element object.

            \n

            The first parameter, tag, is a string an HTML tag such as 'h5'.

            \n

            The second parameter, content, is optional. It's a string that sets the\nHTML content to insert into the new element. New elements have no content\nby default.

            \n", "itemtype": "method", "name": "createElement", @@ -11506,7 +11339,7 @@ }, { "file": "src/dom/dom.js", - "line": 2528, + "line": 2535, "description": "

            Adds a class to the element.

            \n", "itemtype": "method", "name": "addClass", @@ -11527,7 +11360,7 @@ }, { "file": "src/dom/dom.js", - "line": 2567, + "line": 2574, "description": "

            Removes a class from the element.

            \n", "itemtype": "method", "name": "removeClass", @@ -11548,7 +11381,7 @@ }, { "file": "src/dom/dom.js", - "line": 2610, + "line": 2617, "description": "

            Checks if a class is already applied to element.

            \n", "itemtype": "method", "name": "hasClass", @@ -11572,7 +11405,7 @@ }, { "file": "src/dom/dom.js", - "line": 2651, + "line": 2658, "description": "

            Toggles whether a class is applied to the element.

            \n", "itemtype": "method", "name": "toggleClass", @@ -11593,7 +11426,7 @@ }, { "file": "src/dom/dom.js", - "line": 2696, + "line": 2703, "description": "

            Attaches the element as a child of another element.

            \n

            myElement.child() accepts either a string ID, DOM node, or\np5.Element. For example,\nmyElement.child(otherElement). If no argument is provided, an array of\nchildren DOM nodes is returned.

            \n", "itemtype": "method", "name": "child", @@ -11609,7 +11442,7 @@ "submodule": "DOM", "overloads": [ { - "line": 2696, + "line": 2703, "params": [], "return": { "description": "an array of child nodes.", @@ -11617,7 +11450,7 @@ } }, { - "line": 2776, + "line": 2783, "params": [ { "name": "child", @@ -11632,7 +11465,7 @@ }, { "file": "src/dom/dom.js", - "line": 2801, + "line": 2808, "description": "

            Centers the element either vertically, horizontally, or both.

            \n

            center() will center the element relative to its parent or according to\nthe page's body if the element has no parent.

            \n

            If no argument is passed, as in myElement.center() the element is aligned\nboth vertically and horizontally.

            \n", "itemtype": "method", "name": "center", @@ -11654,7 +11487,7 @@ }, { "file": "src/dom/dom.js", - "line": 2867, + "line": 2874, "description": "

            Sets the inner HTML of the element, replacing any existing HTML.

            \n

            The second parameter, append, is optional. If true is passed, as in\nmyElement.html('hi', true), the HTML is appended instead of replacing\nexisting HTML.

            \n

            If no arguments are passed, as in myElement.html(), the element's inner\nHTML is returned.

            \n", "itemtype": "method", "name": "html", @@ -11670,7 +11503,7 @@ "submodule": "DOM", "overloads": [ { - "line": 2867, + "line": 2874, "params": [], "return": { "description": "the inner HTML of the element", @@ -11678,7 +11511,7 @@ } }, { - "line": 2936, + "line": 2943, "params": [ { "name": "html", @@ -11699,7 +11532,7 @@ }, { "file": "src/dom/dom.js", - "line": 2954, + "line": 2961, "description": "

            Sets the element's position.

            \n

            The first two parameters, x and y, set the element's position relative\nto the top-left corner of the web page.

            \n

            The third parameter, positionType, is optional. It sets the element's\npositioning scheme.\npositionType is a string that can be either 'static', 'fixed',\n'relative', 'sticky', 'initial', or 'inherit'.

            \n

            If no arguments passed, as in myElement.position(), the method returns\nthe element's position in an object, as in { x: 0, y: 0 }.

            \n", "itemtype": "method", "name": "position", @@ -11715,7 +11548,7 @@ "submodule": "DOM", "overloads": [ { - "line": 2954, + "line": 2961, "params": [], "return": { "description": "object of form `{ x: 0, y: 0 }` containing the element's position.", @@ -11723,7 +11556,7 @@ } }, { - "line": 3005, + "line": 3012, "params": [ { "name": "x", @@ -11750,7 +11583,7 @@ }, { "file": "src/dom/dom.js", - "line": 3092, + "line": 3099, "description": "

            Applies a style to the element by adding a\nCSS declaration.

            \n

            The first parameter, property, is a string. If the name of a style\nproperty is passed, as in myElement.style('color'), the method returns\nthe current value as a string or null if it hasn't been set. If a\nproperty:style string is passed, as in\nmyElement.style('color:deeppink'), the method sets the style property\nto value.

            \n

            The second parameter, value, is optional. It sets the property's value.\nvalue can be a string, as in\nmyElement.style('color', 'deeppink'), or a\np5.Color object, as in\nmyElement.style('color', myColor).

            \n", "itemtype": "method", "name": "style", @@ -11766,7 +11599,7 @@ "submodule": "DOM", "overloads": [ { - "line": 3092, + "line": 3099, "params": [ { "name": "property", @@ -11780,7 +11613,7 @@ } }, { - "line": 3192, + "line": 3199, "params": [ { "name": "property", @@ -11803,7 +11636,7 @@ }, { "file": "src/dom/dom.js", - "line": 3249, + "line": 3256, "description": "

            Adds an\nattribute\nto the element.

            \n

            This method is useful for advanced tasks. Most commonly-used attributes,\nsuch as id, can be set with their dedicated methods. For example,\nnextButton.id('next') sets an element's id attribute. Calling\nnextButton.attribute('id', 'next') has the same effect.

            \n

            The first parameter, attr, is the attribute's name as a string. Calling\nmyElement.attribute('align') returns the attribute's current value as a\nstring or null if it hasn't been set.

            \n

            The second parameter, value, is optional. It's a string used to set the\nattribute's value. For example, calling\nmyElement.attribute('align', 'center') sets the element's horizontal\nalignment to center.

            \n", "itemtype": "method", "name": "attribute", @@ -11819,7 +11652,7 @@ "submodule": "DOM", "overloads": [ { - "line": 3249, + "line": 3256, "params": [], "return": { "description": "value of the attribute.", @@ -11827,7 +11660,7 @@ } }, { - "line": 3304, + "line": 3311, "params": [ { "name": "attr", @@ -11846,7 +11679,7 @@ }, { "file": "src/dom/dom.js", - "line": 3333, + "line": 3340, "description": "

            Removes an attribute from the element.

            \n

            The parameter attr is the attribute's name as a string. For example,\ncalling myElement.removeAttribute('align') removes its align\nattribute if it's been set.

            \n", "itemtype": "method", "name": "removeAttribute", @@ -11867,7 +11700,7 @@ }, { "file": "src/dom/dom.js", - "line": 3384, + "line": 3391, "description": "

            Returns or sets the element's value.

            \n

            Calling myElement.value() returns the element's current value.

            \n

            The parameter, value, is an optional number or string. If provided,\nas in myElement.value(123), it's used to set the element's value.

            \n", "itemtype": "method", "name": "value", @@ -11883,7 +11716,7 @@ "submodule": "DOM", "overloads": [ { - "line": 3384, + "line": 3391, "params": [], "return": { "description": "value of the element.", @@ -11891,7 +11724,7 @@ } }, { - "line": 3451, + "line": 3458, "params": [ { "name": "value", @@ -11905,7 +11738,7 @@ }, { "file": "src/dom/dom.js", - "line": 3467, + "line": 3474, "description": "

            Shows the current element.

            \n", "itemtype": "method", "name": "show", @@ -11919,7 +11752,7 @@ }, { "file": "src/dom/dom.js", - "line": 3503, + "line": 3510, "description": "

            Hides the current element.

            \n", "itemtype": "method", "name": "hide", @@ -11933,7 +11766,7 @@ }, { "file": "src/dom/dom.js", - "line": 3536, + "line": 3543, "description": "

            Sets the element's width and height.

            \n

            Calling myElement.size() without an argument returns the element's size\nas an object with the properties width and height. For example,\n { width: 20, height: 10 }.

            \n

            The first parameter, width, is optional. It's a number used to set the\nelement's width. Calling myElement.size(10)

            \n

            The second parameter, 'height, is also optional. It's a number used to set the element's height. For example, calling myElement.size(20, 10)` sets the element's width to 20 pixels and height\nto 10 pixels.

            \n

            The constant AUTO can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is width / height. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\nmyElement.size(20, AUTO) sets the width to 20 pixels and height to 10\npixels.

            \n

            Note: In the case of elements that need to load data, such as images, wait\nto call myElement.size() until after the data loads.

            \n", "itemtype": "method", "name": "size", @@ -11949,7 +11782,7 @@ "submodule": "DOM", "overloads": [ { - "line": 3536, + "line": 3543, "params": [], "return": { "description": "width and height of the element in an object.", @@ -11957,7 +11790,7 @@ } }, { - "line": 3650, + "line": 3657, "params": [ { "name": "w", @@ -11978,7 +11811,7 @@ }, { "file": "src/dom/dom.js", - "line": 3705, + "line": 3712, "description": "

            Removes the element, stops all audio/video streams, and removes all\ncallback functions.

            \n", "itemtype": "method", "name": "remove", @@ -11991,7 +11824,7 @@ }, { "file": "src/dom/dom.js", - "line": 3764, + "line": 3771, "description": "

            Calls a function when the user drops a file on the element.

            \n

            The first parameter, callback, is a function to call once the file loads.\nThe callback function should have one parameter, file, that's a\np5.File object. If the user drops multiple files on\nthe element, callback, is called once for each file.

            \n

            The second parameter, fxn, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, event, that's a\nDragEvent.

            \n", "itemtype": "method", "name": "drop", @@ -12018,7 +11851,7 @@ }, { "file": "src/dom/dom.js", - "line": 3919, + "line": 3926, "description": "

            Makes the element draggable.

            \n

            The parameter, elmnt, is optional. If another\np5.Element object is passed, as in\nmyElement.draggable(otherElement), the other element will become draggable.

            \n", "itemtype": "method", "name": "draggable", @@ -12040,14 +11873,14 @@ }, { "file": "src/dom/dom.js", - "line": 4055, + "line": 4062, "class": "p5.Element", "module": "DOM", "submodule": "DOM" }, { "file": "src/dom/dom.js", - "line": 4132, + "line": 4139, "description": "

            Path to the media element's source as a string.

            \n", "itemtype": "property", "name": "src", @@ -12064,7 +11897,7 @@ }, { "file": "src/dom/dom.js", - "line": 4189, + "line": 4196, "description": "

            Plays audio or video from a media element.

            \n", "itemtype": "method", "name": "play", @@ -12078,7 +11911,7 @@ }, { "file": "src/dom/dom.js", - "line": 4255, + "line": 4262, "description": "

            Stops a media element and sets its current time to 0.

            \n

            Calling media.play() will restart playing audio/video from the beginning.

            \n", "itemtype": "method", "name": "stop", @@ -12092,7 +11925,7 @@ }, { "file": "src/dom/dom.js", - "line": 4314, + "line": 4321, "description": "

            Pauses a media element.

            \n

            Calling media.play() will resume playing audio/video from the moment it paused.

            \n", "itemtype": "method", "name": "pause", @@ -12106,7 +11939,7 @@ }, { "file": "src/dom/dom.js", - "line": 4374, + "line": 4381, "description": "

            Plays the audio/video repeatedly in a loop.

            \n", "itemtype": "method", "name": "loop", @@ -12120,7 +11953,7 @@ }, { "file": "src/dom/dom.js", - "line": 4432, + "line": 4439, "description": "

            Stops the audio/video from playing in a loop.

            \n

            The media will stop when it finishes playing.

            \n", "itemtype": "method", "name": "noLoop", @@ -12134,7 +11967,7 @@ }, { "file": "src/dom/dom.js", - "line": 4512, + "line": 4519, "description": "

            Sets the audio/video to play once it's loaded.

            \n

            The parameter, shouldAutoplay, is optional. Calling\nmedia.autoplay() without an argument causes the media to play\nautomatically. If true is passed, as in media.autoplay(true), the\nmedia will automatically play. If false is passed, as in\nmedia.autoPlay(false), it won't play automatically.

            \n", "itemtype": "method", "name": "autoplay", @@ -12156,7 +11989,7 @@ }, { "file": "src/dom/dom.js", - "line": 4597, + "line": 4604, "description": "

            Sets the audio/video volume.

            \n

            Calling media.volume() without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).

            \n

            The parameter, val, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling media.volume(0.5)\nsets the volume to half of its maximum.

            \n", "itemtype": "method", "name": "volume", @@ -12172,7 +12005,7 @@ "submodule": "DOM", "overloads": [ { - "line": 4597, + "line": 4604, "params": [], "return": { "description": "current volume.", @@ -12180,7 +12013,7 @@ } }, { - "line": 4652, + "line": 4659, "params": [ { "name": "val", @@ -12194,7 +12027,7 @@ }, { "file": "src/dom/dom.js", - "line": 4665, + "line": 4672, "description": "

            Sets the audio/video playback speed.

            \n

            The parameter, val, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.

            \n

            Calling media.speed() returns the current speed as a number.

            \n

            Note: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.

            \n", "itemtype": "method", "name": "speed", @@ -12210,7 +12043,7 @@ "submodule": "DOM", "overloads": [ { - "line": 4665, + "line": 4672, "params": [], "return": { "description": "current playback speed.", @@ -12218,7 +12051,7 @@ } }, { - "line": 4723, + "line": 4730, "params": [ { "name": "speed", @@ -12232,7 +12065,7 @@ }, { "file": "src/dom/dom.js", - "line": 4740, + "line": 4747, "description": "

            Sets the media element's playback time.

            \n

            The parameter, time, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.

            \n

            Calling media.time() without an argument returns the number of seconds\nthe audio/video has played.

            \n

            Note: Time resets to 0 when looping media restarts.

            \n", "itemtype": "method", "name": "time", @@ -12248,7 +12081,7 @@ "submodule": "DOM", "overloads": [ { - "line": 4740, + "line": 4747, "params": [], "return": { "description": "current time (in seconds).", @@ -12256,7 +12089,7 @@ } }, { - "line": 4828, + "line": 4835, "params": [ { "name": "time", @@ -12270,7 +12103,7 @@ }, { "file": "src/dom/dom.js", - "line": 4842, + "line": 4849, "description": "

            Returns the audio/video's duration in seconds.

            \n", "itemtype": "method", "name": "duration", @@ -12287,7 +12120,7 @@ }, { "file": "src/dom/dom.js", - "line": 4998, + "line": 5005, "description": "

            Calls a function when the audio/video reaches the end of its playback.

            \n

            The element is passed as an argument to the callback function.

            \n

            Note: The function won't be called if the media is looping.

            \n", "itemtype": "method", "name": "onended", @@ -12308,14 +12141,14 @@ }, { "file": "src/dom/dom.js", - "line": 5067, + "line": 5074, "class": "p5.MediaElement", "module": "DOM", "submodule": "DOM" }, { "file": "src/dom/dom.js", - "line": 5069, + "line": 5076, "description": "

            Sends the element's audio to an output.

            \n

            The parameter, audioNode, can be an AudioNode or an object from the\np5.sound library.

            \n

            If no element is provided, as in myElement.connect(), the element\nconnects to the main output. All connections are removed by the\n.disconnect() method.

            \n

            Note: This method is meant to be used with the p5.sound.js addon library.

            \n", "itemtype": "method", "name": "connect", @@ -12332,7 +12165,7 @@ }, { "file": "src/dom/dom.js", - "line": 5122, + "line": 5129, "description": "

            Disconnect all Web Audio routing, including to the main output.

            \n

            This is useful if you want to re-route the output through audio effects,\nfor example.

            \n", "itemtype": "method", "name": "disconnect", @@ -12342,14 +12175,14 @@ }, { "file": "src/dom/dom.js", - "line": 5138, + "line": 5145, "class": "p5.MediaElement", "module": "DOM", "submodule": "DOM" }, { "file": "src/dom/dom.js", - "line": 5140, + "line": 5147, "description": "

            Show the default\nHTMLMediaElement\ncontrols.

            \n

            Note: The controls vary between web browsers.

            \n", "itemtype": "method", "name": "showControls", @@ -12362,7 +12195,7 @@ }, { "file": "src/dom/dom.js", - "line": 5181, + "line": 5188, "description": "

            Hide the default\nHTMLMediaElement\ncontrols.

            \n", "itemtype": "method", "name": "hideControls", @@ -12375,7 +12208,7 @@ }, { "file": "src/dom/dom.js", - "line": 5237, + "line": 5244, "description": "

            Schedules a function to call when the audio/video reaches a specific time\nduring its playback.

            \n

            The first parameter, time, is the time, in seconds, when the function\nshould run. This value is passed to callback as its first argument.

            \n

            The second parameter, callback, is the function to call at the specified\ncue time.

            \n

            The third parameter, value, is optional and can be any type of value.\nvalue is passed to callback.

            \n

            Calling media.addCue() returns an ID as a string. This is useful for\nremoving the cue later.

            \n", "itemtype": "method", "name": "addCue", @@ -12410,7 +12243,7 @@ }, { "file": "src/dom/dom.js", - "line": 5302, + "line": 5309, "description": "

            Removes a callback based on its ID.

            \n", "itemtype": "method", "name": "removeCue", @@ -12430,7 +12263,7 @@ }, { "file": "src/dom/dom.js", - "line": 5373, + "line": 5380, "description": "

            Removes all functions scheduled with media.addCue().

            \n", "itemtype": "method", "name": "clearCues", @@ -12443,7 +12276,7 @@ }, { "file": "src/dom/dom.js", - "line": 5547, + "line": 5554, "description": "

            Underlying\nFile\nobject. All File properties and methods are accessible.

            \n", "itemtype": "property", "name": "file", @@ -12456,7 +12289,7 @@ }, { "file": "src/dom/dom.js", - "line": 5596, + "line": 5603, "description": "

            The file\nMIME type\nas a string.

            \n

            For example, 'image' and 'text' are both MIME types.

            \n", "itemtype": "property", "name": "type", @@ -12469,7 +12302,7 @@ }, { "file": "src/dom/dom.js", - "line": 5634, + "line": 5641, "description": "

            The file subtype as a string.

            \n

            For example, a file with an 'image'\nMIME type\nmay have a subtype such as png or jpeg.

            \n", "itemtype": "property", "name": "subtype", @@ -12482,7 +12315,7 @@ }, { "file": "src/dom/dom.js", - "line": 5673, + "line": 5680, "description": "

            The file name as a string.

            \n", "itemtype": "property", "name": "name", @@ -12495,7 +12328,7 @@ }, { "file": "src/dom/dom.js", - "line": 5708, + "line": 5715, "description": "

            The number of bytes in the file.

            \n", "itemtype": "property", "name": "size", @@ -12508,7 +12341,7 @@ }, { "file": "src/dom/dom.js", - "line": 5743, + "line": 5750, "description": "

            A string containing the file's data.

            \n

            Data can be either image data, text contents, or a parsed object in the\ncase of JSON and p5.XML objects.

            \n", "itemtype": "property", "name": "data", @@ -12799,13 +12632,13 @@ { "file": "src/events/keyboard.js", "line": 10, - "description": "

            The boolean system variable keyIsPressed is true if any key is pressed\nand false if no keys are pressed.

            \n", + "description": "

            A Boolean system variable that's true if any key is currently pressed\nand false if not.

            \n", "itemtype": "property", "name": "keyIsPressed", "type": "Boolean", "readonly": "", "example": [ - "\n
            \n\nfunction draw() {\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n rect(25, 25, 50, 50);\n describe('50-by-50 white rect that turns black on keypress.');\n}\n\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word switches to \"true\" when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the value of keyIsPressed.\n text(keyIsPressed, 50, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12813,14 +12646,14 @@ }, { "file": "src/events/keyboard.js", - "line": 34, - "description": "

            The system variable key always contains the value of the most recent\nkey on the keyboard that was typed. To get the proper capitalization, it\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\nvariable.

            \n", + "line": 102, + "description": "

            A String system variable that contains the value of the last key typed.

            \n

            The key variable is helpful for checking whether an\nASCII\nkey has been typed. For example, the expression key === \"a\" evaluates to\ntrue if the a key was typed and false if not. key doesn’t update\nfor special keys such as LEFT_ARROW and ENTER. Use keyCode instead for\nspecial keys. The keyIsDown() function should\nbe used to check for multiple different key presses at the same time.

            \n", "itemtype": "property", "name": "key", "type": "String", "readonly": "", "example": [ - "\n
            \n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n fill(245, 123, 158);\n textSize(50);\n}\n\nfunction draw() {\n background(200);\n text(key, 33, 65); // Display last key pressed.\n describe('canvas displays any key value that is pressed in pink font.');\n}\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed is displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed.\n text(key, 50, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses the keys \"w\", \"a\", \"s\", or \"d\". It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if a key is pressed.\n if (keyIsPressed === true) {\n if (key === 'w') {\n y -= 1;\n } else if (key === 's') {\n y += 1;\n } else if (key === 'a') {\n x -= 1;\n } else if (key === 'd') {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12828,14 +12661,14 @@ }, { "file": "src/events/keyboard.js", - "line": 60, - "description": "

            The variable keyCode is used to detect special keys such as BACKSPACE,\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\nYou can also check for custom keys by looking up the keyCode of any key\non a site like this: keycode.info.

            \n", + "line": 184, + "description": "

            A Number system variable that contains the code of the last key typed.

            \n

            All keys have a keyCode. For example, the a key has the keyCode 65.\nThe keyCode variable is helpful for checking whether a special key has\nbeen typed. For example, the following conditional checks whether the enter\nkey has been typed:

            \n\nif (keyCode === 13) {\n // Code to run if the enter key was pressed.\n}\n\n\n

            The same code can be written more clearly using the system variable ENTER\nwhich has a value of 13:

            \n\nif (keyCode === ENTER) {\n // Code to run if the enter key was pressed.\n}\n\n\n

            The system variables BACKSPACE, DELETE, ENTER, RETURN, TAB,\nESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW,\nLEFT_ARROW, and RIGHT_ARROW are all helpful shorthands the key codes of\nspecial keys. Key codes can be found on websites such as\nkeycode.info.

            \n", "itemtype": "property", "name": "keyCode", "type": "Integer", "readonly": "", "example": [ - "\n
            \nlet fillVal = 126;\nfunction draw() {\n fill(fillVal);\n rect(25, 25, 50, 50);\n describe(`Grey rect center. turns white when up arrow pressed and black when down.\n Display key pressed and its keyCode in a yellow box.`);\n}\n\nfunction keyPressed() {\n if (keyCode === UP_ARROW) {\n fillVal = 255;\n } else if (keyCode === DOWN_ARROW) {\n fillVal = 0;\n }\n}\n
            \n
            \nfunction draw() {}\nfunction keyPressed() {\n background('yellow');\n text(`${key} ${keyCode}`, 10, 40);\n print(key, ' ', keyCode);\n}\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed and its code are displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed and its code.\n text(`${key} : ${keyCode}`, 50, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsPressed === true) {\n if (keyCode === UP_ARROW) {\n y -= 1;\n } else if (keyCode === DOWN_ARROW) {\n y += 1;\n } else if (keyCode === LEFT_ARROW) {\n x -= 1;\n } else if (keyCode === RIGHT_ARROW) {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12843,20 +12676,20 @@ }, { "file": "src/events/keyboard.js", - "line": 98, - "description": "

            The keyPressed() function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the keyCode variable.

            \n

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

            \n

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

            \n

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

            \nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the method.

            \n", + "line": 284, + "description": "

            A function that's called once when any key is pressed.

            \n

            Declaring the function keyPressed() sets a code block to run once\nautomatically when the user presses any key:

            \n\nfunction keyPressed() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently typed value when\nkeyPressed() is called by p5.js:

            \n\nfunction keyPressed() {\n if (key === 'c') {\n // Code to run.\n }\n\n

            if (keyCode === ENTER) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyPressed() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyPressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various key events. For\nexample, some browsers may jump to the bottom of a web page when the\nSPACE key is pressed. To prevent any default behavior for this event, add\nreturn false; to the end of the function.

            \n", "itemtype": "method", "name": "keyPressed", "params": [ { "name": "event", - "description": "

            optional KeyboardEvent callback argument.

            \n", + "description": "

            optional KeyboardEvent callback argument.

            \n", "type": "KeyboardEvent", "optional": true } ], "example": [ - "\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when key pressed and black\n when released.`);\n}\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when left arrow pressed and\n black when right.`);\n}\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n}\n\n
            \n
            \n\nfunction keyPressed() {\n // Do something\n return false; // prevent any default behaviour\n}\n\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses a key.\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the \"b\" key. It turns white when the user presses the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user presses the 'a' or 'b' key.\nfunction keyPressed() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses an arrow key.\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12864,20 +12697,20 @@ }, { "file": "src/events/keyboard.js", - "line": 185, - "description": "

            The keyReleased() function is called once every time a key is released.\nSee key and keyCode for more information.

            \nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n", + "line": 461, + "description": "

            A function that's called once when any key is released.

            \n

            Declaring the function keyReleased() sets a code block to run once\nautomatically when the user releases any key:

            \n\nfunction keyReleased() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently released value when\nkeyReleased() is called by p5.js:

            \n\nfunction keyReleased() {\n if (key === 'c') {\n // Code to run.\n }\n\n

            if (keyCode === ENTER) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyReleased() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add return false; to the end\nof the function.

            \n", "itemtype": "method", "name": "keyReleased", "params": [ { "name": "event", - "description": "

            optional KeyboardEvent callback argument.

            \n", + "description": "

            optional KeyboardEvent callback argument.

            \n", "type": "KeyboardEvent", "optional": true } ], "example": [ - "\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when key pressed and black\n when pressed again`);\n}\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n return false; // prevent any default behavior\n}\n\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user releases a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle value when the user releases a key.\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes white when the user releases the \"w\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Set value to 255 the user releases the 'w' key.\nfunction keyReleased() {\n if (key === 'w') {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user releases an arrow key.\nfunction keyReleased() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12885,20 +12718,20 @@ }, { "file": "src/events/keyboard.js", - "line": 237, - "description": "

            The keyTyped() function is called once every time a key is pressed, but\naction keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect\na keyCode for one of these keys, use the keyPressed() function instead.\nThe most recent key typed will be stored in the key variable.

            \n

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

            \nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the function.

            \n", + "line": 639, + "description": "

            A function that's called once when keys with printable characters are pressed.

            \n

            Declaring the function keyTyped() sets a code block to run once\nautomatically when the user presses any key with a printable character such\nas a or 1. Modifier keys such as SHIFT, CONTROL, and the arrow keys\nwill be ignored:

            \n\nfunction keyTyped() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently released value when\nkeyTyped() is called by p5.js:

            \n\nfunction keyTyped() {\n // Check for the \"c\" character using key.\n if (key === 'c') {\n // Code to run.\n }\n\n

            // Check for \"c\" using keyCode.\n if (keyCode === 67) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyTyped() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Note: Use the keyPressed() function and\nkeyCode system variable to respond to modifier\nkeys such as ALT.

            \n

            Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add return false; to the end\nof the function.

            \n", "itemtype": "method", "name": "keyTyped", "params": [ { "name": "event", - "description": "

            optional KeyboardEvent callback argument.

            \n", + "description": "

            optional KeyboardEvent callback argument.

            \n", "type": "KeyboardEvent", "optional": true } ], "example": [ - "\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when 'a' key typed and\n black when 'b' pressed`);\n}\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // uncomment to prevent any default behavior\n // return false;\n}\n\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n// Note: Pressing special keys such as SPACE have no effect.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user types a printable key.\nfunction keyTyped() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user types the \"b\" key. It turns white when the user types the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user types the 'a' or 'b' key.\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12906,7 +12739,7 @@ }, { "file": "src/events/keyboard.js", - "line": 291, + "line": 785, "description": "

            The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.

            \n", "class": "p5", "module": "Events", @@ -12914,23 +12747,23 @@ }, { "file": "src/events/keyboard.js", - "line": 301, - "description": "

            The keyIsDown() function checks if the key is currently down, i.e. pressed.\nIt can be used if you have an object that moves, and you want several keys\nto be able to affect its behaviour simultaneously, such as moving a\nsprite diagonally. You can put in any number representing the keyCode of\nthe key, or use any of the variable keyCode names listed\nhere.

            \n", + "line": 795, + "description": "

            Returns true if the key it’s checking is pressed and false if not.

            \n

            keyIsDown() is helpful when checking for multiple different key presses.\nFor example, keyIsDown() can be used to check if both LEFT_ARROW and\nUP_ARROW are pressed:

            \n\nif (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {\n // Move diagonally.\n}\n\n\n

            keyIsDown() can check for key presses using\nkeyCode values, as in keyIsDown(37) or\nkeyIsDown(LEFT_ARROW). Key codes can be found on websites such as\nkeycode.info.

            \n", "itemtype": "method", "name": "keyIsDown", "params": [ { "name": "code", - "description": "

            The key to check for.

            \n", + "description": "

            key to check.

            \n", "type": "Number" } ], "return": { - "description": "whether key is down or not", + "description": "whether the key is down or not.", "type": "Boolean" }, "example": [ - "\n
            \nlet x = 100;\nlet y = 100;\n\nfunction setup() {\n createCanvas(512, 512);\n fill(255, 0, 0);\n}\n\nfunction draw() {\n if (keyIsDown(LEFT_ARROW)) {\n x -= 5;\n }\n\n if (keyIsDown(RIGHT_ARROW)) {\n x += 5;\n }\n\n if (keyIsDown(UP_ARROW)) {\n y -= 5;\n }\n\n if (keyIsDown(DOWN_ARROW)) {\n y += 5;\n }\n\n clear();\n ellipse(x, y, 50, 50);\n describe(`50-by-50 red ellipse moves left, right, up, and\n down with arrow presses.`);\n}\n
            \n\n
            \nlet diameter = 50;\n\nfunction setup() {\n createCanvas(512, 512);\n}\n\nfunction draw() {\n // 107 and 187 are keyCodes for \"+\"\n if (keyIsDown(107) || keyIsDown(187)) {\n diameter += 1;\n }\n\n // 109 and 189 are keyCodes for \"-\"\n if (keyIsDown(109) || keyIsDown(189)) {\n diameter -= 1;\n }\n\n clear();\n fill(255, 0, 0);\n ellipse(50, 50, diameter, diameter);\n describe(`50-by-50 red ellipse gets bigger or smaller when\n + or - are pressed.`);\n}\n
            " + "\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(LEFT_ARROW) === true) {\n x -= 1;\n }\n\n if (keyIsDown(RIGHT_ARROW) === true) {\n x += 1;\n }\n\n if (keyIsDown(UP_ARROW) === true) {\n y -= 1;\n }\n\n if (keyIsDown(DOWN_ARROW) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(37) === true) {\n x -= 1;\n }\n\n if (keyIsDown(39) === true) {\n x += 1;\n }\n\n if (keyIsDown(38) === true) {\n y -= 1;\n }\n\n if (keyIsDown(40) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12939,13 +12772,13 @@ { "file": "src/events/mouse.js", "line": 12, - "description": "

            The variable movedX contains the horizontal movement of the mouse since the last frame

            \n", + "description": "

            A Number system variable that tracks the mouse's horizontal movement.

            \n

            movedX tracks how many pixels the mouse moves left or right between\nframes. movedX will have a negative value if the mouse moves left between\nframes and a positive value if it moves right. movedX can be calculated\nas mouseX - pmouseX.

            \n

            Note: movedX continues updating even when\nrequestPointerLock() is active.

            \n", "itemtype": "property", "name": "movedX", "type": "Number", "readonly": "", "example": [ - "\n
            \n \n let x = 50;\n function setup() {\n rectMode(CENTER);\n }\nfunction draw() {\n if (x > 48) {\n x -= 2;\n } else if (x < 48) {\n x += 2;\n }\n x += floor(movedX / 5);\n background(237, 34, 93);\n fill(0);\n rect(x, 50, 50, 50);\n describe(`box moves left and right according to mouse movement\n then slowly back towards the center`);\n }\n \n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \">>\" appears when the user moves the mouse to the right. The text \"<<\" appears when the user moves the mouse to the left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display >> when movedX is positive and\n // << when it's negative.\n if (movedX > 0) {\n text('>>', 50, 50);\n } else if (movedX < 0) {\n text('<<', 50, 50);\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12953,14 +12786,14 @@ }, { "file": "src/events/mouse.js", - "line": 43, - "description": "

            The variable movedY contains the vertical movement of the mouse since the last frame

            \n", + "line": 57, + "description": "

            A Number system variable that tracks the mouse's vertical movement.

            \n

            movedY tracks how many pixels the mouse moves up or down between\nframes. movedY will have a negative value if the mouse moves up between\nframes and a positive value if it moves down. movedY can be calculated\nas mouseY - pmouseY.

            \n

            Note: movedY continues updating even when\nrequestPointerLock() is active.

            \n", "itemtype": "property", "name": "movedY", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nlet y = 50;\nfunction setup() {\n rectMode(CENTER);\n}\n\nfunction draw() {\n if (y > 48) {\n y -= 2;\n } else if (y < 48) {\n y += 2;\n }\n y += floor(movedY / 5);\n background(237, 34, 93);\n fill(0);\n rect(50, y, 50, 50);\n describe(`box moves up and down according to mouse movement then\n slowly back towards the center`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \"▲\" appears when the user moves the mouse upward. The text \"▼\" appears when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display ▼ when movedY is positive and\n // ▲ when it's negative.\n if (movedY > 0) {\n text('▼', 50, 50);\n } else if (movedY < 0) {\n text('▲', 50, 50);\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12968,14 +12801,14 @@ }, { "file": "src/events/mouse.js", - "line": 80, - "description": "

            The system variable mouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseX will hold the x value\nof the most recent touch point.

            \n", + "line": 109, + "description": "

            A Number system variable that tracks the mouse's horizontal position.

            \n

            In 2D mode, mouseX keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe left edge of the canvas, then mouseX will be 50.

            \n

            In WebGL mode, mouseX keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels to the right\nof the canvas' center, then mouseX will be 50.

            \n

            If touch is used instead of the mouse, then mouseX will hold the\nx-coordinate of the most recent touch point.

            \n", "itemtype": "property", "name": "mouseX", "type": "Number", "readonly": "", "example": [ - "\n
            \n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, 0, mouseX, 100);\n describe('horizontal black line moves left and right with mouse x-position');\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a vertical line that follows the mouse's x-coordinate.\n line(mouseX, 0, mouseX, 100);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let mx = mouseX - 50;\n\n // Draw the line.\n line(mx, -50, mx, 50);\n}\n\n
            \n\n
            \n\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12983,14 +12816,14 @@ }, { "file": "src/events/mouse.js", - "line": 104, - "description": "

            The system variable mouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseY will hold the y value\nof the most recent touch point.

            \n", + "line": 220, + "description": "

            A Number system variable that tracks the mouse's vertical position.

            \n

            In 2D mode, mouseY keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe top edge of the canvas, then mouseY will be 50.

            \n

            In WebGL mode, mouseY keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels below the\ncanvas' center, then mouseY will be 50.

            \n

            If touch is used instead of the mouse, then mouseY will hold the\ny-coordinate of the most recent touch point.

            \n", "itemtype": "property", "name": "mouseY", "type": "Number", "readonly": "", "example": [ - "\n
            \n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(0, mouseY, 100, mouseY);\n describe('vertical black line moves up and down with mouse y-position');\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a horizontal line that follows the mouse's y-coordinate.\n line(0, mouseY, 0, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let my = mouseY - 50;\n\n // Draw the line.\n line(-50, my, 50, my);\n}\n\n
            \n\n
            \n\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -12998,14 +12831,14 @@ }, { "file": "src/events/mouse.js", - "line": 128, - "description": "

            The system variable pmouseX always contains the horizontal position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX\nvalue at the start of each touch event.

            \n", + "line": 331, + "description": "

            A Number system variable that tracks the mouse's previous horizontal\nposition.

            \n

            In 2D mode, pmouseX keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\nmouseX from the previous frame. For example, if\nthe mouse was 50 pixels from the left edge of the canvas during the last\nframe, then pmouseX will be 50.

            \n

            In WebGL mode, pmouseX keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels to the right\nof the canvas' center during the last frame, then pmouseX will be 50.

            \n

            If touch is used instead of the mouse, then pmouseX will hold the\nx-coordinate of the last touch point.

            \n

            Note: pmouseX is reset to the current mouseX\nvalue at the start of each touch event.

            \n", "itemtype": "property", "name": "pmouseX", "type": "Number", "readonly": "", "example": [ - "\n
            \n\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n //slow down the frameRate to make it more visible\n frameRate(10);\n}\n\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, mouseY, pmouseX, pmouseY);\n print(pmouseX + ' -> ' + mouseX);\n describe(`line trail is created from cursor movements.\n faster movement make longer line.`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13013,14 +12846,14 @@ }, { "file": "src/events/mouse.js", - "line": 159, - "description": "

            The system variable pmouseY always contains the vertical position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY\nvalue at the start of each touch event.

            \n", + "line": 400, + "description": "

            A Number system variable that tracks the mouse's previous vertical\nposition.

            \n

            In 2D mode, pmouseY keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\nmouseY from the previous frame. For example, if\nthe mouse was 50 pixels from the top edge of the canvas during the last\nframe, then pmouseY will be 50.

            \n

            In WebGL mode, pmouseY keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels below the\ncanvas' center during the last frame, then pmouseY will be 50.

            \n

            If touch is used instead of the mouse, then pmouseY will hold the\ny-coordinate of the last touch point.

            \n

            Note: pmouseY is reset to the current mouseY\nvalue at the start of each touch event.

            \n", "itemtype": "property", "name": "pmouseY", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n //draw a square only if the mouse is not moving\n if (mouseY === pmouseY && mouseX === pmouseX) {\n rect(20, 20, 60, 60);\n }\n\n print(pmouseY + ' -> ' + mouseY);\n describe(`60-by-60 black rect center, fuchsia background.\n rect flickers on mouse movement`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13028,14 +12861,14 @@ }, { "file": "src/events/mouse.js", - "line": 189, - "description": "

            The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.

            \n", + "line": 469, + "description": "

            A Number variable that tracks the mouse's horizontal position within the\nbrowser.

            \n

            winMouseX keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe left edge of the browser, then winMouseX will be 50.

            \n

            On a touchscreen device, winMouseX will hold the x-coordinate of the most\nrecent touch point.

            \n

            Note: Use mouseX to track the mouse’s\nx-coordinate within the canvas.

            \n", "itemtype": "property", "name": "winMouseX", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the horizontal mouse position\n //relative to the window\n myCanvas.position(winMouseX + 1, windowHeight / 2);\n\n //the y of the square is relative to the canvas\n rect(20, mouseY, 60, 60);\n describe(`60-by-60 black rect y moves with mouse y and fuchsia\n canvas moves with mouse x`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13043,14 +12876,14 @@ }, { "file": "src/events/mouse.js", - "line": 226, - "description": "

            The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.

            \n", + "line": 510, + "description": "

            A Number variable that tracks the mouse's vertical position within the\nbrowser.

            \n

            winMouseY keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe top edge of the browser, then winMouseY will be 50.

            \n

            On a touchscreen device, winMouseY will hold the y-coordinate of the most\nrecent touch point.

            \n

            Note: Use mouseY to track the mouse’s\ny-coordinate within the canvas.

            \n", "itemtype": "property", "name": "winMouseY", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the vertical mouse position\n //relative to the window\n myCanvas.position(windowWidth / 2, winMouseY + 1);\n\n //the x of the square is relative to the canvas\n rect(mouseX, 20, 60, 60);\n describe(`60-by-60 black rect x moves with mouse x and\n fuchsia canvas y moves with mouse y`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13058,14 +12891,14 @@ }, { "file": "src/events/mouse.js", - "line": 263, - "description": "

            The system variable pwinMouseX always contains the horizontal position\nof the mouse in the frame previous to the current frame, relative to\n(0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX\nvalue at the start of each touch event.

            \n", + "line": 551, + "description": "

            A Number variable that tracks the mouse's previous horizontal position\nwithin the browser.

            \n

            pwinMouseX keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\nwinMouseX from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe left edge of the browser during the last frame, then pwinMouseX will\nbe 50.

            \n

            On a touchscreen device, pwinMouseX will hold the x-coordinate of the most\nrecent touch point. pwinMouseX is reset to the current\nwinMouseX value at the start of each touch\nevent.

            \n

            Note: Use pmouseX to track the mouse’s previous\nx-coordinate within the canvas.

            \n", "itemtype": "property", "name": "pwinMouseX", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current x position is the horizontal mouse speed\n let speed = abs(winMouseX - pwinMouseX);\n //change the size of the circle\n //according to the horizontal speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n describe(`fuchsia ellipse moves with mouse x and y.\n Grows and shrinks with mouse speed`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseX - pwinMouseX;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseX.\n text(pwinMouseX, 50, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13073,14 +12906,14 @@ }, { "file": "src/events/mouse.js", - "line": 302, - "description": "

            The system variable pwinMouseY always contains the vertical position of\nthe mouse in the frame previous to the current frame, relative to (0, 0)\nof the window. Note: pwinMouseY will be reset to the current winMouseY\nvalue at the start of each touch event.

            \n", + "line": 622, + "description": "

            A Number variable that tracks the mouse's previous vertical position\nwithin the browser.

            \n

            pwinMouseY keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\nwinMouseY from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe top edge of the browser during the last frame, then pwinMouseY will\nbe 50.

            \n

            On a touchscreen device, pwinMouseY will hold the y-coordinate of the most\nrecent touch point. pwinMouseY is reset to the current\nwinMouseY value at the start of each touch\nevent.

            \n

            Note: Use pmouseY to track the mouse’s previous\ny-coordinate within the canvas.

            \n", "itemtype": "property", "name": "pwinMouseY", "type": "Number", "readonly": "", "example": [ - "\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current y position is the vertical mouse speed\n let speed = abs(winMouseY - pwinMouseY);\n //change the size of the circle\n //according to the vertical speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n describe(`fuchsia ellipse moves with mouse x and y.\n Grows and shrinks with mouse speed`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseY - pwinMouseY;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseY.\n text(pwinMouseY, 50, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13088,14 +12921,14 @@ }, { "file": "src/events/mouse.js", - "line": 341, - "description": "

            p5 automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.

            \n", + "line": 693, + "description": "

            A String system variable that contains the value of the last mouse button\npressed.

            \n

            The mouseButton variable is either LEFT, RIGHT, or CENTER,\ndepending on which button was pressed last.

            \n

            Note: Different browsers may track mouseButton differently. See\nMDN\nfor more information.

            \n", "itemtype": "property", "name": "mouseButton", "type": "Constant", "readonly": "", "example": [ - "\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed === true) {\n if (mouseButton === LEFT) {\n ellipse(50, 50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n rect(25, 25, 50, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n\n print(mouseButton);\n describe(`50-by-50 black ellipse appears on center of fuchsia\n canvas on mouse click/press.`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with black text at its center. The text changes from 0 to either \"left\" or \"right\" when the user clicks a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse button.\n text(mouseButton, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A gray square. Different shapes appear at its center depending on the mouse button that's clicked.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n if (mouseButton === LEFT) {\n circle(50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n square(25, 25, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13103,14 +12936,14 @@ }, { "file": "src/events/mouse.js", - "line": 378, - "description": "

            The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.

            \n", + "line": 761, + "description": "

            A Boolean system variable that's true if the mouse is pressed and\nfalse if not.

            \n", "itemtype": "property", "name": "mouseIsPressed", "type": "Boolean", "readonly": "", "example": [ - "\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed === true) {\n ellipse(50, 50, 50, 50);\n } else {\n rect(25, 25, 50, 50);\n }\n\n print(mouseIsPressed);\n describe(`black 50-by-50 rect becomes ellipse with mouse click/press.\n fuchsia background.`);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word changes to \"true\" when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouseIsPressed variable.\n text(mouseIsPressed, 25, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (mouseIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13118,20 +12951,20 @@ }, { "file": "src/events/mouse.js", - "line": 469, - "description": "

            The mouseMoved() function is called every time the mouse moves and a mouse\nbutton is not pressed.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the method.

            \n", + "line": 882, + "description": "

            A function that's called when the mouse moves.

            \n

            Declaring the function mouseMoved() sets a code block to run\nautomatically when the user moves the mouse without clicking any mouse\nbuttons:

            \n\nfunction mouseMoved() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseMoved() is called by p5.js:

            \n\nfunction mouseMoved() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseMoved() is always passed a\nMouseEvent\nobject with properties that describe the mouse move event:

            \n\nfunction mouseMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n", "itemtype": "method", "name": "mouseMoved", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Move the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black 50-by-50 rect becomes lighter with mouse movements until\n white then resets no image displayed`);\n}\nfunction mouseMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13139,20 +12972,20 @@ }, { "file": "src/events/mouse.js", - "line": 521, - "description": "

            The mouseDragged() function is called once every time the mouse moves and\na mouse button is pressed. If no mouseDragged() function is defined, the\ntouchMoved() function will be called instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n", + "line": 968, + "description": "

            A function that's called when the mouse moves while a button is pressed.

            \n

            Declaring the function mouseDragged() sets a code block to run\nautomatically when the user clicks and drags the mouse:

            \n\nfunction mouseDragged() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseDragged() is called by p5.js:

            \n\nfunction mouseDragged() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseDragged() is always passed a\nMouseEvent\nobject with properties that describe the mouse drag event:

            \n\nfunction mouseDragged(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseDragged() will run when a user moves a touch\npoint if touchMoved() isn’t declared. If\ntouchMoved() is declared, then\ntouchMoved() will run when a user moves a\ntouch point and mouseDragged() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n", "itemtype": "method", "name": "mouseDragged", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Drag the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black 50-by-50 rect turns lighter with mouse click and\n drag until white, resets`);\n}\nfunction mouseDragged() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseDragged() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseDragged() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13160,20 +12993,20 @@ }, { "file": "src/events/mouse.js", - "line": 599, - "description": "

            The mousePressed() function is called once after every time a mouse button\nis pressed. The mouseButton variable (see the related reference entry)\ncan be used to determine which button has been pressed. If no\nmousePressed() function is defined, the touchStarted() function will be\ncalled instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n", + "line": 1084, + "description": "

            A function that's called once when a mouse button is pressed.

            \n

            Declaring the function mousePressed() sets a code block to run\nautomatically when the user presses a mouse button:

            \n\nfunction mousePressed() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mousePressed() is called by p5.js:

            \n\nfunction mousePressed() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mousePressed() is always passed a\nMouseEvent\nobject with properties that describe the mouse press event:

            \n\nfunction mousePressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mousePressed() will run when a user’s touch\nbegins if touchStarted() isn’t declared. If\ntouchStarted() is declared, then\ntouchStarted() will run when a user’s touch\nbegins and mousePressed() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(), mouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user clicks the mouse.\nmouseReleased() runs as soon as the user\nreleases the mouse click. mouseClicked()\nruns immediately after mouseReleased().

            \n", "itemtype": "method", "name": "mousePressed", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Click anywhere in the webpage to change\n// the color value of the rectangle\n\nlet colorValue = 0;\nfunction draw() {\n fill(colorValue);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\nfunction mousePressed() {\n if (colorValue === 0) {\n colorValue = 255;\n } else {\n colorValue = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mousePressed() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mousePressed() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13181,20 +13014,20 @@ }, { "file": "src/events/mouse.js", - "line": 680, - "description": "

            The mouseReleased() function is called every time a mouse button is\nreleased. If no mouseReleased() function is defined, the touchEnded()\nfunction will be called instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n", + "line": 1256, + "description": "

            A function that's called once when a mouse button is released.

            \n

            Declaring the function mouseReleased() sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:

            \n\nfunction mouseReleased() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseReleased() is called by p5.js:

            \n\nfunction mouseReleased() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseReleased() is always passed a\nMouseEvent\nobject with properties that describe the mouse release event:

            \n\nfunction mouseReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseReleased() will run when a user’s touch\nends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then\ntouchEnded() will run when a user’s touch\nends and mouseReleased() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(), mouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user\nclicks the mouse. mouseReleased() runs as soon as the user releases the\nmouse click. mouseClicked() runs\nimmediately after mouseReleased().

            \n", "itemtype": "method", "name": "mouseReleased", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\nfunction mouseReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseReleased() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseReleased() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13202,20 +13035,20 @@ }, { "file": "src/events/mouse.js", - "line": 760, - "description": "

            The mouseClicked() function is called once after a mouse button has been\npressed and then released.

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

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n", + "line": 1429, + "description": "

            A function that's called once after a mouse button is pressed and released.

            \n

            Declaring the function mouseClicked() sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:

            \n\nfunction mouseClicked() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseClicked() is called by p5.js:

            \n\nfunction mouseClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseClicked() is always passed a\nMouseEvent\nobject with properties that describe the mouse click event:

            \n\nfunction mouseClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseClicked() will run when a user’s touch\nends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then\ntouchEnded() will run when a user’s touch\nends and mouseClicked() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(),\nmouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user\nclicks the mouse. mouseReleased() runs as\nsoon as the user releases the mouse click. mouseClicked() runs\nimmediately after mouseReleased().

            \n", "itemtype": "method", "name": "mouseClicked", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\n\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user clicks.\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13223,20 +13056,20 @@ }, { "file": "src/events/mouse.js", - "line": 826, - "description": "

            The doubleClicked() function is executed every time a event\nlistener has detected a dblclick event which is a part of the\nDOM L3 specification. The doubleClicked event is fired when a\npointing device button (usually a mouse's primary button)\nis clicked twice on a single element. For more info on the\ndblclick event refer to mozilla's documentation here:\nhttps://developer.mozilla.org/en-US/docs/Web/Events/dblclick

            \n", + "line": 1585, + "description": "

            A function that's called once when a mouse button is clicked twice quickly.

            \n

            Declaring the function doubleClicked() sets a code block to run\nautomatically when the user presses and releases the mouse button twice\nquickly:

            \n\nfunction doubleClicked() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when doubleClicked() is called by p5.js:

            \n\nfunction doubleClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. doubleClicked() is always passed a\nMouseEvent\nobject with properties that describe the double-click event:

            \n\nfunction doubleClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, code placed in doubleClicked() will run after two\ntouches that occur within a short time.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n", "itemtype": "method", "name": "doubleClicked", "params": [ { "name": "event", - "description": "

            optional MouseEvent callback argument.

            \n", + "description": "

            optional MouseEvent argument.

            \n", "type": "MouseEvent", "optional": true } ], "example": [ - "\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been double clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse doubleClick/press.');\n}\n\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction doubleClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n console.log(event);\n}\n\n
            " + "\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user double-clicks.\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n fill(value);\n\n // Draw the circle.\n circle(50, 50, 80);\n}\n\n// Reassign value to 255 when the user double-clicks on the circle.\nfunction doubleClicked() {\n if (dist(50, 50, mouseX, mouseY) < 40) {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13244,20 +13077,20 @@ }, { "file": "src/events/mouse.js", - "line": 908, - "description": "

            The function mouseWheel() is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.

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

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

            \nDue to the current support of the \"wheel\" event on Safari, the function\nmay only work as expected if \"return false\" is included while using Safari.

            \n", + "line": 1732, + "description": "

            A function that's called once when the mouse wheel moves.

            \n

            Declaring the function mouseWheel() sets a code block to run\nautomatically when the user scrolls with the mouse wheel:

            \n\nfunction mouseWheel() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseWheel() is called by p5.js:

            \n\nfunction mouseWheel() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseWheel() is always passed a\nMouseEvent\nobject with properties that describe the mouse scroll event:

            \n\nfunction mouseWheel(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            The event object has many properties including delta, a Number\ncontaining the distance that the user scrolled. For example, event.delta\nmight have the value 5 when the user scrolls up. event.delta is positive\nif the user scrolls up and negative if they scroll down. The signs are\nopposite on macOS with \"natural\" scrolling enabled.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: On Safari, mouseWheel() may only work as expected if\nreturn false; is added at the end of the function.

            \n", "itemtype": "method", "name": "mouseWheel", "params": [ { "name": "event", - "description": "

            optional WheelEvent callback argument.

            \n", + "description": "

            optional WheelEvent argument.

            \n", "type": "WheelEvent", "optional": true } ], "example": [ - "\n
            \n\nlet pos = 25;\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n rect(25, pos, 50, 50);\n describe(`black 50-by-50 rect moves up and down with vertical scroll.\n fuchsia background`);\n}\n\nfunction mouseWheel(event) {\n print(event.delta);\n //move the square according to the vertical scroll amount\n pos += event.delta;\n //uncomment to block page scrolling\n //return false;\n}\n\n
            " + "\n
            \n\nlet circleSize = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle\n circle(circleSize, 50, 50);\n}\n\n// Increment circleSize when the user scrolls the mouse wheel.\nfunction mouseWheel() {\n circleSize += 1;\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nlet direction = '';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Draw an arrow that points where\n // the mouse last scrolled.\n text(direction, 50, 50);\n}\n\n// Change direction when the user scrolls the mouse wheel.\nfunction mouseWheel(event) {\n if (event.delta > 0) {\n direction = '▲';\n } else {\n direction = '▼';\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13265,12 +13098,12 @@ }, { "file": "src/events/mouse.js", - "line": 960, - "description": "

            The function requestPointerLock()\nlocks the pointer to its current position and makes it invisible.\nUse movedX and movedY to get the difference the mouse was moved since\nthe last call of draw.\nNote that not all browsers support this feature.\nThis enables you to create experiences that aren't limited by the mouse moving out of the screen\neven if it is repeatedly moved into one direction.\nFor example, a first person perspective experience.

            \n", + "line": 1866, + "description": "

            Locks the mouse pointer to its current position and makes it invisible.

            \n

            requestPointerLock() allows the mouse to move forever without leaving the\nscreen. Calling requestPointerLock() locks the values of\nmouseX, mouseY,\npmouseX, and pmouseY.\nmovedX and movedY\ncontinue updating and can be used to get the distance the mouse moved since\nthe last frame was drawn. Calling\nexitPointerLock() resumes updating the\nmouse system variables.

            \n

            Note: Most browsers require an input, such as a click, before calling\nrequestPointerLock(). It’s recommended to call requestPointerLock() in\nan event function such as doubleClicked().

            \n", "itemtype": "method", "name": "requestPointerLock", "example": [ - "\n
            \n\nlet cam;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n requestPointerLock();\n cam = createCamera();\n}\n\nfunction draw() {\n background(255);\n cam.pan(-movedX * 0.001);\n cam.tilt(movedY * 0.001);\n sphere(25);\n describe(`3D scene moves according to mouse mouse movement in a\n first person perspective`);\n}\n\n
            " + "\n
            \n\nlet score = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the text \"Score: X\" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update the score.\n score -= movedY;\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the score.\n text(`Score: ${score}`, 50, 50);\n}\n\n// Lock the pointer when the user double-clicks.\nfunction doubleClicked() {\n requestPointerLock();\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13278,12 +13111,12 @@ }, { "file": "src/events/mouse.js", - "line": 1005, - "description": "

            The function exitPointerLock()\nexits a previously triggered pointer Lock\nfor example to make ui elements usable etc

            \n", + "line": 1932, + "description": "

            Exits a pointer lock started with\nrequestPointerLock.

            \n

            Calling requestPointerLock() locks the values of\nmouseX, mouseY,\npmouseX, and pmouseY.\nCalling exitPointerLock() resumes updating the mouse system variables.

            \n

            Note: Most browsers require an input, such as a click, before calling\nrequestPointerLock(). It’s recommended to call requestPointerLock() in\nan event function such as doubleClicked().

            \n", "itemtype": "method", "name": "exitPointerLock", "example": [ - "\n
            \n\n//click the canvas to lock the pointer\n//click again to exit (otherwise escape)\nlet locked = false;\nfunction draw() {\n background(237, 34, 93);\n describe('cursor gets locked / unlocked on mouse-click');\n}\nfunction mouseClicked() {\n if (!locked) {\n locked = true;\n requestPointerLock();\n } else {\n exitPointerLock();\n locked = false;\n }\n}\n\n
            " + "\n
            \n\nlet isLocked = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a word at its center. The word changes between \"Unlocked\" and \"Locked\" when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Tell the user whether the pointer is locked.\n if (isLocked === true) {\n text('Locked', 50, 50);\n } else {\n text('Unlocked', 50, 50);\n }\n}\n\n// Toggle the pointer lock when the user double-clicks.\nfunction doubleClicked() {\n if (isLocked === true) {\n exitPointerLock();\n isLocked = false;\n } else {\n requestPointerLock();\n isLocked = true;\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13292,13 +13125,13 @@ { "file": "src/events/touch.js", "line": 10, - "description": "

            The system variable touches[] contains an array of the positions of all\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\nunique touch as it moves. Each element in the array is an object with x, y,\nand id properties.

            \n

            The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).

            \n", + "description": "

            An Array of all the current touch points on a touchscreen device.

            \n

            The touches array is empty by default. When the user touches their\nscreen, a new touch point is tracked and added to the array. Touch points\nare Objects with the following properties:

            \n\n// Iterate over the touches array.\nfor (let touch of touches) {\n // x-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.x);\n\n

            // y-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.y);

            \n

            // x-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winX);

            \n

            // y-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winY);

            \n

            // ID number\n console.log(touch.id);\n}\n

            \n", "itemtype": "property", "name": "touches", "type": "Object[]", "readonly": "", "example": [ - "\n
            \n\n// On a touchscreen device, touch\n// the canvas using one or more fingers\n// at the same time\nfunction draw() {\n clear();\n let display = touches.length + ' touches';\n text(display, 5, 10);\n describe(`Number of touches currently registered are displayed\n on the canvas`);\n}\n\n
            " + "\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. White circles appear where the user touches the square.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at each touch point.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a label above each touch point.\n for (let touch of touches) {\n text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13306,20 +13139,20 @@ }, { "file": "src/events/touch.js", - "line": 70, - "description": "

            The touchStarted() function is called once after every time a touch is\nregistered. If no touchStarted() function is defined, the mousePressed()\nfunction will be called instead if it is defined.

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

            \n", + "line": 125, + "description": "

            A function that's called once each time the user touches the screen.

            \n

            Declaring a function called touchStarted() sets a code block to run\nautomatically each time the user begins touching a touchscreen device:

            \n\nfunction touchStarted() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchStarted() is called by p5.js:

            \n\nfunction touchStarted() {\n // Paint over the background.\n background(200);\n\n

            // Mark each touch point once with a circle.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchStarted() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchStarted(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mousePressed() will\nrun when a user’s touch starts if touchStarted() isn’t declared. If\ntouchStarted() is declared, then touchStarted() will run when a user’s\ntouch starts and mousePressed() won’t.

            \n

            Note: touchStarted(), touchEnded(), and\ntouchMoved() are all related.\ntouchStarted() runs as soon as the user touches a touchscreen device.\ntouchEnded() runs as soon as the user ends a\ntouch. touchMoved() runs repeatedly as the\nuser moves any touch points.

            \n", "itemtype": "method", "name": "touchStarted", "params": [ { "name": "event", - "description": "

            optional TouchEvent callback argument.

            \n", + "description": "

            optional TouchEvent argument.

            \n", "type": "TouchEvent", "optional": true } ], "example": [ - "\n
            \n\n// Touch within the image to change\n// the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns white with touch event.');\n}\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchStarted() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            " + "\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors with each touch.\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13327,20 +13160,20 @@ }, { "file": "src/events/touch.js", - "line": 141, - "description": "

            The touchMoved() function is called every time a touch move is registered.\nIf no touchMoved() function is defined, the mouseDragged() function will\nbe called instead if it is defined.

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

            \n", + "line": 295, + "description": "

            A function that's called when the user touches the screen and moves.

            \n

            Declaring the function touchMoved() sets a code block to run\nautomatically when the user touches a touchscreen device and moves:

            \n\nfunction touchMoved() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchMoved() is called by p5.js:

            \n\nfunction touchMoved() {\n // Paint over the background.\n background(200);\n\n

            // Mark each touch point while the user moves.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchMoved() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseDragged() will\nrun when the user’s touch points move if touchMoved() isn’t declared. If\ntouchMoved() is declared, then touchMoved() will run when a user’s\ntouch points move and mouseDragged() won’t.

            \n

            Note: touchStarted(),\ntouchEnded(), and\ntouchMoved() are all related.\ntouchStarted() runs as soon as the user\ntouches a touchscreen device. touchEnded()\nruns as soon as the user ends a touch. touchMoved() runs repeatedly as\nthe user moves any touch points.

            \n", "itemtype": "method", "name": "touchMoved", "params": [ { "name": "event", - "description": "

            optional TouchEvent callback argument.

            \n", + "description": "

            optional TouchEvent argument.

            \n", "type": "TouchEvent", "optional": true } ], "example": [ - "\n
            \n\n// Move your finger across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns lighter with touch until white. resets');\n}\nfunction touchMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            " + "\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction touchMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -13348,20 +13181,20 @@ }, { "file": "src/events/touch.js", - "line": 212, - "description": "

            The touchEnded() function is called every time a touch ends. If no\ntouchEnded() function is defined, the mouseReleased() function will be\ncalled instead if it is defined.

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

            \n", + "line": 468, + "description": "

            A function that's called once each time a screen touch ends.

            \n

            Declaring the function touchEnded() sets a code block to run\nautomatically when the user stops touching a touchscreen device:

            \n\nfunction touchEnded() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchEnded() is called by p5.js:

            \n\nfunction touchEnded() {\n // Paint over the background.\n background(200);\n\n

            // Mark each remaining touch point when the user stops\n // a touch.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchEnded() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchEnded(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseReleased() will\nrun when the user’s touch ends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then touchEnded() will run when a user’s\ntouch ends and mouseReleased() won’t.

            \n

            Note: touchStarted(),\ntouchEnded(), and touchMoved() are all\nrelated. touchStarted() runs as soon as the\nuser touches a touchscreen device. touchEnded() runs as soon as the user\nends a touch. touchMoved() runs repeatedly as\nthe user moves any touch points.

            \n", "itemtype": "method", "name": "touchEnded", "params": [ { "name": "event", - "description": "

            optional TouchEvent callback argument.

            \n", + "description": "

            optional TouchEvent argument.

            \n", "type": "TouchEvent", "optional": true } ], "example": [ - "\n
            \n\n// Release touch within the image to\n// change the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns white with touch.');\n}\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchEnded() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            " + "\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors when a touch ends.\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            " ], "class": "p5", "module": "Events", @@ -17807,7 +17640,7 @@ } }, { - "line": 3351, + "line": 3341, "params": [ { "name": "v", @@ -17872,7 +17705,7 @@ "chainable": 1 }, { - "line": 3363, + "line": 3353, "params": [ { "name": "v1", @@ -17946,7 +17779,7 @@ "chainable": 1 }, { - "line": 3389, + "line": 3380, "params": [ { "name": "v1", @@ -17962,7 +17795,7 @@ "static": 1 }, { - "line": 3395, + "line": 3386, "params": [ { "name": "v1", @@ -17985,7 +17818,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 640, + "line": 635, "description": "

            Subtracts from a vector's x, y, and z components.

            \n

            sub() can use separate numbers, as in v.sub(1, 2, 3), another\np5.Vector object, as in v.sub(v2), or an array\nof numbers, as in v.sub([1, 2, 3]).

            \n

            If a value isn't provided for a component, it won't change. For\nexample, v.sub(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling sub() with no arguments, as in v.sub(), has no effect.

            \n

            The static version of sub(), as in p5.Vector.sub(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n", "itemtype": "method", "name": "sub", @@ -17998,7 +17831,7 @@ "submodule": "Vector", "overloads": [ { - "line": 640, + "line": 635, "params": [ { "name": "x", @@ -18021,7 +17854,7 @@ "chainable": 1 }, { - "line": 766, + "line": 761, "params": [ { "name": "value", @@ -18032,7 +17865,7 @@ "chainable": 1 }, { - "line": 3414, + "line": 3405, "params": [ { "name": "v1", @@ -18061,7 +17894,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 790, + "line": 785, "description": "

            Multiplies a vector's x, y, and z components.

            \n

            mult() can use separate numbers, as in v.mult(1, 2, 3), another\np5.Vector object, as in v.mult(v2), or an array\nof numbers, as in v.mult([1, 2, 3]).

            \n

            If only one value is provided, as in v.mult(2), then all the components\nwill be multiplied by 2. If a value isn't provided for a component, it\nwon't change. For example, v.mult(4, 5) multiplies v.x by, v.y by 5,\nand v.z by 1. Calling mult() with no arguments, as in v.mult(), has\nno effect.

            \n

            The static version of mult(), as in p5.Vector.mult(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n", "itemtype": "method", "name": "mult", @@ -18074,7 +17907,7 @@ "submodule": "Vector", "overloads": [ { - "line": 790, + "line": 785, "params": [ { "name": "n", @@ -18085,7 +17918,7 @@ "chainable": 1 }, { - "line": 970, + "line": 965, "params": [ { "name": "x", @@ -18107,7 +17940,7 @@ "chainable": 1 }, { - "line": 978, + "line": 973, "params": [ { "name": "arr", @@ -18118,7 +17951,7 @@ "chainable": 1 }, { - "line": 984, + "line": 979, "params": [ { "name": "v", @@ -18129,7 +17962,7 @@ "chainable": 1 }, { - "line": 3443, + "line": 3435, "params": [ { "name": "x", @@ -18155,7 +17988,7 @@ } }, { - "line": 3452, + "line": 3444, "params": [ { "name": "v", @@ -18174,10 +18007,14 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } }, { - "line": 3460, + "line": 3453, "params": [ { "name": "v0", @@ -18196,10 +18033,14 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } }, { - "line": 3468, + "line": 3462, "params": [ { "name": "v0", @@ -18218,13 +18059,17 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } } ] }, { "file": "src/math/p5.Vector.js", - "line": 1069, + "line": 1065, "description": "

            Divides a vector's x, y, and z components.

            \n

            div() can use separate numbers, as in v.div(1, 2, 3), another\np5.Vector object, as in v.div(v2), or an array\nof numbers, as in v.div([1, 2, 3]).

            \n

            If only one value is provided, as in v.div(2), then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, v.div(4, 5) divides v.x by, v.y by 5,\nand v.z by 1. Calling div() with no arguments, as in v.div(), has\nno effect.

            \n

            The static version of div(), as in p5.Vector.div(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n", "itemtype": "method", "name": "div", @@ -18237,7 +18082,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1069, + "line": 1065, "params": [ { "name": "n", @@ -18248,7 +18093,7 @@ "chainable": 1 }, { - "line": 1251, + "line": 1247, "params": [ { "name": "x", @@ -18270,7 +18115,7 @@ "chainable": 1 }, { - "line": 1259, + "line": 1255, "params": [ { "name": "arr", @@ -18281,7 +18126,7 @@ "chainable": 1 }, { - "line": 1265, + "line": 1261, "params": [ { "name": "v", @@ -18292,7 +18137,7 @@ "chainable": 1 }, { - "line": 3522, + "line": 3520, "params": [ { "name": "x", @@ -18318,7 +18163,7 @@ } }, { - "line": 3531, + "line": 3529, "params": [ { "name": "v", @@ -18337,10 +18182,14 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } }, { - "line": 3539, + "line": 3538, "params": [ { "name": "v0", @@ -18359,7 +18208,11 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } }, { "line": 3547, @@ -18381,13 +18234,17 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } } ] }, { "file": "src/math/p5.Vector.js", - "line": 1366, + "line": 1362, "description": "

            Calculates the magnitude (length) of the vector.

            \n

            Use mag() to calculate the magnitude of a 2D vector\nusing components as in mag(x, y).

            \n", "itemtype": "method", "name": "mag", @@ -18403,7 +18260,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1366, + "line": 1362, "params": [], "return": { "description": "magnitude of the vector.", @@ -18411,7 +18268,7 @@ } }, { - "line": 3678, + "line": 3682, "params": [ { "name": "vecT", @@ -18429,7 +18286,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1406, + "line": 1402, "description": "

            Calculates the magnitude (length) of the vector squared.

            \n", "itemtype": "method", "name": "magSq", @@ -18445,7 +18302,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1406, + "line": 1402, "params": [], "return": { "description": "squared magnitude of the vector.", @@ -18453,7 +18310,7 @@ } }, { - "line": 3694, + "line": 3698, "params": [ { "name": "vecT", @@ -18471,7 +18328,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1445, + "line": 1441, "description": "

            Calculates the dot product of two vectors.

            \n

            The dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.

            \n

            The version of dot() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of dot() with multiple parameters interprets them as the\nx, y, and z components of another vector.

            \n

            The static version of dot(), as in p5.Vector.dot(v1, v2), is the same\nas calling v1.dot(v2).

            \n", "itemtype": "method", "name": "dot", @@ -18487,7 +18344,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1445, + "line": 1441, "params": [ { "name": "x", @@ -18513,7 +18370,7 @@ } }, { - "line": 1546, + "line": 1542, "params": [ { "name": "v", @@ -18527,7 +18384,7 @@ } }, { - "line": 3574, + "line": 3576, "params": [ { "name": "v1", @@ -18550,7 +18407,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1558, + "line": 1554, "description": "

            Calculates the cross product of two vectors.

            \n

            The cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.

            \n

            The static version of cross(), as in p5.Vector.cross(v1, v2), is the same\nas calling v1.cross(v2).

            \n", "itemtype": "method", "name": "cross", @@ -18566,7 +18423,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1558, + "line": 1554, "params": [ { "name": "v", @@ -18580,7 +18437,7 @@ } }, { - "line": 3588, + "line": 3590, "params": [ { "name": "v1", @@ -18603,7 +18460,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1616, + "line": 1612, "description": "

            Calculates the distance between two points represented by vectors.

            \n

            A point's coordinates can be represented by the components of a vector\nthat extends from the origin to the point.

            \n

            The static version of dist(), as in p5.Vector.dist(v1, v2), is the same\nas calling v1.dist(v2).

            \n

            Use dist() to calculate the distance between points\nusing coordinates as in dist(x1, y1, x2, y2).

            \n", "itemtype": "method", "name": "dist", @@ -18619,7 +18476,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1616, + "line": 1612, "params": [ { "name": "v", @@ -18633,7 +18490,7 @@ } }, { - "line": 3603, + "line": 3605, "params": [ { "name": "v1", @@ -18656,7 +18513,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1730, + "line": 1726, "description": "

            Scales the components of a p5.Vector object so\nthat its magnitude is 1.

            \n

            The static version of normalize(), as in p5.Vector.normalize(v),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n", "itemtype": "method", "name": "normalize", @@ -18672,7 +18529,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1730, + "line": 1726, "params": [], "return": { "description": "normalized p5.Vector.", @@ -18680,7 +18537,7 @@ } }, { - "line": 3707, + "line": 3711, "params": [ { "name": "v", @@ -18704,7 +18561,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1839, + "line": 1835, "description": "

            Limits a vector's magnitude to a maximum value.

            \n

            The static version of limit(), as in p5.Vector.limit(v, 5), returns a\nnew p5.Vector object and doesn't change the\noriginal.

            \n", "itemtype": "method", "name": "limit", @@ -18717,7 +18574,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1839, + "line": 1835, "params": [ { "name": "max", @@ -18728,7 +18585,7 @@ "chainable": 1 }, { - "line": 3733, + "line": 3738, "params": [ { "name": "v", @@ -18757,7 +18614,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 1937, + "line": 1933, "description": "

            Sets a vector's magnitude to a given value.

            \n

            The static version of setMag(), as in p5.Vector.setMag(v, 10), returns\na new p5.Vector object and doesn't change the\noriginal.

            \n", "itemtype": "method", "name": "setMag", @@ -18770,7 +18627,7 @@ "submodule": "Vector", "overloads": [ { - "line": 1937, + "line": 1933, "params": [ { "name": "len", @@ -18781,7 +18638,7 @@ "chainable": 1 }, { - "line": 3760, + "line": 3766, "params": [ { "name": "v", @@ -18810,7 +18667,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2030, + "line": 2026, "description": "

            Calculates the angle a 2D vector makes with the positive x-axis.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), heading() returns angles\nin the units of the current angleMode().

            \n

            The static version of heading(), as in p5.Vector.heading(v), works the\nsame way.

            \n", "itemtype": "method", "name": "heading", @@ -18826,7 +18683,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2030, + "line": 2026, "params": [], "return": { "description": "angle of rotation.", @@ -18834,7 +18691,7 @@ } }, { - "line": 3789, + "line": 3796, "params": [ { "name": "v", @@ -18852,7 +18709,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2138, + "line": 2134, "description": "

            Rotates a 2D vector to a specific angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), setHeading() uses\nthe units of the current angleMode().

            \n", "itemtype": "method", "name": "setHeading", @@ -18873,7 +18730,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2242, + "line": 2238, "description": "

            Rotates a 2D vector by an angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), rotate() uses\nthe units of the current angleMode().

            \n

            The static version of rotate(), as in p5.Vector.rotate(v, PI),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n", "itemtype": "method", "name": "rotate", @@ -18886,7 +18743,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2242, + "line": 2238, "params": [ { "name": "angle", @@ -18897,7 +18754,7 @@ "chainable": 1 }, { - "line": 3495, + "line": 3491, "params": [ { "name": "v", @@ -18916,13 +18773,17 @@ "optional": true } ], - "static": 1 + "static": 1, + "return": { + "description": "The resulting new p5.Vector", + "type": "p5.Vector" + } } ] }, { "file": "src/math/p5.Vector.js", - "line": 2388, + "line": 2384, "description": "

            Calculates the angle between two vectors.

            \n

            The angles returned are signed, which means that\nv1.angleBetween(v2) === -v2.angleBetween(v1).

            \n

            If the vector was created with\ncreateVector(), angleBetween() returns\nangles in the units of the current\nangleMode().

            \n", "itemtype": "method", "name": "angleBetween", @@ -18938,7 +18799,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2388, + "line": 2384, "params": [ { "name": "value", @@ -18952,7 +18813,7 @@ } }, { - "line": 3804, + "line": 3811, "params": [ { "name": "v1", @@ -18975,7 +18836,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2542, + "line": 2538, "description": "

            Calculates new x, y, and z components that are proportionally the\nsame distance between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.

            \n

            The static version of lerp(), as in p5.Vector.lerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n", "itemtype": "method", "name": "lerp", @@ -18988,7 +18849,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2542, + "line": 2538, "params": [ { "name": "x", @@ -19014,7 +18875,7 @@ "chainable": 1 }, { - "line": 2655, + "line": 2651, "params": [ { "name": "v", @@ -19030,7 +18891,7 @@ "chainable": 1 }, { - "line": 3618, + "line": 3620, "params": [ { "name": "v1", @@ -19064,7 +18925,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2671, + "line": 2667, "description": "

            Calculates a new heading and magnitude that are between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.

            \n

            slerp() differs from lerp() because\nit interpolates magnitude. Calling v0.slerp(v1, 0.5) sets v0's\nmagnitude to a value halfway between its original magnitude and v1's.\nCalling v0.lerp(v1, 0.5) makes no such guarantee.

            \n

            The static version of slerp(), as in p5.Vector.slerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n", "itemtype": "method", "name": "slerp", @@ -19080,7 +18941,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2671, + "line": 2667, "params": [ { "name": "v", @@ -19099,7 +18960,7 @@ } }, { - "line": 3649, + "line": 3652, "params": [ { "name": "v1", @@ -19133,7 +18994,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2873, + "line": 2869, "description": "

            Reflects a vector about a line in 2D or a plane in 3D.

            \n

            The orientation of the line or plane is described by a normal vector that\npoints away from the shape.

            \n

            The static version of reflect(), as in p5.Vector.reflect(v, n),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n", "itemtype": "method", "name": "reflect", @@ -19146,7 +19007,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2873, + "line": 2869, "params": [ { "name": "surfaceNormal", @@ -19157,7 +19018,7 @@ "chainable": 1 }, { - "line": 3819, + "line": 3826, "params": [ { "name": "incidentVector", @@ -19186,7 +19047,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 2983, + "line": 2979, "description": "

            Returns the vector's components as an array of numbers.

            \n", "itemtype": "method", "name": "array", @@ -19202,7 +19063,7 @@ "submodule": "Vector", "overloads": [ { - "line": 2983, + "line": 2979, "params": [], "return": { "description": "array with the vector's components.", @@ -19210,7 +19071,7 @@ } }, { - "line": 3848, + "line": 3856, "params": [ { "name": "v", @@ -19228,7 +19089,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3005, + "line": 3001, "description": "

            Checks whether all the vector's components are equal to another vector's.

            \n

            equals() returns true if the vector's components are all the same as another\nvector's and false if not.

            \n

            The version of equals() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of equals() with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.

            \n

            The static version of equals(), as in p5.Vector.equals(v0, v1),\ninterprets both parameters as p5.Vector objects.

            \n", "itemtype": "method", "name": "equals", @@ -19244,7 +19105,7 @@ "submodule": "Vector", "overloads": [ { - "line": 3005, + "line": 3001, "params": [ { "name": "x", @@ -19271,7 +19132,7 @@ } }, { - "line": 3078, + "line": 3074, "params": [ { "name": "value", @@ -19285,7 +19146,7 @@ } }, { - "line": 3861, + "line": 3869, "params": [ { "name": "v1", @@ -19308,7 +19169,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3103, + "line": 3099, "description": "

            Creates a new 2D vector from an angle.

            \n", "itemtype": "method", "name": "fromAngle", @@ -19339,7 +19200,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3181, + "line": 3174, "description": "

            Creates a new 3D vector from a pair of ISO spherical angles.

            \n", "itemtype": "method", "name": "fromAngles", @@ -19375,7 +19236,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3253, + "line": 3243, "description": "

            Creates a new 2D unit vector with a random heading.

            \n", "itemtype": "method", "name": "random2D", @@ -19393,7 +19254,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3321, + "line": 3311, "description": "

            Creates a new 3D unit vector with a random heading.

            \n", "itemtype": "method", "name": "random3D", @@ -19411,7 +19272,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3439, + "line": 3431, "description": "

            Multiplies a vector by a scalar and returns a new vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19419,7 +19280,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3491, + "line": 3487, "description": "

            Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19427,7 +19288,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3518, + "line": 3516, "description": "

            Divides a vector by a scalar and returns a new vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19435,7 +19296,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3571, + "line": 3573, "description": "

            Calculates the dot product of two vectors.

            \n", "class": "p5.Vector", "module": "Math", @@ -19443,7 +19304,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3585, + "line": 3587, "description": "

            Calculates the cross product of two vectors.

            \n", "class": "p5.Vector", "module": "Math", @@ -19451,7 +19312,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3599, + "line": 3601, "description": "

            Calculates the Euclidean distance between two points (considering a\npoint as a vector object).

            \n", "class": "p5.Vector", "module": "Math", @@ -19459,7 +19320,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3614, + "line": 3616, "description": "

            Linear interpolate a vector to another vector and return the result as a\nnew vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19467,7 +19328,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3643, + "line": 3646, "description": "

            Performs spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19475,7 +19336,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3674, + "line": 3678, "description": "

            Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(x*x + y*y + z*z).)

            \n", "class": "p5.Vector", "module": "Math", @@ -19483,7 +19344,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3688, + "line": 3692, "description": "

            Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x*x + y*y + z*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.

            \n", "class": "p5.Vector", "module": "Math", @@ -19491,7 +19352,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3704, + "line": 3708, "description": "

            Normalize the vector to length 1 (make it a unit vector).

            \n", "class": "p5.Vector", "module": "Math", @@ -19499,7 +19360,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3729, + "line": 3734, "description": "

            Limit the magnitude of the vector to the value used for the max\nparameter.

            \n", "class": "p5.Vector", "module": "Math", @@ -19507,7 +19368,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3756, + "line": 3762, "description": "

            Set the magnitude of the vector to the value used for the len\nparameter.

            \n", "class": "p5.Vector", "module": "Math", @@ -19515,7 +19376,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3783, + "line": 3790, "description": "

            Calculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.

            \n", "class": "p5.Vector", "module": "Math", @@ -19523,7 +19384,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3799, + "line": 3806, "description": "

            Calculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.

            \n", "class": "p5.Vector", "module": "Math", @@ -19531,7 +19392,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3815, + "line": 3822, "description": "

            Reflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.

            \n", "class": "p5.Vector", "module": "Math", @@ -19539,7 +19400,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3842, + "line": 3850, "description": "

            Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.

            \n", "class": "p5.Vector", "module": "Math", @@ -19547,7 +19408,7 @@ }, { "file": "src/math/p5.Vector.js", - "line": 3858, + "line": 3866, "description": "

            Equality check against a p5.Vector

            \n", "class": "p5.Vector", "module": "Math", @@ -21649,155 +21510,158 @@ { "file": "src/webgl/3d_primitives.js", "line": 13, - "description": "

            Starts creating a new p5.Geometry. Subsequent shapes drawn will be added\nto the geometry and then returned when\nendGeometry() is called. One can also use\nbuildGeometry() to pass a function that\ndraws shapes.

            \n

            If you need to draw complex shapes every frame which don't change over time,\ncombining them upfront with beginGeometry() and endGeometry() and then\ndrawing that will run faster than repeatedly drawing the individual pieces.

            \n", + "description": "

            Begins adding shapes to a new\np5.Geometry object.

            \n

            The beginGeometry() and endGeometry()\nfunctions help with creating complex 3D shapes from simpler ones such as\nsphere(). beginGeometry() begins adding shapes\nto a custom p5.Geometry object and\nendGeometry() stops adding them.

            \n

            beginGeometry() and endGeometry() can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\nbeginGeometry() and endGeometry().\nCreating a p5.Geometry object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.

            \n

            See buildGeometry() for another way to\nbuild 3D shapes.

            \n

            Note: beginGeometry() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "beginGeometry", "example": [ - "\n
            \n\nlet shapes;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n makeShapes();\n}\n\nfunction makeShapes() {\n beginGeometry();\n scale(0.18);\n\n push();\n translate(100, -50);\n scale(0.5);\n rotateX(PI/4);\n cone();\n pop();\n cone();\n\n beginShape();\n vertex(-20, -50);\n quadraticVertex(\n -40, -70,\n 0, -60\n );\n endShape();\n\n beginShape(TRIANGLE_STRIP);\n for (let y = 20; y <= 60; y += 10) {\n for (let x of [20, 60]) {\n vertex(x, y);\n }\n }\n endShape();\n\n beginShape();\n vertex(-100, -120);\n vertex(-120, -110);\n vertex(-105, -100);\n endShape();\n\n shapes = endGeometry();\n}\n\nfunction draw() {\n background(255);\n lights();\n orbitControl();\n model(shapes);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            " ], - "alt": "A series of different flat, curved, and 3D shapes floating in space.", "class": "p5", "module": "Shape", "submodule": "3D Primitives" }, { "file": "src/webgl/3d_primitives.js", - "line": 89, - "description": "

            Finishes creating a new p5.Geometry that was\nstarted using beginGeometry(). One can also\nuse buildGeometry() to pass a function that\ndraws shapes.

            \n", + "line": 266, + "description": "

            Stops adding shapes to a new\np5.Geometry object and returns the object.

            \n

            The beginGeometry() and endGeometry()\nfunctions help with creating complex 3D shapes from simpler ones such as\nsphere(). beginGeometry() begins adding shapes\nto a custom p5.Geometry object and\nendGeometry() stops adding them.

            \n

            beginGeometry() and endGeometry() can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\nbeginGeometry() and endGeometry().\nCreating a p5.Geometry object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.

            \n

            See buildGeometry() for another way to\nbuild 3D shapes.

            \n

            Note: endGeometry() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "endGeometry", "return": { - "description": "The model that was built.", + "description": "new 3D shape.", "type": "p5.Geometry" }, + "example": [ + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            " + ], "class": "p5", "module": "Shape", "submodule": "3D Primitives" }, { "file": "src/webgl/3d_primitives.js", - "line": 102, - "description": "

            Creates a new p5.Geometry that contains all\nthe shapes drawn in a provided callback function. The returned combined shape\ncan then be drawn all at once using model().

            \n

            If you need to draw complex shapes every frame which don't change over time,\ncombining them with buildGeometry() once and then drawing that will run\nfaster than repeatedly drawing the individual pieces.

            \n

            One can also draw shapes directly between\nbeginGeometry() and\nendGeometry() instead of using a callback\nfunction.

            \n", + "line": 520, + "description": "

            Creates a custom p5.Geometry object from\nsimpler 3D shapes.

            \n

            buildGeometry() helps with creating complex 3D shapes from simpler ones\nsuch as sphere(). It can help to make sketches\nmore performant. For example, if a complex 3D shape doesn’t change while a\nsketch runs, then it can be created with buildGeometry(). Creating a\np5.Geometry object once and then drawing it\nwill run faster than repeatedly drawing the individual pieces.

            \n

            The parameter, callback, is a function with the drawing instructions for\nthe new p5.Geometry object. It will be called\nonce to create the new 3D shape.

            \n

            See beginGeometry() and\nendGeometry() for another way to build 3D\nshapes.

            \n

            Note: buildGeometry() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "buildGeometry", "params": [ { "name": "callback", - "description": "

            A function that draws shapes.

            \n", + "description": "

            function that draws the shape.

            \n", "type": "Function" } ], "return": { - "description": "The model that was built from the callback function.", + "description": "new 3D shape.", "type": "p5.Geometry" }, "example": [ - "\n
            \n\nlet particles;\nlet button;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n button = createButton('New');\n button.mousePressed(makeParticles);\n makeParticles();\n}\n\nfunction makeParticles() {\n if (particles) freeGeometry(particles);\n\n particles = buildGeometry(() => {\n for (let i = 0; i < 60; i++) {\n push();\n translate(\n randomGaussian(0, 20),\n randomGaussian(0, 20),\n randomGaussian(0, 20)\n );\n sphere(5);\n pop();\n }\n });\n}\n\nfunction draw() {\n background(255);\n noStroke();\n lights();\n orbitControl();\n model(particles);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrow.\n shape = buildGeometry(createArrow);\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrow.\n noStroke();\n\n // Draw the arrow.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n\n describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n\n
            " ], - "alt": "A cluster of spheres.", "class": "p5", "module": "Shape", "submodule": "3D Primitives" }, { "file": "src/webgl/3d_primitives.js", - "line": 167, - "description": "

            Clears the resources of a model to free up browser memory. A model whose\nresources have been cleared can still be drawn, but the first time it is\ndrawn again, it might take longer.

            \n

            This method works on models generated with\nbuildGeometry() as well as those loaded\nfrom loadModel().

            \n", + "line": 748, + "description": "

            Clears a p5.Geometry object from the graphics\nprocessing unit (GPU) memory.

            \n

            p5.Geometry objects can contain lots of data\nabout their vertices, surface normals, colors, and so on. Complex 3D shapes\ncan use lots of memory which is a limited resource in many GPUs. Calling\nfreeGeometry() can improve performance by freeing a\np5.Geometry object’s resources from GPU memory.\nfreeGeometry() works with p5.Geometry objects\ncreated with beginGeometry() and\nendGeometry(),\nbuildGeometry(), and\nloadModel().

            \n

            The parameter, geometry, is the p5.Geometry\nobject to be freed.

            \n

            Note: A p5.Geometry object can still be drawn\nafter its resources are cleared from GPU memory. It may take longer to draw\nthe first time it’s redrawn.

            \n

            Note: freeGeometry() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "freeGeometry", "params": [ { "name": "geometry", - "description": "

            The geometry whose resources should be freed

            \n", + "description": "

            3D shape whose resources should be freed.

            \n", "type": "p5.Geometry" } ], + "example": [ + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n beginGeometry();\n cone();\n let shape = endGeometry();\n\n // Draw the shape.\n model(shape);\n\n // Free the shape's resources.\n freeGeometry(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n\n
            " + ], "class": "p5", "module": "Shape", "submodule": "3D Primitives" }, { "file": "src/webgl/3d_primitives.js", - "line": 183, - "description": "

            Draw a plane with given a width and height

            \n", + "line": 866, + "description": "

            Draws a plane.

            \n

            A plane is a four-sided, flat shape with every angle measuring 90˚. It’s\nsimilar to a rectangle and offers advanced drawing features in WebGL mode.

            \n

            The first parameter, width, is optional. If a Number is passed, as in\nplane(20), it sets the plane’s width and height. By default, width is\n50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in plane(20, 30), it sets the plane’s height. By default, height is\nset to the plane’s width.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in plane(20, 30, 5) it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, detailX is 1.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in plane(20, 30, 5, 7) it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 1.

            \n

            Note: plane() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "plane", "params": [ { "name": "width", - "description": "

            width of the plane

            \n", + "description": "

            width of the plane.

            \n", "type": "Number", "optional": true }, { "name": "height", - "description": "

            height of the plane

            \n", + "description": "

            height of the plane.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            Optional number of triangle\n subdivisions in x-dimension

            \n", + "description": "

            number of triangle subdivisions along the x-axis.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            Optional number of triangle\n subdivisions in y-dimension

            \n", + "description": "

            number of triangle subdivisions along the y-axis.

            \n", "type": "Integer", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white plane with black wireframe lines');\n}\n\nfunction draw() {\n background(200);\n plane(50, 50);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n plane();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width and height to 30.\n plane(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width to 30 and height to 50.\n plane(30, 50);\n}\n\n
            " ], - "alt": "Nothing displayed on canvas\nRotating interior view of a box with sides that change color.\n3d red and green gradient.\nRotating interior view of a cylinder with sides that change color.\nRotating view of a cylinder with sides that change color.\n3d red and green gradient.\nrotating view of a multi-colored cylinder with concave sides.", "class": "p5", "module": "Shape", "submodule": "3D Primitives" }, { "file": "src/webgl/3d_primitives.js", - "line": 260, - "description": "

            Draw a box with given width, height and depth

            \n", + "line": 1009, + "description": "

            Draws a box (rectangular prism).

            \n

            A box is a 3D shape with six faces. Each face makes a 90˚ with four\nneighboring faces.

            \n

            The first parameter, width, is optional. If a Number is passed, as in\nbox(20), it sets the box’s width and height. By default, width is 50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in box(20, 30), it sets the box’s height. By default, height is set\nto the box’s width.

            \n

            The third parameter, depth, is also optional. If a Number is passed, as\nin box(20, 30, 40), it sets the box’s depth. By default, depth is set\nto the box’s height.

            \n

            The fourth parameter, detailX, is also optional. If a Number is passed,\nas in box(20, 30, 40, 5), it sets the number of triangle subdivisions to\nuse along the x-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailX is 1.

            \n

            The fifth parameter, detailY, is also optional. If a number is passed, as\nin box(20, 30, 40, 5, 7), it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 1.

            \n

            Note: box() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "box", "params": [ { "name": "width", - "description": "

            width of the box

            \n", + "description": "

            width of the box.

            \n", "type": "Number", "optional": true }, { "name": "height", - "description": "

            height of the box

            \n", + "description": "

            height of the box.

            \n", "type": "Number", "optional": true }, { "name": "depth", - "description": "

            depth of the box

            \n", + "description": "

            depth of the box.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            Optional number of triangle\n subdivisions in x-dimension

            \n", + "description": "

            number of triangle subdivisions along the x-axis.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            Optional number of triangle\n subdivisions in y-dimension

            \n", + "description": "

            number of triangle subdivisions along the y-axis.

            \n", "type": "Integer", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a white box rotating in 3D space');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(50);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width and height to 30.\n box(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30 and height to 50.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30, height to 50, and depth to 10.\n box(30, 50, 10);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -21805,35 +21669,33 @@ }, { "file": "src/webgl/3d_primitives.js", - "line": 381, - "description": "

            Draw a sphere with given radius.

            \n

            DetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a sphere. More subdivisions make the sphere seem\nsmoother. The recommended maximum values are both 24. Using a value greater\nthan 24 may cause a warning or slow down the browser.

            \n", + "line": 1227, + "description": "

            Draws a sphere.

            \n

            A sphere is a 3D shape with triangular faces that connect to form a round\nsurface. Spheres with few faces look like crystals. Spheres with many faces\nhave smooth surfaces and look like balls.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\nsphere(20), it sets the radius of the sphere. By default, radius is 50.

            \n

            The second parameter, detailX, is also optional. If a Number is passed,\nas in sphere(20, 5), it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, detailX is 24.

            \n

            The third parameter, detailY, is also optional. If a Number is passed,\nas in sphere(20, 5, 2), it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 16.

            \n

            Note: sphere() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "sphere", "params": [ { "name": "radius", - "description": "

            radius of circle

            \n", + "description": "

            radius of the sphere. Defaults to 50.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            optional number of subdivisions in x-dimension

            \n", + "description": "

            number of triangle subdivisions along the x-axis. Defaults to 24.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            optional number of subdivisions in y-dimension

            \n", + "description": "

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n", "type": "Integer", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a sphere with radius 40\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white sphere with black wireframe lines');\n}\n\nfunction draw() {\n background(205, 102, 94);\n sphere(40);\n}\n\n
            ", - "\n
            \n\nlet detailX;\n// slide to see how detailX works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a white sphere with low detail on the x-axis, including a slider to adjust detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, detailX.value(), 16);\n}\n\n
            ", - "\n
            \n\nlet detailY;\n// slide to see how detailY works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a white sphere with low detail on the y-axis, including a slider to adjust detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, 16, detailY.value());\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n sphere();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 6.\n sphere(30, 6);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 24.\n // Set its detailY to 4.\n sphere(30, 24, 4);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -21841,53 +21703,51 @@ }, { "file": "src/webgl/3d_primitives.js", - "line": 583, - "description": "

            Draw a cylinder with given radius and height

            \n

            DetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother.\nThe recommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.

            \n", + "line": 1477, + "description": "

            Draws a cylinder.

            \n

            A cylinder is a 3D shape with triangular faces that connect a flat bottom\nto a flat top. Cylinders with few faces look like boxes. Cylinders with\nmany faces have smooth surfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ncylinder(20), it sets the radius of the cylinder’s base. By default,\nradius is 50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in cylinder(20, 30), it sets the cylinder’s height. By default,\nheight is set to the cylinder’s radius.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in cylinder(20, 30, 5), it sets the number of edges used to form the\ncylinder's top and bottom. Using more edges makes the top and bottom look\nmore like circles. By default, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in cylinder(20, 30, 5, 2), it sets the number of triangle subdivisions\nto use along the y-axis, between cylinder's the top and bottom. All 3D\nshapes are made by connecting triangles to form their surfaces. By default,\ndetailY is 1.

            \n

            The fifth parameter, bottomCap, is also optional. If a false is passed,\nas in cylinder(20, 30, 5, 2, false) the cylinder’s bottom won’t be drawn.\nBy default, bottomCap is true.

            \n

            The sixth parameter, topCap, is also optional. If a false is passed, as\nin cylinder(20, 30, 5, 2, false, false) the cylinder’s top won’t be\ndrawn. By default, topCap is true.

            \n

            Note: cylinder() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "cylinder", "params": [ { "name": "radius", - "description": "

            radius of the surface

            \n", + "description": "

            radius of the cylinder. Defaults to 50.

            \n", "type": "Number", "optional": true }, { "name": "height", - "description": "

            height of the cylinder

            \n", + "description": "

            height of the cylinder. Defaults to the value of radius.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            number of subdivisions in x-dimension;\n default is 24

            \n", + "description": "

            number of edges along the top and bottom. Defaults to 24.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            number of subdivisions in y-dimension;\n default is 1

            \n", + "description": "

            number of triangle subdivisions along the y-axis. Defaults to 1.

            \n", "type": "Integer", "optional": true }, { "name": "bottomCap", - "description": "

            whether to draw the bottom of the cylinder

            \n", + "description": "

            whether to draw the cylinder's bottom. Defaults to true.

            \n", "type": "Boolean", "optional": true }, { "name": "topCap", - "description": "

            whether to draw the top of the cylinder

            \n", + "description": "

            whether to draw the cylinder's top. Defaults to true.

            \n", "type": "Boolean", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a rotating white cylinder');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cylinder(20, 50);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, detailX.value(), 1);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(1, 16, 1);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, 16, detailY.value());\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n cylinder();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius and height to 30.\n cylinder(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n cylinder(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cylinder(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cylinder(30, 50, 24, 2);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom.\n cylinder(30, 50, 24, 1, false);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top and bottom are missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom or top.\n cylinder(30, 50, 24, 1, false, false);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -21895,47 +21755,45 @@ }, { "file": "src/webgl/3d_primitives.js", - "line": 707, - "description": "

            Draw a cone with given radius and height

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the cone seem smoother. The\nrecommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.

            \n", + "line": 1730, + "description": "

            Draws a cone.

            \n

            A cone is a 3D shape with triangular faces that connect a flat bottom to a\nsingle point. Cones with few faces look like pyramids. Cones with many\nfaces have smooth surfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ncone(20), it sets the radius of the cone’s base. By default, radius is\n50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in cone(20, 30), it sets the cone’s height. By default, height is\nset to the cone’s radius.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in cone(20, 30, 5), it sets the number of edges used to form the\ncone's base. Using more edges makes the base look more like a circle. By\ndefault, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in cone(20, 30, 5, 7), it sets the number of triangle subdivisions to\nuse along the y-axis connecting the base to the tip. All 3D shapes are made\nby connecting triangles to form their surfaces. By default, detailY is 1.

            \n

            The fifth parameter, cap, is also optional. If a false is passed, as\nin cone(20, 30, 5, 7, false) the cone’s base won’t be drawn. By default,\ncap is true.

            \n

            Note: cone() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "cone", "params": [ { "name": "radius", - "description": "

            radius of the bottom surface

            \n", + "description": "

            radius of the cone's base. Defaults to 50.

            \n", "type": "Number", "optional": true }, { "name": "height", - "description": "

            height of the cone

            \n", + "description": "

            height of the cone. Defaults to the value of radius.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            number of segments,\n the more segments the smoother geometry\n default is 24

            \n", + "description": "

            number of edges used to draw the base. Defaults to 24.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            number of segments,\n the more segments the smoother geometry\n default is 1

            \n", + "description": "

            number of triangle subdivisions along the y-axis. Defaults to 1.

            \n", "type": "Integer", "optional": true }, { "name": "cap", - "description": "

            whether to draw the base of the cone

            \n", + "description": "

            whether to draw the cone's base. Defaults to true.

            \n", "type": "Boolean", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a rotating white cone');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cone(40, 70);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailx works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 16, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white cone with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, detailX.value(), 16);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white cone with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, 16, detailY.value());\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius and height to 30.\n cone(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n cone(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white pyramid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cone(30, 50, 24, 2);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background. Its base is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its base.\n cone(30, 50, 24, 1, false);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -21943,47 +21801,45 @@ }, { "file": "src/webgl/3d_primitives.js", - "line": 820, - "description": "

            Draw an ellipsoid with given radius

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother.\nAvoid detail number above 150, it may crash the browser.

            \n", + "line": 1965, + "description": "

            Draws an ellipsoid.

            \n

            An ellipsoid is a 3D shape with triangular faces that connect to form a\nround surface. Ellipsoids with few faces look like crystals. Ellipsoids\nwith many faces have smooth surfaces and look like eggs. ellipsoid()\ndefines a shape by its radii. This is different from\nellipse() which uses diameters\n(width and height).

            \n

            The first parameter, radiusX, is optional. If a Number is passed, as in\nellipsoid(20), it sets the radius of the ellipsoid along the x-axis. By\ndefault, radiusX is 50.

            \n

            The second parameter, radiusY, is also optional. If a Number is passed,\nas in ellipsoid(20, 30), it sets the ellipsoid’s radius along the y-axis.\nBy default, radiusY is set to the ellipsoid’s radiusX.

            \n

            The third parameter, radiusZ, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40), it sets the ellipsoid’s radius along the\nz-axis. By default, radiusZ is set to the ellipsoid’s radiusY.

            \n

            The fourth parameter, detailX, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40, 5), it sets the number of triangle\nsubdivisions to use along the x-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, detailX is 24.

            \n

            The fifth parameter, detailY, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40, 5, 7), it sets the number of triangle\nsubdivisions to use along the y-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, detailY is 16.

            \n

            Note: ellipsoid() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "ellipsoid", "params": [ { - "name": "radiusx", - "description": "

            x-radius of ellipsoid

            \n", + "name": "radiusX", + "description": "

            radius of the ellipsoid along the x-axis. Defaults to 50.

            \n", "type": "Number", "optional": true }, { - "name": "radiusy", - "description": "

            y-radius of ellipsoid

            \n", + "name": "radiusY", + "description": "

            radius of the ellipsoid along the y-axis. Defaults to radiusX.

            \n", "type": "Number", "optional": true }, { - "name": "radiusz", - "description": "

            z-radius of ellipsoid

            \n", + "name": "radiusZ", + "description": "

            radius of the ellipsoid along the z-axis. Defaults to radiusY.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.

            \n", + "description": "

            number of triangle subdivisions along the x-axis. Defaults to 24.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.

            \n", + "description": "

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n", "type": "Integer", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white 3d ellipsoid');\n}\n\nfunction draw() {\n background(205, 105, 94);\n ellipsoid(30, 40, 40);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(2, 24, 12);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(2, 24, 6);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 9);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, 12, detailY.value());\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n ellipsoid(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n ellipsoid(30, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n ellipsoid(30, 40, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n ellipsoid(30, 40, 50, 4);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n // Set its detailY to 3.\n ellipsoid(30, 40, 50, 4, 3);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -21991,41 +21847,39 @@ }, { "file": "src/webgl/3d_primitives.js", - "line": 952, - "description": "

            Draw a torus with given radius and tube radius

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a torus. More subdivisions make the torus appear to be smoother.\nThe default and maximum values for detailX and detailY are 24 and 16, respectively.\nSetting them to relatively small values like 4 and 6 allows you to create new\nshapes other than a torus.

            \n", + "line": 2183, + "description": "

            Draws a torus.

            \n

            A torus is a 3D shape with triangular faces that connect to form a ring.\nToruses with few faces look flattened. Toruses with many faces have smooth\nsurfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ntorus(30), it sets the radius of the ring. By default, radius is 50.

            \n

            The second parameter, tubeRadius, is also optional. If a Number is\npassed, as in torus(30, 15), it sets the radius of the tube. By default,\ntubeRadius is 10.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in torus(30, 15, 5), it sets the number of edges used to draw the hole\nof the torus. Using more edges makes the hole look more like a circle. By\ndefault, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in torus(30, 15, 5, 7), it sets the number of triangle subdivisions to\nuse while filling in the torus’ height. By default, detailY is 16.

            \n

            Note: torus() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "torus", "params": [ { "name": "radius", - "description": "

            radius of the whole ring

            \n", + "description": "

            radius of the torus. Defaults to 50.

            \n", "type": "Number", "optional": true }, { "name": "tubeRadius", - "description": "

            radius of the tube

            \n", + "description": "

            radius of the tube. Defaults to 10.

            \n", "type": "Number", "optional": true }, { "name": "detailX", - "description": "

            number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24

            \n", + "description": "

            number of edges that form the hole. Defaults to 24.

            \n", "type": "Integer", "optional": true }, { "name": "detailY", - "description": "

            number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16

            \n", + "description": "

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n", "type": "Integer", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a rotating white torus');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n torus(30, 15);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white torus with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, detailX.value(), 12);\n}\n\n
            ", - "\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white torus with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, 16, detailY.value());\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n torus();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30.\n torus(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n torus(30, 15);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n torus(30, 15, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n // Set its detailY to 3.\n torus(30, 15, 5, 3);\n}\n\n
            " ], "class": "p5", "module": "Shape", @@ -22065,68 +21919,62 @@ { "file": "src/webgl/interaction.js", "line": 11, - "description": "

            Allows movement around a 3D sketch using a mouse or trackpad or touch.\nLeft-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch, right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation, and using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse/touch movement along the X and Y axes.\nCalling this function without parameters is equivalent to calling\norbitControl(1,1). To reverse direction of movement in either axis,\nenter a negative number for sensitivity.

            \n", + "description": "

            Allows the user to orbit around a 3D sketch using a mouse, trackpad, or\ntouchscreen.

            \n

            3D sketches are viewed through an imaginary camera. Calling\norbitControl() within the draw() function allows\nthe user to change the camera’s position:

            \n\nfunction draw() {\n background(200);\n\n

            // Enable orbiting with the mouse.\n orbitControl();

            \n

            // Rest of sketch.\n}\n

            \n

            Left-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch. Right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation. Using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer from the\ncenter of the sketch.

            \n

            The first three parameters, sensitivityX, sensitivityY, and\nsensitivityZ, are optional. They’re numbers that set the sketch’s\nsensitivity to movement along each axis. For example, calling\norbitControl(1, 2, -1) keeps movement along the x-axis at its default\nvalue, makes the sketch twice as sensitive to movement along the y-axis,\nand reverses motion along the z-axis. By default, all sensitivity values\nare 1.

            \n

            The fourth parameter, options, is also optional. It’s an object that\nchanges the behavior of orbiting. For example, calling\norbitControl(1, 1, 1, options) keeps the default sensitivity values while\nchanging the behaviors set with options. The object can have the\nfollowing properties:

            \n\nlet options = {\n // Setting this to false makes mobile interactions smoother by\n // preventing accidental interactions with the page while orbiting.\n // By default, it's true.\n disableTouchActions: true,\n\n

            // Setting this to true makes the camera always rotate in the\n // direction the mouse/touch is moving.\n // By default, it's false.\n freeRotation: false\n};

            \n

            orbitControl(1, 1, 1, options);\n

            \n", "itemtype": "method", "name": "orbitControl", "params": [ { "name": "sensitivityX", - "description": "

            sensitivity to mouse movement along X axis

            \n", + "description": "

            sensitivity to movement along the x-axis. Defaults to 1.

            \n", "type": "Number", "optional": true }, { "name": "sensitivityY", - "description": "

            sensitivity to mouse movement along Y axis

            \n", + "description": "

            sensitivity to movement along the y-axis. Defaults to 1.

            \n", "type": "Number", "optional": true }, { "name": "sensitivityZ", - "description": "

            sensitivity to scroll movement along Z axis

            \n", + "description": "

            sensitivity to movement along the z-axis. Defaults to 1.

            \n", "type": "Number", "optional": true }, { "name": "options", - "description": "

            An optional object that can contain additional settings,\ndisableTouchActions - Boolean, default value is true.\nSetting this to true makes mobile interactions smoother by preventing\naccidental interactions with the page while orbiting. But if you're already\ndoing it via css or want the default touch actions, consider setting it to false.\nfreeRotation - Boolean, default value is false.\nBy default, horizontal movement of the mouse or touch pointer rotates the camera\naround the y-axis, and vertical movement rotates the camera around the x-axis.\nBut if setting this option to true, the camera always rotates in the direction\nthe pointer is moving. For zoom and move, the behavior is the same regardless of\ntrue/false.

            \n", + "description": "

            object with two optional properties, disableTouchActions\n and freeRotation. Both are Booleans. disableTouchActions\n defaults to true and freeRotation defaults to false.

            \n", "type": "Object", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n describe(\n 'Camera orbits around a box when mouse is hold-clicked & then moved.'\n );\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(200);\n\n // If you execute the line commented out instead of next line, the direction of rotation\n // will be the direction the mouse or touch pointer moves, not around the X or Y axis.\n orbitControl();\n // orbitControl(1, 1, 1, {freeRotation: true});\n\n rotateY(0.5);\n box(30, 50);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n // Make the interactions 3X sensitive.\n orbitControl(3, 3, 3);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Create an options object.\n let options = {\n disableTouchActions: false,\n freeRotation: true\n };\n\n // Enable orbiting with the mouse.\n // Prevent accidental touch actions on touchscreen devices\n // and enable free rotation.\n orbitControl(1, 1, 1, options);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            " ], - "alt": "Camera orbits around a box when mouse is hold-clicked & then moved.", "class": "p5", "module": "3D", "submodule": "Interaction" }, { "file": "src/webgl/interaction.js", - "line": 378, - "description": "

            debugMode() helps visualize 3D space by adding a grid to indicate where the\n‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z\ndirections. This function can be called without parameters to create a\ndefault grid and axes icon, or it can be called according to the examples\nabove to customize the size and position of the grid and/or axes icon. The\ngrid is drawn using the most recently set stroke color and weight. To\nspecify these parameters, add a call to stroke() and strokeWeight()\njust before the end of the draw() loop.

            \n

            By default, the grid will run through the origin (0,0,0) of the sketch\nalong the XZ plane\nand the axes icon will be offset from the origin. Both the grid and axes\nicon will be sized according to the current canvas size. Note that because the\ngrid runs parallel to the default camera view, it is often helpful to use\ndebugMode along with orbitControl to allow full view of the grid.

            \n", + "line": 471, + "description": "

            Adds a grid and an axes icon to clarify orientation in 3D sketches.

            \n

            debugMode() adds a grid that shows where the “ground” is in a sketch. By\ndefault, the grid will run through the origin (0, 0, 0) of the sketch\nalong the XZ plane. debugMode() also adds an axes icon that points along\nthe positive x-, y-, and z-axes. Calling debugMode() displays the grid\nand axes icon with their default size and position.

            \n

            There are four ways to call debugMode() with optional parameters to\ncustomize the debugging environment.

            \n

            The first way to call debugMode() has one parameter, mode. If the\nsystem constant GRID is passed, as in debugMode(GRID), then the grid\nwill be displayed and the axes icon will be hidden. If the constant AXES\nis passed, as in debugMode(AXES), then the axes icon will be displayed\nand the grid will be hidden.

            \n

            The second way to call debugMode() has six parameters. The first\nparameter, mode, selects either GRID or AXES to be displayed. The\nnext five parameters, gridSize, gridDivisions, xOff, yOff, and\nzOff are optional. They’re numbers that set the appearance of the grid\n(gridSize and gridDivisions) and the placement of the axes icon\n(xOff, yOff, and zOff). For example, calling\ndebugMode(20, 5, 10, 10, 10) sets the gridSize to 20 pixels, the number\nof gridDivisions to 5, and offsets the axes icon by 10 pixels along the\nx-, y-, and z-axes.

            \n

            The third way to call debugMode() has five parameters. The first\nparameter, mode, selects either GRID or AXES to be displayed. The\nnext four parameters, axesSize, xOff, yOff, and zOff are optional.\nThey’re numbers that set the appearance of the size of the axes icon\n(axesSize) and its placement (xOff, yOff, and zOff).

            \n

            The fourth way to call debugMode() has nine optional parameters. The\nfirst five parameters, gridSize, gridDivisions, gridXOff, gridYOff,\nand gridZOff are numbers that set the appearance of the grid. For\nexample, calling debugMode(100, 5, 0, 0, 0) sets the gridSize to 100,\nthe number of gridDivisions to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. The next four parameters, axesSize,\nxOff, yOff, and zOff are numbers that set the appearance of the size\nof the axes icon (axesSize) and its placement (axesXOff, axesYOff,\nand axesZOff). For example, calling\ndebugMode(100, 5, 0, 0, 0, 50, 10, 10, 10) sets the gridSize to 100,\nthe number of gridDivisions to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. It then sets the axesSize to 50 and\noffsets the icon 10 pixels along each axis.

            \n", "itemtype": "method", "name": "debugMode", "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode();\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(GRID);\n describe('a 3D box is centered on a grid in a 3D sketch.');\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(AXES);\n describe(\n 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(GRID, 100, 10, 0, 0, 0);\n describe('a 3D box is centered on a grid in a 3D sketch');\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'\n );\n}\n\nfunction draw() {\n noStroke();\n background(200);\n orbitControl();\n box(15, 30);\n // set the stroke color and weight for the grid!\n stroke(255, 0, 150);\n strokeWeight(0.8);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the axes icon.\n debugMode(AXES);\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the grid and customize it:\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n debugMode(GRID, 50, 10, 0, 20, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Display the grid and axes icon and customize them:\n // Grid\n // ----\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n // Axes\n // ----\n // - size: 50\n // - offsets: 0, 0, 0\n debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            " ], - "alt": "a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z.", "class": "p5", "module": "3D", "submodule": "Interaction", "overloads": [ { - "line": 378, + "line": 471, "params": [] }, { - "line": 527, + "line": 650, "params": [ { "name": "mode", @@ -22136,7 +21984,7 @@ ] }, { - "line": 532, + "line": 655, "params": [ { "name": "mode", @@ -22145,38 +21993,38 @@ }, { "name": "gridSize", - "description": "

            size of one side of the grid

            \n", + "description": "

            side length of the grid.

            \n", "type": "Number", "optional": true }, { "name": "gridDivisions", - "description": "

            number of divisions in the grid

            \n", + "description": "

            number of divisions in the grid.

            \n", "type": "Number", "optional": true }, { "name": "xOff", - "description": "

            X axis offset from origin (0,0,0)

            \n", + "description": "

            offset from origin along the x-axis.

            \n", "type": "Number", "optional": true }, { "name": "yOff", - "description": "

            Y axis offset from origin (0,0,0)

            \n", + "description": "

            offset from origin along the y-axis.

            \n", "type": "Number", "optional": true }, { "name": "zOff", - "description": "

            Z axis offset from origin (0,0,0)

            \n", + "description": "

            offset from origin along the z-axis.

            \n", "type": "Number", "optional": true } ] }, { - "line": 542, + "line": 665, "params": [ { "name": "mode", @@ -22185,7 +22033,7 @@ }, { "name": "axesSize", - "description": "

            size of axes icon

            \n", + "description": "

            length of axes icon markers.

            \n", "type": "Number", "optional": true }, @@ -22210,7 +22058,7 @@ ] }, { - "line": 551, + "line": 674, "params": [ { "name": "gridSize", @@ -22226,19 +22074,19 @@ }, { "name": "gridXOff", - "description": "", + "description": "

            grid offset from the origin along the x-axis.

            \n", "type": "Number", "optional": true }, { "name": "gridYOff", - "description": "", + "description": "

            grid offset from the origin along the y-axis.

            \n", "type": "Number", "optional": true }, { "name": "gridZOff", - "description": "", + "description": "

            grid offset from the origin along the z-axis.

            \n", "type": "Number", "optional": true }, @@ -22250,19 +22098,19 @@ }, { "name": "axesXOff", - "description": "", + "description": "

            axes icon offset from the origin along the x-axis.

            \n", "type": "Number", "optional": true }, { "name": "axesYOff", - "description": "", + "description": "

            axes icon offset from the origin along the y-axis.

            \n", "type": "Number", "optional": true }, { "name": "axesZOff", - "description": "", + "description": "

            axes icon offset from the origin along the z-axis.

            \n", "type": "Number", "optional": true } @@ -22272,14 +22120,13 @@ }, { "file": "src/webgl/interaction.js", - "line": 602, - "description": "

            Turns off debugMode() in a 3D sketch.

            \n", + "line": 725, + "description": "

            Turns off debugMode() in a 3D sketch.

            \n", "itemtype": "method", "name": "noDebugMode", "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode();\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box. box(20, 40);\n}\n\n// Disable debug mode when the user double-clicks.\nfunction doubleClicked() {\n noDebugMode();\n}\n\n
            " ], - "alt": "a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z. the grid and icon disappear when the\nspacebar is pressed.", "class": "p5", "module": "3D", "submodule": "Interaction" @@ -22287,16 +22134,13 @@ { "file": "src/webgl/light.js", "line": 10, - "description": "

            Creates an ambient light with the given color.

            \n

            Ambient light does not come from a specific direction.\nObjects are evenly lit from all sides. Ambient lights are\nalmost always used in combination with other types of lights.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n", + "description": "

            Creates a light that shines from all directions.

            \n

            Ambient light does not come from one direction. Instead, 3D shapes are\nlit evenly from all sides. Ambient lights are almost always used in\ncombination with other types of lights.

            \n

            There are three ways to call ambientLight() with optional parameters to\nset the light’s color.

            \n

            The first way to call ambientLight() has two parameters, gray and\nalpha. alpha is optional. Grayscale and alpha values between 0 and 255\ncan be passed to set the ambient light’s color, as in ambientLight(50) or\nambientLight(50, 30).

            \n

            The second way to call ambientLight() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in ambientLight('magenta'), can be passed to set the\nambient light’s color.

            \n

            The third way to call ambientLight() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the ambient light’s colors, as in ambientLight(255, 0, 0)\nor ambientLight(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n", "itemtype": "method", "name": "ambientLight", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('sphere with coral color under black light');\n}\nfunction draw() {\n background(100);\n ambientLight(0); // black light (no light)\n ambientMaterial(255, 127, 80); // coral material\n sphere(40);\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('sphere with coral color under white light');\n}\nfunction draw() {\n background(100);\n ambientLight(255); // white light\n ambientMaterial(255, 127, 80); // coral material\n sphere(40);\n}\n\n
            ", - "\n
            \n\nfunction setup() {\n createCanvas(100,100,WEBGL);\n camera(0,-100,300);\n}\nfunction draw() {\n background(230);\n ambientMaterial(237,34,93); //Pink Material\n ambientLight(mouseY);\n //As you move the mouse up to down it changes from no ambient light to full ambient light.\n rotateY(millis()/2000);\n box(100);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to turn on the light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Use a grayscale value of 80.\n ambientLight(80);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the ambient light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a p5.Color object.\n let c = color('orchid');\n ambientLight(c);\n\n // Draw the sphere.\n sphere();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a CSS color string.\n ambientLight('#DA70D6');\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use RGB values\n ambientLight(218, 112, 214);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            " ], - "alt": "pink ambient material cube under the ambient light", "class": "p5", "module": "3D", "submodule": "Lights", @@ -22306,22 +22150,22 @@ "params": [ { "name": "v1", - "description": "

            red or hue value relative to\n the current color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value\n relative to the current color range

            \n", + "description": "

            green or saturation value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value\n relative to the current color range

            \n", + "description": "

            blue, brightness, or lightness value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "alpha", - "description": "

            alpha value relative to current\n color range (default is 0-255)

            \n", + "description": "

            alpha (transparency) value in the current\n colorMode().

            \n", "type": "Number", "optional": true } @@ -22329,11 +22173,11 @@ "chainable": 1 }, { - "line": 92, + "line": 164, "params": [ { "name": "gray", - "description": "

            number specifying value between\n white and black

            \n", + "description": "

            grayscale value between 0 and 255.

            \n", "type": "Number" }, { @@ -22346,33 +22190,33 @@ "chainable": 1 }, { - "line": 100, + "line": 171, "params": [ { "name": "value", - "description": "

            a color string

            \n", + "description": "

            color as a CSS string.

            \n", "type": "String" } ], "chainable": 1 }, { - "line": 106, + "line": 177, "params": [ { "name": "values", - "description": "

            an array containing the red,green,blue &\n and alpha components of the color

            \n", + "description": "

            color as an array of RGBA, HSBA, or HSLA\n values.

            \n", "type": "Number[]" } ], "chainable": 1 }, { - "line": 113, + "line": 184, "params": [ { "name": "color", - "description": "

            color as a p5.Color

            \n", + "description": "

            color as a p5.Color object.

            \n", "type": "p5.Color" } ], @@ -22382,79 +22226,78 @@ }, { "file": "src/webgl/light.js", - "line": 134, - "description": "

            Sets the color of the specular highlight of a non-ambient light\n(i.e. all lights except ambientLight()).

            \n

            specularColor() affects only the lights which are created after\nit in the code.

            \n

            This function is used in combination with\nspecularMaterial().\nIf a geometry does not use specularMaterial(), this function\nwill have no effect.

            \n

            The default color is white (255, 255, 255), which is used if\nspecularColor() is not explicitly called.

            \n

            Note: specularColor is equivalent to the Processing function\nlightSpecular.

            \n", + "line": 205, + "description": "

            Sets the specular color for lights.

            \n

            specularColor() affects lights that bounce off a surface in a preferred\ndirection. These lights include\ndirectionalLight(),\npointLight(), and\nspotLight(). The function helps to create\nhighlights on p5.Geometry objects that are\nstyled with specularMaterial(). If a\ngeometry does not use\nspecularMaterial(), then\nspecularColor() will have no effect.

            \n

            Note: specularColor() doesn’t affect lights that bounce in all\ndirections, including ambientLight() and\nimageLight().

            \n

            There are three ways to call specularColor() with optional parameters to\nset the specular highlight color.

            \n

            The first way to call specularColor() has two optional parameters, gray\nand alpha. Grayscale and alpha values between 0 and 255, as in\nspecularColor(50) or specularColor(50, 80), can be passed to set the\nspecular highlight color.

            \n

            The second way to call specularColor() has one optional parameter,\ncolor. A p5.Color object, an array of color\nvalues, or a CSS color string can be passed to set the specular highlight\ncolor.

            \n

            The third way to call specularColor() has four optional parameters, v1,\nv2, v3, and alpha. RGBA, HSBA, or HSLA values, as in\nspecularColor(255, 0, 0, 80), can be passed to set the specular highlight\ncolor. Color values will be interpreted using the current\ncolorMode().

            \n", "itemtype": "method", "name": "specularColor", "chainable": 1, "example": [ - "\n
            \n\nlet setRedSpecularColor = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe(\n 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'\n );\n}\n\nfunction draw() {\n background(0);\n\n ambientLight(60);\n\n // add a point light to showcase specular color\n // -- use mouse location to position the light\n let lightPosX = mouseX - width / 2;\n let lightPosY = mouseY - height / 2;\n // -- set the light's specular color\n if (setRedSpecularColor) {\n specularColor(255, 0, 0); // red specular highlight\n }\n // -- create the light\n pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light\n\n // use specular material with high shininess\n specularMaterial(150);\n shininess(50);\n\n sphere(30, 64, 64);\n}\n\nfunction mouseClicked() {\n setRedSpecularColor = !setRedSpecularColor;\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // No specular color.\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to add a point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the sphere.\n noStroke();\n specularColor(100);\n specularMaterial(255, 255, 255);\n\n // Control the light.\n if (isLit === true) {\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a p5.Color object.\n let c = color('dodgerblue');\n specularColor(c);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a CSS color string.\n specularColor('#1E90FF');\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use RGB values.\n specularColor(30, 144, 255);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            " ], - "alt": "Sphere with specular highlight. Clicking the mouse toggles the\nspecular highlight color between red and the default white.", "class": "p5", "module": "3D", "submodule": "Lights", "overloads": [ { - "line": 134, + "line": 205, "params": [ { "name": "v1", - "description": "

            red or hue value relative to\n the current color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value\n relative to the current color range

            \n", + "description": "

            green or saturation value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value\n relative to the current color range

            \n", + "description": "

            blue, brightness, or lightness value in the current\n colorMode().

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 207, + "line": 423, "params": [ { "name": "gray", - "description": "

            number specifying value between\n white and black

            \n", + "description": "

            grayscale value between 0 and 255.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 214, + "line": 429, "params": [ { "name": "value", - "description": "

            color as a CSS string

            \n", + "description": "

            color as a CSS string.

            \n", "type": "String" } ], "chainable": 1 }, { - "line": 220, + "line": 435, "params": [ { "name": "values", - "description": "

            color as an array containing the\n red, green, and blue components

            \n", + "description": "

            color as an array of RGBA, HSBA, or HSLA\n values.

            \n", "type": "Number[]" } ], "chainable": 1 }, { - "line": 227, + "line": 442, "params": [ { "name": "color", - "description": "

            color as a p5.Color

            \n", + "description": "

            color as a p5.Color object.

            \n", "type": "p5.Color" } ], @@ -22464,57 +22307,56 @@ }, { "file": "src/webgl/light.js", - "line": 246, - "description": "

            Creates a directional light with the given color and direction.

            \n

            Directional light comes from one direction.\nThe direction is specified as numbers inclusively between -1 and 1.\nFor example, setting the direction as (0, -1, 0) will cause the\ngeometry to be lit from below (since the light will be facing\ndirectly upwards). Similarly, setting the direction as (1, 0, 0)\nwill cause the geometry to be lit from the left (since the light\nwill be facing directly rightwards).

            \n

            Directional lights do not have a specific point of origin, and\ntherefore cannot be positioned closer or farther away from a geometry.

            \n

            A maximum of 5 directional lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n", + "line": 461, + "description": "

            Creates a light that shines in one direction.

            \n

            Directional lights don’t shine from a specific point. They’re like a sun\nthat shines from somewhere offscreen. The light’s direction is set using\nthree (x, y, z) values between -1 and 1. For example, setting a light’s\ndirection as (1, 0, 0) will light p5.Geometry\nobjects from the left since the light faces directly to the right.

            \n

            There are four ways to call directionalLight() with parameters to set the\nlight’s color and direction.

            \n

            The first way to call directionalLight() has six parameters. The first\nthree parameters, v1, v2, and v3, set the light’s color using the\ncurrent colorMode(). The last three\nparameters, x, y, and z, set the light’s direction. For example,\ndirectionalLight(255, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light\nthat shines to the right (1, 0, 0).

            \n

            The second way to call directionalLight() has four parameters. The first\nthree parameters, v1, v2, and v3, set the light’s color using the\ncurrent colorMode(). The last parameter,\ndirection sets the light’s direction using a\np5.Geometry object. For example,\ndirectionalLight(255, 0, 0, lightDir) creates a red (255, 0, 0) light\nthat shines in the direction the lightDir vector points.

            \n

            The third way to call directionalLight() has four parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nlast three parameters, x, y, and z, set the light’s direction. For\nexample, directionalLight(myColor, 1, 0, 0) creates a light that shines\nto the right (1, 0, 0) with the color value of myColor.

            \n

            The fourth way to call directionalLight() has two parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nsecond parameter, direction, sets the light’s direction using a\np5.Color object. For example,\ndirectionalLight(myColor, lightDir) creates a light that shines in the\ndirection the lightDir vector points with the color value of myColor.

            \n", "itemtype": "method", "name": "directionalLight", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n //move your mouse to change light direction\n let dirX = (mouseX / width - 0.5) * 2;\n let dirY = (mouseY / height - 0.5) * 2;\n directionalLight(250, 250, 250, -dirX, -dirY, -1);\n noStroke();\n sphere(40);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the directional light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red directional light from above.\n // Use RGB values and XYZ directions.\n directionalLight(255, 0, 0, 0, 1, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n directionalLight(c, 0, 1, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightDir = createVector(0, 1, 0);\n directionalLight(c, lightDir);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            " ], - "alt": "scene with sphere and directional light. The direction of\nthe light is controlled with the mouse position.", "class": "p5", "module": "3D", "submodule": "Lights", "overloads": [ { - "line": 246, + "line": 461, "params": [ { "name": "v1", - "description": "

            red or hue value relative to the current\n color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value relative to the\n current color range

            \n", + "description": "

            green or saturation value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value relative to the\n current color range

            \n", + "description": "

            blue, brightness, or lightness value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "x", - "description": "

            x component of direction (inclusive range of -1 to 1)

            \n", + "description": "

            x-component of the light's direction between -1 and 1.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y component of direction (inclusive range of -1 to 1)

            \n", + "description": "

            y-component of the light's direction between -1 and 1.

            \n", "type": "Number" }, { "name": "z", - "description": "

            z component of direction (inclusive range of -1 to 1)

            \n", + "description": "

            z-component of the light's direction between -1 and 1.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 304, + "line": 613, "params": [ { "name": "v1", @@ -22533,18 +22375,18 @@ }, { "name": "direction", - "description": "

            direction of light as a\n p5.Vector

            \n", + "description": "

            direction of the light as a\n p5.Vector object.

            \n", "type": "p5.Vector" } ], "chainable": 1 }, { - "line": 314, + "line": 623, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or as a CSS string.

            \n", "type": "p5.Color|Number[]|String" }, { @@ -22566,7 +22408,7 @@ "chainable": 1 }, { - "line": 324, + "line": 633, "params": [ { "name": "color", @@ -22585,57 +22427,56 @@ }, { "file": "src/webgl/light.js", - "line": 373, - "description": "

            Creates a point light with the given color and position.

            \n

            A point light emits light from a single point in all directions.\nBecause the light is emitted from a specific point (position),\nit has a different effect when it is positioned farther vs. nearer\nan object.

            \n

            A maximum of 5 point lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n", + "line": 682, + "description": "

            Creates a light that shines from a point in all directions.

            \n

            Point lights are like light bulbs that shine in all directions. They can be\nplaced at different positions to achieve different lighting effects. A\nmaximum of 5 point lights can be active at once.

            \n

            There are four ways to call pointLight() with parameters to set the\nlight’s color and position.

            \n

            The first way to call pointLight() has six parameters. The first three\nparameters, v1, v2, and v3, set the light’s color using the current\ncolorMode(). The last three parameters, x,\ny, and z, set the light’s position. For example,\npointLight(255, 0, 0, 50, 0, 0) creates a red (255, 0, 0) light that\nshines from the coordinates (50, 0, 0).

            \n

            The second way to call pointLight() has four parameters. The first three\nparameters, v1, v2, and v3, set the light’s color using the current\ncolorMode(). The last parameter, position sets\nthe light’s position using a p5.Vector object.\nFor example, pointLight(255, 0, 0, lightPos) creates a red (255, 0, 0)\nlight that shines from the position set by the lightPos vector.

            \n

            The third way to call pointLight() has four parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nlast three parameters, x, y, and z, set the light’s position. For\nexample, directionalLight(myColor, 50, 0, 0) creates a light that shines\nfrom the coordinates (50, 0, 0) with the color value of myColor.

            \n

            The fourth way to call pointLight() has two parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nsecond parameter, position, sets the light’s position using a\np5.Vector object. For example,\ndirectionalLight(myColor, lightPos) creates a light that shines from the\nposition set by the lightPos vector with the color value of myColor.

            \n", "itemtype": "method", "name": "pointLight", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and point light. The position of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n // move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 ----------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2 ----------- width/2,height/2\n pointLight(250, 250, 250, locX, locY, 50);\n noStroke();\n sphere(40);\n}\n\n
            " + "\n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red point light from above.\n // Use RGB values and XYZ coordinates.\n pointLight(255, 0, 0, 0, -150, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n pointLight(c, 0, -150, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, -150, 0);\n pointLight(c, lightPos);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light that points to the center of the scene.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, 0, 65);\n pointLight(c, lightPos);\n\n // Style the spheres.\n noStroke();\n\n // Draw a sphere up and to the left.\n push();\n translate(-25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a box up and to the right.\n push();\n translate(25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a sphere down and to the left.\n push();\n translate(-25, 25, 25);\n sphere(10);\n pop();\n\n // Draw a box down and to the right.\n push();\n translate(25, 25, 25);\n sphere(10);\n pop();\n}\n\n
            " ], - "alt": "scene with sphere and point light. The position of\nthe light is controlled with the mouse position.", "class": "p5", "module": "3D", "submodule": "Lights", "overloads": [ { - "line": 373, + "line": 682, "params": [ { "name": "v1", - "description": "

            red or hue value relative to the current\n color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value relative to the\n current color range

            \n", + "description": "

            green or saturation value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value relative to the\n current color range

            \n", + "description": "

            blue, brightness, or lightness value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "x", - "description": "

            x component of position

            \n", + "description": "

            x-coordinate of the light.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y component of position

            \n", + "description": "

            y-coordinate of the light.

            \n", "type": "Number" }, { "name": "z", - "description": "

            z component of position

            \n", + "description": "

            z-coordinate of the light.

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 432, + "line": 889, "params": [ { "name": "v1", @@ -22654,18 +22495,18 @@ }, { "name": "position", - "description": "

            of light as a p5.Vector

            \n", + "description": "

            position of the light as a\n p5.Vector object.

            \n", "type": "p5.Vector" } ], "chainable": 1 }, { - "line": 441, + "line": 899, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n", "type": "p5.Color|Number[]|String" }, { @@ -22687,7 +22528,7 @@ "chainable": 1 }, { - "line": 451, + "line": 909, "params": [ { "name": "color", @@ -22706,166 +22547,160 @@ }, { "file": "src/webgl/light.js", - "line": 497, - "description": "

            Creates an image light with the given image.

            \n

            The image light simulates light from all the directions.\nThis is done by using the image as a texture for an infinitely\nlarge sphere light. This sphere contains\nor encapsulates the whole scene/drawing.\nIt will have different effect for varying shininess of the\nobject in the drawing.\nUnder the hood it is mainly doing 2 types of calculations,\nthe first one is creating an irradiance map the\nenvironment map of the input image.\nThe second one is managing reflections based on the shininess\nor roughness of the material used in the scene.

            \n

            Note: The image's diffuse light will be affected by fill()\nand the specular reflections will be affected by specularMaterial()\nand shininess().

            \n", + "line": 955, + "description": "

            Creates an ambient light from an image.

            \n

            imageLight() simulates a light shining from all directions. The effect is\nlike placing the sketch at the center of a giant sphere that uses the image\nas its texture. The image's diffuse light will be affected by\nfill() and the specular reflections will be\naffected by specularMaterial() and\nshininess().

            \n

            The parameter, img, is the p5.Image object to\nuse as the light source.

            \n", "itemtype": "method", "name": "imageLight", "params": [ { "name": "img", - "description": "

            image for the background

            \n", + "description": "

            image to use as the light source.

            \n", "type": "p5.image" } ], "example": [ - "\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/outdoor_image.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);\n perspective(PI/3, 1, 5, 500);\n}\nfunction draw() {\n background(220);\n\n push();\n camera(0, 0, 1, 0, 0, 0, 0, 1, 0);\n ortho(-1, 1, -1, 1, 0, 1);\n noLights();\n noStroke();\n texture(img);\n plane(2);\n pop();\n\n ambientLight(50);\n imageLight(img);\n specularMaterial(20);\n noStroke();\n rotateX(frameCount * 0.005);\n rotateY(frameCount * 0.005);\n box(50);\n}\n\n
            ", - "\n
            \n\nlet img;\nlet slider;\n\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 400, 100, 1);\n slider.position(0, height);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);\n perspective(PI/3, 1, 5, 500);\n}\nfunction draw() {\n background(220);\n\n push();\n camera(0, 0, 1, 0, 0, 0, 0, 1, 0);\n ortho(-1, 1, -1, 1, 0, 1);\n noLights();\n noStroke();\n texture(img);\n plane(2);\n pop();\n\n ambientLight(50);\n imageLight(img);\n specularMaterial(20);\n shininess(slider.value());\n noStroke();\n sphere(30);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');\n}\n\nfunction draw() {\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the image as a panorama (360˚ background).\n panorama(img);\n\n // Add a soft ambient light.\n ambientLight(50);\n\n // Add light from the image.\n imageLight(img);\n\n // Style the sphere.\n specularMaterial(20);\n shininess(100);\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            " ], - "alt": "light with slider having a slider for varying roughness", "class": "p5", "module": "3D", "submodule": "Lights" }, { "file": "src/webgl/light.js", - "line": 602, - "description": "

            The panorama(img) method transforms images containing\n360-degree content, such as maps or HDRIs, into immersive\n3D backgrounds that surround your scene. This is similar to calling\nbackground(color); call panorama(img) before drawing your\nscene to create a 360-degree background from your image. It\noperates on the concept of sphere mapping, where the image is\nmapped onto an infinitely large sphere based on the angles of the\ncamera.

            \n

            To enable 360-degree viewing, either use orbitControl() or try changing\nthe orientation of the camera to see different parts of the background.

            \n", + "line": 1020, + "description": "

            Creates an immersive 3D background.

            \n

            panorama() transforms images containing 360˚ content, such as maps or\nHDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the\nspace requires changing the camera's perspective with functions such as\norbitControl() or\ncamera().

            \n", "itemtype": "method", "name": "panorama", "params": [ { "name": "img", - "description": "

            A 360-degree image to use as a background panorama

            \n", + "description": "

            360˚ image to use as the background.

            \n", "type": "p5.Image" } ], "example": [ - "\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n}\nfunction draw() {\n panorama(img);\n imageMode(CENTER);\n orbitControl();\n noStroke();\n push();\n imageLight(img);\n specularMaterial('green');\n shininess(200);\n metalness(100);\n sphere(25);\n pop();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the sphere.\n noStroke();\n specularMaterial(50);\n shininess(200);\n metalness(100);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            " ], - "alt": "The image transformed into a panoramic scene.", "class": "p5", "module": "3D", "submodule": "Lights" }, { "file": "src/webgl/light.js", - "line": 649, + "line": 1076, "description": "

            Places an ambient and directional light in the scene.\nThe lights are set to ambientLight(128, 128, 128) and\ndirectionalLight(128, 128, 128, 0, 0, -1).

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n", "itemtype": "method", "name": "lights", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('the light is partially ambient and partially directional');\n}\nfunction draw() {\n background(0);\n lights();\n rotateX(millis() / 1000);\n rotateY(millis() / 1000);\n rotateZ(millis() / 1000);\n box();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the lights.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the lights.\n if (isLit === true) {\n lights();\n }\n\n // Draw the box.\n box();\n}\n\n// Turn on the lights when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n ambientLight(128, 128, 128);\n directionalLight(128, 128, 128, 0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "the light is partially ambient and partially directional", "class": "p5", "module": "3D", "submodule": "Lights" }, { "file": "src/webgl/light.js", - "line": 693, - "description": "

            Sets the falloff rate for pointLight()\nand spotLight().

            \n

            lightFalloff() affects only the lights which are created after it\nin the code.

            \n

            The constant, linear, an quadratic parameters are used to calculate falloff as follows:

            \n

            d = distance from light position to vertex position

            \n

            falloff = 1 / (CONSTANT + d * LINEAR + (d * d) * QUADRATIC)

            \n", + "line": 1160, + "description": "

            Sets the falloff rate for pointLight()\nand spotLight().

            \n

            A light’s falloff describes the intensity of its beam at a distance. For\nexample, a lantern has a slow falloff, a flashlight has a medium falloff,\nand a laser pointer has a sharp falloff.

            \n

            lightFalloff() has three parameters, constant, linear, and\nquadratic. They’re numbers used to calculate falloff at a distance, d,\nas follows:

            \n

            falloff = 1 / (constant + d * linear + (d * d) * quadratic)

            \n

            Note: constant, linear, and quadratic should always be set to values\ngreater than 0.

            \n", "itemtype": "method", "name": "lightFalloff", "params": [ { "name": "constant", - "description": "

            CONSTANT value for determining falloff

            \n", + "description": "

            constant value for calculating falloff.

            \n", "type": "Number" }, { "name": "linear", - "description": "

            LINEAR value for determining falloff

            \n", + "description": "

            linear value for calculating falloff.

            \n", "type": "Number" }, { "name": "quadratic", - "description": "

            QUADRATIC value for determining falloff

            \n", + "description": "

            quadratic value for calculating falloff.

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe(\n 'Two spheres with different falloff values show different intensity of light'\n );\n}\nfunction draw() {\n background(125);\n\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n locX /= 2; // half scale\n\n lightFalloff(1, 0, 0);\n push();\n translate(-25, 0, 0);\n pointLight(250, 250, 250, locX - 25, locY, 50);\n sphere(20);\n pop();\n\n lightFalloff(0.97, 0.03, 0);\n push();\n translate(25, 0, 0);\n pointLight(250, 250, 250, locX + 25, locY, 50);\n sphere(20);\n pop();\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to change the falloff rate.\n\nlet useFalloff = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Set the light falloff.\n if (useFalloff === true) {\n lightFalloff(2, 0, 0);\n }\n\n // Add a white point light from the front.\n pointLight(255, 255, 255, 0, 0, 100);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Change the falloff value when the user double-clicks.\nfunction doubleClicked() {\n useFalloff = true;\n}\n\n
            " ], - "alt": "Two spheres with different falloff values show different intensity of light", "class": "p5", "module": "3D", "submodule": "Lights" }, { "file": "src/webgl/light.js", - "line": 794, - "description": "

            Creates a spot light with the given color, position,\nlight direction, angle, and concentration.

            \n

            Like a pointLight(), a spotLight()\nemits light from a specific point (position). It has a different effect\nwhen it is positioned farther vs. nearer an object.

            \n

            However, unlike a pointLight(), the light is emitted in one direction\nalong a conical shape. The shape of the cone can be controlled using\nthe angle and concentration parameters.

            \n

            The angle parameter is used to\ndetermine the radius of the cone. And the concentration\nparameter is used to focus the light towards the center of\nthe cone. Both parameters are optional, however if you want\nto specify concentration, you must also specify angle.\nThe minimum concentration value is 1.

            \n

            A maximum of 5 spot lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n", + "line": 1271, + "description": "

            Creates a light that shines from a point in one direction.

            \n

            Spot lights are like flashlights that shine in one direction creating a\ncone of light. The shape of the cone can be controlled using the angle and\nconcentration parameters. A maximum of 5 spot lights can be active at once.

            \n

            There are eight ways to call spotLight() with parameters to set the\nlight’s color, position, direction. For example,\nspotLight(255, 0, 0, 0, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light\nat the origin (0, 0, 0) that points to the right (1, 0, 0).

            \n

            The angle parameter is optional. It sets the radius of the light cone.\nFor example, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16) creates a\nred (255, 0, 0) light at the origin (0, 0, 0) that points to the right\n(1, 0, 0) with an angle of PI / 16 radians. By default, angle is\nPI / 3 radians.

            \n

            The concentration parameter is also optional. It focuses the light\ntowards the center of the light cone. For example,\nspotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50) creates a red\n(255, 0, 0) light at the origin (0, 0, 0) that points to the right\n(1, 0, 0) with an angle of PI / 16 radians at concentration of 50. By\ndefault, concentration is 100.

            \n", "itemtype": "method", "name": "spotLight", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and spot light. The position of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n // move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 ----------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2 ----------- width/2,height/2\n ambientLight(50);\n spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);\n noStroke();\n sphere(40);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 32 radians.\n spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 3 radians (default).\n // Set its concentration to 1000.\n let c = color(255, 0, 0);\n let position = createVector(0, 0, 100);\n let direction = createVector(0, 0, -1);\n spotLight(c, position, direction, PI / 3, 1000);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            " ], - "alt": "scene with sphere and spot light. The position of\nthe light is controlled with the mouse position.", "class": "p5", "module": "3D", "submodule": "Lights", "overloads": [ { - "line": 794, + "line": 1271, "params": [ { "name": "v1", - "description": "

            red or hue value relative to the current color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value relative to the current color range

            \n", + "description": "

            green or saturation value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value relative to the current color range

            \n", + "description": "

            blue, brightness, or lightness value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "x", - "description": "

            x component of position

            \n", + "description": "

            x-coordinate of the light.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y component of position

            \n", + "description": "

            y-coordinate of the light.

            \n", "type": "Number" }, { "name": "z", - "description": "

            z component of position

            \n", + "description": "

            z-coordinate of the light.

            \n", "type": "Number" }, { "name": "rx", - "description": "

            x component of light direction (inclusive range of -1 to 1)

            \n", + "description": "

            x-component of light direction between -1 and 1.

            \n", "type": "Number" }, { "name": "ry", - "description": "

            y component of light direction (inclusive range of -1 to 1)

            \n", + "description": "

            y-component of light direction between -1 and 1.

            \n", "type": "Number" }, { "name": "rz", - "description": "

            z component of light direction (inclusive range of -1 to 1)

            \n", + "description": "

            z-component of light direction between -1 and 1.

            \n", "type": "Number" }, { "name": "angle", - "description": "

            angle of cone. Defaults to PI/3

            \n", + "description": "

            angle of the light cone. Defaults to PI / 3.

            \n", "type": "Number", "optional": true }, { "name": "concentration", - "description": "

            concentration of cone. Defaults to 100

            \n", + "description": "

            concentration of the light. Defaults to 100.

            \n", "type": "Number", "optional": true } @@ -22873,21 +22708,21 @@ "chainable": 1 }, { - "line": 867, + "line": 1398, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n", "type": "p5.Color|Number[]|String" }, { "name": "position", - "description": "

            position of light as a p5.Vector

            \n", + "description": "

            position of the light as a p5.Vector object.

            \n", "type": "p5.Vector" }, { "name": "direction", - "description": "

            direction of light as a p5.Vector

            \n", + "description": "

            direction of light as a p5.Vector object.

            \n", "type": "p5.Vector" }, { @@ -22905,7 +22740,7 @@ ] }, { - "line": 876, + "line": 1407, "params": [ { "name": "v1", @@ -22947,7 +22782,7 @@ ] }, { - "line": 886, + "line": 1417, "params": [ { "name": "color", @@ -22989,7 +22824,7 @@ ] }, { - "line": 896, + "line": 1427, "params": [ { "name": "color", @@ -23031,7 +22866,7 @@ ] }, { - "line": 906, + "line": 1437, "params": [ { "name": "v1", @@ -23083,7 +22918,7 @@ ] }, { - "line": 918, + "line": 1449, "params": [ { "name": "v1", @@ -23135,7 +22970,7 @@ ] }, { - "line": 930, + "line": 1461, "params": [ { "name": "color", @@ -23190,15 +23025,14 @@ }, { "file": "src/webgl/light.js", - "line": 1155, - "description": "

            Removes all lights present in a sketch.

            \n

            All subsequent geometry is rendered without lighting (until a new\nlight is created with a call to one of the lighting functions\n(lights(),\nambientLight(),\ndirectionalLight(),\npointLight(),\nspotLight()).

            \n", + "line": 1686, + "description": "

            Removes all lights from the sketch.

            \n

            Calling noLights() removes any lights created with\nlights(),\nambientLight(),\ndirectionalLight(),\npointLight(), or\nspotLight(). These functions may be called\nafter noLights() to create a new lighting scheme.

            \n", "itemtype": "method", "name": "noLights", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'Three white spheres. Each appears as a different color due to lighting.'\n );\n}\nfunction draw() {\n background(200);\n noStroke();\n\n ambientLight(255, 0, 0);\n translate(-30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n\n noLights();\n translate(30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n\n ambientLight(0, 255, 0);\n translate(30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the top sphere.\n push();\n translate(0, -25, 0);\n sphere(20);\n pop();\n\n // Turn off the lights.\n noLights();\n\n // Add a red directional light that points into the screen.\n directionalLight(255, 0, 0, 0, 0, -1);\n\n // Draw the bottom sphere.\n push();\n translate(0, 25, 0);\n sphere(20);\n pop();\n}\n\n
            " ], - "alt": "Three white spheres. Each appears as a different\ncolor due to lighting.", "class": "p5", "module": "3D", "submodule": "Lights" @@ -23206,7 +23040,7 @@ { "file": "src/webgl/loading.js", "line": 12, - "description": "

            Load a 3d model from an OBJ or STL file.

            \n

            loadModel() should be placed inside of preload().\nThis allows the model to load fully before the rest of your code is run.

            \n

            One of the limitations of the OBJ and STL format is that it doesn't have a built-in\nsense of scale. This means that models exported from different programs might\nbe very different sizes. If your model isn't displaying, try calling\nloadModel() with the normalized parameter set to true. This will resize the\nmodel to a scale appropriate for p5. You can also make additional changes to\nthe final size of your model with the scale() function.

            \n

            Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.

            \n

            Options can include:

            \n
              \n
            • path: Specifies the location or path of the 3D model file for loading.
              • \n
            • normalize: Enables standardized size scaling during loading if set to true.
              • \n
            • successCallback: Callback for post-loading actions with the 3D model object.
              • \n
            • failureCallback: Handles errors if model loading fails, receiving an event error.
              • \n
            • fileType: Defines the file extension of the model.
              • \n
            • flipU: Flips the U texture coordinates of the model.
              • \n
            • flipV: Flips the V texture coordinates of the model.
              • \n
            \n", + "description": "

            Loads a 3D model to create a\np5.Geometry object.

            \n

            loadModel() can load 3D models from OBJ and STL files. Once the model is\nloaded, it can be displayed with the\nmodel() function, as in model(shape).

            \n

            There are three ways to call loadModel() with optional parameters to help\nprocess the model.

            \n

            The first parameter, path, is always a String with the path to the\nfile. Paths to local files should be relative, as in\nloadModel('assets/model.obj'). URLs such as 'https://example.com/model.obj'` may be blocked due to browser security.

            \n

            The first way to call loadModel() has three optional parameters after the\nfile path. The first optional parameter, successCallback, is a function\nto call once the model loads. For example,\nloadModel('assets/model.obj', handleModel) will call the handleModel()\nfunction once the model loads. The second optional parameter,\nfailureCallback, is a function to call if the model fails to load. For\nexample, loadModel('assets/model.obj', handleModel, handleFailure) will\ncall the handleFailure() function if an error occurs while loading. The\nthird optional parameter, fileType, is the model’s file extension as a\nstring. For example,\nloadModel('assets/model', handleModel, handleFailure, '.obj') will try to\nload the file model as a .obj file.

            \n

            The second way to call loadModel() has four optional parameters after the\nfile path. The first optional parameter is a Boolean value. If true is\npassed, as in loadModel('assets/model.obj', true), then the model will be\nresized to ensure it fits the canvas. The next three parameters are\nsuccessCallback, failureCallback, and fileType as described above.

            \n

            The third way to call loadModel() has one optional parameter after the\nfile path. The optional parameter, options, is an Object with options,\nas in loadModel('assets/model.obj', options). The options object can\nhave the following properties:

            \n\nlet options = {\n // Enables standardized size scaling during loading if set to true.\n normalize: true,\n\n

            // Function to call once the model loads.\n successCallback: handleModel,

            \n

            // Function to call if an error occurs while loading.\n failureCallback: handleError,

            \n

            // Model's file extension.\n fileType: '.stl',

            \n

            // Flips the U texture coordinates of the model.\n flipU: false,

            \n

            // Flips the V texture coordinates of the model.\n flipV: false\n};

            \n

            // Pass the options object to loadModel().\nloadModel('assets/model.obj', options);\n

            \n

            Models can take time to load. Calling loadModel() in\npreload() ensures models load before they're\nused in setup() or draw().

            \n

            Note: There’s no support for colored STL files. STL files with color will\nbe rendered without color.

            \n", "itemtype": "method", "name": "loadModel", "return": { @@ -23214,10 +23048,8 @@ "type": "p5.Geometry" }, "example": [ - "\n
            \n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n
            ", - "\n
            \n\n//draw a spinning teapot\nlet teapot;\n\nfunction preload() {\n // Load model with normalise parameter set to true\n teapot = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d teapot with red, green and blue gradient.');\n}\n\nfunction draw() {\n background(200);\n scale(0.4); // Scaled to make model fit into canvas\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial(); // For effect\n model(teapot);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/teapot.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\n// Normalize the geometry's size to fit the canvas.\nfunction preload() {\n shape = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and log the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/wrong.obj', true, handleModel, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel, handleError, '.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\nlet options = {\n normalize: true,\n successCallback: handleModel,\n failureCallback: handleError,\n fileType: '.obj'\n};\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', options);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            " ], - "alt": "Vertically rotating 3-d teapot with red, green and blue gradient.", "class": "p5", "module": "Shape", "submodule": "3D Models", @@ -23227,29 +23059,29 @@ "params": [ { "name": "path", - "description": "

            Path of the model to be loaded

            \n", + "description": "

            path of the model to be loaded.

            \n", "type": "String" }, { "name": "normalize", - "description": "

            If true, scale the model to a\n standardized size when loading

            \n", + "description": "

            if true, scale the model to fit the canvas.

            \n", "type": "Boolean" }, { "name": "successCallback", - "description": "

            Function to be called\n once the model is loaded. Will be passed\n the 3D model object.

            \n", + "description": "

            function to call once the model is loaded. Will be passed\n the p5.Geometry object.

            \n", "type": "function(p5.Geometry)", "optional": true }, { "name": "failureCallback", - "description": "

            called with event error if\n the model fails to load.

            \n", + "description": "

            function to call if the model fails to load. Will be passed an Error event object.

            \n", "type": "Function(Event)", "optional": true }, { "name": "fileType", - "description": "

            The file extension of the model\n (.stl, .obj).

            \n", + "description": "

            model’s file extension. Either '.obj' or '.stl'.

            \n", "type": "String", "optional": true } @@ -23260,7 +23092,7 @@ } }, { - "line": 107, + "line": 318, "params": [ { "name": "path", @@ -23287,12 +23119,12 @@ } ], "return": { - "description": "the p5.Geometry object", + "description": "new p5.Geometry object.", "type": "p5.Geometry" } }, { - "line": 115, + "line": 326, "params": [ { "name": "path", @@ -23301,7 +23133,7 @@ }, { "name": "options", - "description": "", + "description": "

            loading options.

            \n", "type": "Object", "optional": true, "props": [ @@ -23345,7 +23177,7 @@ } ], "return": { - "description": "the p5.Geometry object", + "description": "new p5.Geometry object.", "type": "p5.Geometry" } } @@ -23353,7 +23185,7 @@ }, { "file": "src/webgl/loading.js", - "line": 333, + "line": 544, "description": "

            Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:

            \n

            v -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5

            \n

            f 4 3 2 1

            \n", "class": "p5", "module": "Shape", @@ -23361,7 +23193,7 @@ }, { "file": "src/webgl/loading.js", - "line": 477, + "line": 688, "description": "

            STL files can be of two types, ASCII and Binary,

            \n

            We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.

            \n", "class": "p5", "module": "Shape", @@ -23369,7 +23201,7 @@ }, { "file": "src/webgl/loading.js", - "line": 504, + "line": 715, "description": "

            This function checks if the file is in ASCII format or in Binary format

            \n

            It is done by searching keyword solid at the start of the file.

            \n

            An ASCII STL data must begin with solid as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the d are known to be\nplentiful. So, check the first 5 bytes for solid.

            \n

            Several encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for solid to start anywhere after those prefixes.

            \n", "class": "p5", "module": "Shape", @@ -23377,7 +23209,7 @@ }, { "file": "src/webgl/loading.js", - "line": 531, + "line": 742, "description": "

            This function matches the query at the provided offset

            \n", "class": "p5", "module": "Shape", @@ -23385,7 +23217,7 @@ }, { "file": "src/webgl/loading.js", - "line": 543, + "line": 754, "description": "

            This function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL

            \n

            Currently there is no support for the colors provided in STL files.

            \n", "class": "p5", "module": "Shape", @@ -23393,7 +23225,7 @@ }, { "file": "src/webgl/loading.js", - "line": 631, + "line": 842, "description": "

            ASCII STL file starts with solid 'nameOfFile'\nThen contain the normal of the face, starting with facet normal\nNext contain a keyword indicating the start of face vertex, outer loop\nNext comes the three vertex, starting with vertex x y z\nVertices ends with endloop\nFace ends with endfacet\nNext face starts with facet normal\nThe end of the file is indicated by endsolid

            \n", "class": "p5", "module": "Shape", @@ -23401,21 +23233,20 @@ }, { "file": "src/webgl/loading.js", - "line": 775, - "description": "

            Render a 3d model to the screen.

            \n", + "line": 986, + "description": "

            Draws a p5.Geometry object to the canvas.

            \n

            The parameter, model, is the\np5.Geometry object to draw.\np5.Geometry objects can be built with\nbuildGeometry(), or\nbeginGeometry() and\nendGeometry(). They can also be loaded from\na file with loadGeometry().

            \n

            Note: model() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "model", "params": [ { "name": "model", - "description": "

            Loaded 3d model to be rendered

            \n", + "description": "

            3D shape to be drawn.

            \n", "type": "p5.Geometry" } ], "example": [ - "\n
            \n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white octahedron drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            " ], - "alt": "Vertically rotating 3-d octahedron.", "class": "p5", "module": "Shape", "submodule": "3D Models" @@ -23423,90 +23254,88 @@ { "file": "src/webgl/material.js", "line": 12, - "description": "

            Creates a new p5.Shader object\nfrom the provided vertex and fragment shader files.

            \n

            The shader files are loaded asynchronously in the\nbackground, so this method should be used in preload().

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.

            \n

            Note, shaders can only be used in WEBGL mode.

            \n", + "description": "

            Loads vertex and fragment shaders to create a\np5.Shader object.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.

            \n

            Once the p5.Shader object is created, it can be\nused with the shader() function, as in\nshader(myShader). A shader program consists of two files, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.

            \n

            loadShader() loads the vertex and fragment shaders from their .vert and\n.frag files. For example, calling\nloadShader('assets/shader.vert', 'assets/shader.frag') loads both\nrequired shaders and returns a p5.Shader object.

            \n

            The third parameter, successCallback, is optional. If a function is\npassed, it will be called once the shader has loaded. The callback function\ncan use the new p5.Shader object as its\nparameter.

            \n

            The fourth parameter, failureCallback, is also optional. If a function is\npassed, it will be called if the shader fails to load. The callback\nfunction can use the event error as its parameter.

            \n

            Shaders can take time to load. Calling loadShader() in\npreload() ensures shaders load before they're\nused in setup() or draw().

            \n

            Note: Shaders can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "loadShader", "params": [ { "name": "vertFilename", - "description": "

            path to file containing vertex shader\nsource code

            \n", + "description": "

            path of the vertex shader to be loaded.

            \n", "type": "String" }, { "name": "fragFilename", - "description": "

            path to file containing fragment shader\nsource code

            \n", + "description": "

            path of the fragment shader to be loaded.

            \n", "type": "String" }, { - "name": "callback", - "description": "

            callback to be executed after loadShader\ncompletes. On success, the p5.Shader object is passed as the first argument.

            \n", + "name": "successCallback", + "description": "

            function to call once the shader is loaded. Can be passed the\n p5.Shader object.

            \n", "type": "Function", "optional": true }, { - "name": "errorCallback", - "description": "

            callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.

            \n", + "name": "failureCallback", + "description": "

            function to call if the shader fails to load. Can be passed an\n Error event object.

            \n", "type": "Function", "optional": true } ], "return": { - "description": "a shader object created from the provided\nvertex and fragment shader files.", + "description": "new shader created from the vertex and fragment shader files.", "type": "p5.Shader" }, "example": [ - "\n
            \n\nlet mandel;\nfunction preload() {\n // load the shader definitions from files\n mandel = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // use the shader\n shader(mandel);\n noStroke();\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');\n}\n\nfunction draw() {\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            " + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to the value 1.5.\n mandelbrot.setUniform('r', 1.5);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n\n describe('A black fractal image on a magenta background.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            " ], - "alt": "zooming Mandelbrot set. a colorful, infinitely detailed fractal.", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 115, - "description": "

            Creates a new p5.Shader object\nfrom the provided vertex and fragment shader code.

            \n

            Note, shaders can only be used in WEBGL mode.

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader shown in the example below.

            \n", + "line": 173, + "description": "

            Creates a new p5.Shader object.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.

            \n

            Once the p5.Shader object is created, it can be\nused with the shader() function, as in\nshader(myShader). A shader program consists of two parts, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.

            \n

            The first parameter, vertSrc, sets the vertex shader. It’s a string that\ncontains the vertex shader program written in GLSL.

            \n

            The second parameter, fragSrc, sets the fragment shader. It’s a string\nthat contains the fragment shader program written in GLSL.

            \n

            Note: Only filter shaders can be used in 2D mode. All shaders can be used\nin WebGL mode.

            \n", "itemtype": "method", "name": "createShader", "params": [ { "name": "vertSrc", - "description": "

            source code for the vertex shader

            \n", + "description": "

            source code for the vertex shader.

            \n", "type": "String" }, { "name": "fragSrc", - "description": "

            source code for the fragment shader

            \n", + "description": "

            source code for the fragment shader.

            \n", "type": "String" } ], "return": { - "description": "a shader object created from the provided\nvertex and fragment shaders.", + "description": "new shader object created from the\nvertex and fragment shaders.", "type": "p5.Shader" }, "example": [ - "\n
            \n\n\n// the vertex shader is called for each vertex\nlet vs = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n`;\n\n\n// the fragment shader is called for each pixel\nlet fs = `\n precision highp float;\n uniform vec2 p;\n uniform float r;\n const int I = 500;\n varying vec2 vTexCoord;\n void main() {\n vec2 c = p + gl_FragCoord.xy * r, z = c;\n float n = 0.0;\n for (int i = I; i > 0; i --) {\n if(z.x*z.x+z.y*z.y > 4.0) {\n n = float(i)/float(I);\n break;\n }\n z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;\n }\n gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);\n }`;\n\nlet mandel;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // create and initialize the shader\n mandel = createShader(vs, fs);\n shader(mandel);\n noStroke();\n\n // 'p' is the center point of the Mandelbrot image\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');\n}\n\nfunction draw() {\n // 'r' is the size of the image in Mandelbrot-space\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n plane(width, height);\n}\n\n
            " + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to 0.005.\n // r is the size of the image in Mandelbrot-space.\n mandelbrot.setUniform('r', 0.005);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A black fractal image on a magenta background.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            " ], - "alt": "zooming Mandelbrot set. a colorful, infinitely detailed fractal.", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 202, - "description": "

            Creates a new p5.Shader using only a fragment shader, as a convenience method for creating image effects.\nIt's like createShader() but with a default vertex shader included.

            \n

            createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas.\nA filter shader will not be applied to any geometries.

            \n

            The fragment shader receives some uniforms:

            \n
              \n
            • sampler2D tex0, which contains the canvas contents as a texture
              • \n
            • vec2 canvasSize, which is the p5 width and height of the canvas (not including pixel density)
              • \n
            • vec2 texelSize, which is the size of a physical pixel including pixel density (1.0/(width*density), 1.0/(height*density))
              • \n
            \n

            For more info about filters and shaders, see Adam Ferriss' repo of shader examples\nor the introduction to shaders page.

            \n", + "line": 429, + "description": "

            Creates a p5.Shader object to be used with the\nfilter() function.

            \n

            createFilterShader() works like\ncreateShader() but has a default vertex\nshader included. createFilterShader() is intended to be used along with\nfilter() for filtering the contents of a canvas.\nA filter shader will be applied to the whole canvas instead of just\np5.Geometry objects.

            \n

            The parameter, fragSrc, sets the fragment shader. It’s a string that\ncontains the fragment shader program written in\nGLSL.

            \n

            The p5.Shader object that's created has some\nuniforms that can be set:

            \n
              \n
            • sampler2D tex0, which contains the canvas contents as a texture.
              • \n
            • vec2 canvasSize, which is the width and height of the canvas, not including pixel density.
              • \n
            • vec2 texelSize, which is the size of a physical pixel including pixel density. This is calculated as 1.0 / (width * density) for the pixel width and 1.0 / (height * density) for the pixel height.
              • \n
            \n

            The p5.Shader that's created also provides\nvarying vec2 vTexCoord, a coordinate with values between 0 and 1.\nvTexCoord describes where on the canvas the pixel will be drawn.

            \n

            For more info about filters and shaders, see Adam Ferriss' repo of shader examples\nor the Introduction to Shaders tutorial.

            \n", "itemtype": "method", "name": "createFilterShader", "params": [ { "name": "fragSrc", - "description": "

            source code for the fragment shader

            \n", + "description": "

            source code for the fragment shader.

            \n", "type": "String" } ], "return": { - "description": "a shader object created from the provided\n fragment shader.", + "description": "new shader object created from the fragment shader.", "type": "p5.Shader" }, "example": [ @@ -23518,92 +23347,84 @@ }, { "file": "src/webgl/material.js", - "line": 331, - "description": "

            Sets the p5.Shader object to\nbe used to render subsequent shapes.

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.

            \n

            Custom shaders can be created using the\ncreateShader() and\nloadShader() functions.

            \n

            Use resetShader() to\nrestore the default shaders.

            \n

            Additional Information:\nThe shader will be used for:

            \n
              \n
            • Fills when a texture is enabled if it includes a uniform sampler2D.
              • \n
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
              • \n
            • Fills whenever there are no lights or textures.
              • \n
            • Strokes if it includes the uniform uStrokeWeight.\nNote: This behavior is considered experimental, and changes are planned in future releases.
              • \n
            \n

            Note, shaders can only be used in WEBGL mode.

            \n", + "line": 571, + "description": "

            Sets the p5.Shader object to apply while drawing.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels or vertices at the same time, making them fast for\nmany graphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.\np5.Shader objects can be created using the\ncreateShader() and\nloadShader() functions.

            \n

            The parameter, s, is the p5.Shader object to\napply. For example, calling shader(myShader) applies myShader to\nprocess each pixel on the canvas. The shader will be used for:

            \n
              \n
            • Fills when a texture is enabled if it includes a uniform sampler2D.
              • \n
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
              • \n
            • Fills whenever there are no lights or textures.
              • \n
            • Strokes if it includes the uniform uStrokeWeight.
              • \n
            \n

            The source code from a p5.Shader object's\nfragment and vertex shaders will be compiled the first time it's passed to\nshader(). See\nMDN\nfor more information about compiling shaders.

            \n

            Calling resetShader() restores a sketch’s\ndefault shaders.

            \n

            Note: Shaders can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "shader", "chainable": 1, "params": [ { "name": "s", - "description": "

            the p5.Shader object\nto use for rendering shapes.

            \n", + "description": "

            p5.Shader object\n to apply.

            \n", "type": "p5.Shader" } ], "example": [ - "\n
            \n\n// Click within the image to toggle\n// the shader used by the quad shape\n// Note: for an alternative approach to the same example,\n// involving changing uniforms please refer to:\n// https://p5js.org/reference/#/p5.Shader/setUniform\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // initialize the colors for redGreen shader\n shader(redGreen);\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // initialize the colors for orangeBlue shader\n shader(orangeBlue);\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n noStroke();\n\n describe(\n 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'\n );\n}\n\nfunction draw() {\n // update the offset values for each shader,\n // moving orangeBlue in vertical and redGreen\n // in horizontal direction\n orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n redGreen.setUniform('offset', [sin(millis() / 2000), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            " + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\n// Load the shader and create two separate p5.Shader objects.\nfunction preload() {\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Initialize the redGreen shader.\n shader(redGreen);\n\n // Set the redGreen shader's center and background color.\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // Initialize the orangeBlue shader.\n shader(orangeBlue);\n\n // Set the orangeBlue shader's center and background color.\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n describe(\n 'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'\n );\n}\n\nfunction draw() {\n // Update the offset values for each shader.\n // Move orangeBlue vertically.\n // Move redGreen horizontally.\n orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);\n redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n\n // Style the drawing surface.\n noStroke();\n\n // Add a quad as a drawing surface.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n// Toggle between shaders when the user double-clicks.\nfunction doubleClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            " ], - "alt": "canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 440, - "description": "

            Restores the default shaders. Code that runs after resetShader()\nwill not be affected by the shader previously set by\nshader()

            \n", + "line": 773, + "description": "

            Restores the default shaders.

            \n

            resetShader() deactivates any shaders previously applied by\nshader().

            \n

            Note: Shaders can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "resetShader", "chainable": 1, "example": [ - "\n
            \n\n// This variable will hold our shader object\nlet shaderProgram;\n\n// This variable will hold our vertex shader source code\nlet vertSrc = `\n attribute vec3 aPosition;\n attribute vec2 aTexCoord;\n uniform mat4 uProjectionMatrix;\n uniform mat4 uModelViewMatrix;\n varying vec2 vTexCoord;\n\n void main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n }\n`;\n\n// This variable will hold our fragment shader source code\nlet fragSrc = `\n precision mediump float;\n\n varying vec2 vTexCoord;\n\n void main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n }\n`;\n\nfunction setup() {\n // Shaders require WEBGL mode to work\n createCanvas(100, 100, WEBGL);\n\n // Create our shader\n shaderProgram = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'\n );\n}\n\nfunction draw() {\n // Clear the scene\n background(200);\n\n // Draw a box using our shader\n // shader() sets the active shader with our shader\n shader(shaderProgram);\n push();\n translate(-width / 4, 0, 0);\n rotateX(millis() * 0.00025);\n rotateY(millis() * 0.0005);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader\n // resetShader() restores the default fill shader\n resetShader();\n fill(255, 0, 0);\n push();\n translate(width / 4, 0, 0);\n rotateX(millis() * 0.00025);\n rotateY(millis() * 0.0005);\n box(width / 4);\n pop();\n}\n\n
            " + "\n
            \n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}\n\n
            " ], - "alt": "Two rotating cubes. The left one is painted using a custom (user-defined) shader,\nwhile the right one is painted using the default fill shader.", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 529, - "description": "

            Sets the texture that will be used to render subsequent shapes.

            \n

            A texture is like a \"skin\" that wraps around a 3D geometry. Currently\nsupported textures are images, video, and offscreen renders.

            \n

            To texture a geometry created with beginShape(),\nyou will need to specify uv coordinates in vertex().

            \n

            Note, texture() can only be used in WEBGL mode.

            \n

            You can view more materials in this\nexample.

            \n", + "line": 861, + "description": "

            Sets the texture that will be used on shapes.

            \n

            A texture is like a skin that wraps around a shape. texture() works with\nbuilt-in shapes, such as square() and\nsphere(), and custom shapes created with\nfunctions such as buildGeometry(). To\ntexture a geometry created with beginShape(),\nuv coordinates must be passed to each\nvertex() call.

            \n

            The parameter, tex, is the texture to apply. texture() can use a range\nof sources including images, videos, and offscreen renderers such as\np5.Graphics and\np5.Framebuffer objects.

            \n

            To texture a geometry created with beginShape(),\nyou will need to specify uv coordinates in vertex().

            \n

            Note: texture() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "texture", "params": [ { "name": "tex", - "description": "

            image to use as texture

            \n", + "description": "

            media to use as the texture.

            \n", "type": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture" } ], "chainable": 1, "example": [ - "\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('spinning cube with a texture from an image');\n}\n\nfunction draw() {\n background(0);\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n //pass image as texture\n texture(img);\n box(width / 2);\n}\n\n
            ", - "\n
            \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n pg = createGraphics(200, 200);\n pg.textSize(75);\n describe('plane with a texture from an image created by createGraphics()');\n}\n\nfunction draw() {\n background(0);\n pg.background(255);\n pg.text('hello!', 0, 100);\n //pass image as texture\n texture(pg);\n rotateX(0.5);\n noStroke();\n plane(50);\n}\n\n
            ", - "\n
            \n\nlet vid;\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n vid.hide();\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n //pass video frame as texture\n texture(vid);\n rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n vid.loop();\n}\n\n
            ", - "\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using normalized coordinates');\n}\n\nfunction draw() {\n background(0);\n texture(img);\n textureMode(NORMAL);\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n\n
            " + "\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}\n\n
            \n\n
            \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}\n\n
            \n\n
            \n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}\n\n
            \n\n
            \n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n\n
            " ], - "alt": "quad with a texture, mapped using normalized coordinates", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 674, - "description": "

            Sets the coordinate space for texture mapping. The default mode is IMAGE\nwhich refers to the actual coordinates of the image.\nNORMAL refers to a normalized space of values ranging from 0 to 1.

            \n

            With IMAGE, if an image is 100×200 pixels, mapping the image onto the entire\nsize of a quad would require the points (0,0) (100, 0) (100,200) (0,200).\nThe same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).

            \n", + "line": 1048, + "description": "

            Changes the coordinate system used for textures when they’re applied to\ncustom shapes.

            \n

            In order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.

            \n

            Each call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nrect(0, 0, 30, 50);\n

            \n

            If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);

            \n

            // Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);

            \n

            // Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);

            \n

            endShape();\n

            \n

            textureMode() changes the coordinate system for uv coordinates.

            \n

            The parameter, mode, accepts two possible constants. If NORMAL is\npassed, as in textureMode(NORMAL), then the texture’s uv coordinates can\nbe provided in the range 0 to 1 instead of the image’s dimensions. This can\nbe helpful for using the same code for multiple images of different sizes.\nFor example, the code snippet above could be rewritten as follows:

            \n\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);\n\n

            // Apply the image as a texture.\ntexture(img);

            \n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);

            \n

            // Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);

            \n

            // Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);

            \n

            endShape();\n

            \n

            By default, mode is IMAGE, which scales uv coordinates to the\ndimensions of the image. Calling textureMode(IMAGE) applies the default.

            \n

            Note: textureMode() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "textureMode", "params": [ { "name": "mode", - "description": "

            either IMAGE or NORMAL

            \n", + "description": "

            either IMAGE or NORMAL.

            \n", "type": "Constant" } ], "example": [ - "\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using normalized coordinates');\n}\n\nfunction draw() {\n texture(img);\n textureMode(NORMAL);\n beginShape();\n vertex(-50, -50, 0, 0);\n vertex(50, -50, 1, 0);\n vertex(50, 50, 1, 1);\n vertex(-50, 50, 0, 1);\n endShape();\n}\n\n
            ", - "\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using image coordinates');\n}\n\nfunction draw() {\n texture(img);\n textureMode(IMAGE);\n beginShape();\n vertex(-50, -50, 0, 0);\n vertex(50, -50, img.width, 0);\n vertex(50, 50, img.width, img.height);\n vertex(-50, 50, 0, img.height);\n endShape();\n}\n\n
            " + "\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}\n\n
            " ], - "alt": "quad with a texture, mapped using image coordinates", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 752, - "description": "

            Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 to 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.

            \n

            CLAMP causes the pixels at the edge of the texture to extend to the bounds.\nREPEAT causes the texture to tile repeatedly until reaching the bounds.\nMIRROR works similarly to REPEAT but it flips the texture with every new tile.

            \n

            REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).

            \n

            This method will affect all textures in your sketch until a subsequent\ntextureWrap() call is made.

            \n

            If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.

            \n", + "line": 1227, + "description": "

            Changes the way textures behave when a shape’s uv coordinates go beyond the\ntexture.

            \n

            In order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.

            \n

            Each call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nrect(0, 0, 30, 50);\n

            \n

            If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);

            \n

            // Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);

            \n

            // Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);

            \n

            endShape();\n

            \n

            textureWrap() controls how textures behave when their uv's go beyond the\ntexture. Doing so can produce interesting visual effects such as tiling.\nFor example, the custom shape above could have u-coordinates are greater\nthan the image’s width:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);

            \n

            // Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);

            \n

            vertex(0, 50, 0, 0, 500);\nendShape();\n

            \n

            The u-coordinates of 600 are greater than the texture image’s width of 300.\nThis creates interesting possibilities.

            \n

            The first parameter, wrapX, accepts three possible constants. If CLAMP\nis passed, as in textureWrap(CLAMP), the pixels at the edge of the\ntexture will extend to the shape’s edges. If REPEAT is passed, as in\ntextureWrap(REPEAT), the texture will tile repeatedly until reaching the\nshape’s edges. If MIRROR is passed, as in textureWrap(MIRROR), the\ntexture will tile repeatedly until reaching the shape’s edges, flipping\nits orientation between tiles. By default, textures CLAMP.

            \n

            The second parameter, wrapY, is optional. It accepts the same three\nconstants, CLAMP, REPEAT, and MIRROR. If one of these constants is\npassed, as in textureWRAP(MIRROR, REPEAT), then the texture will MIRROR\nhorizontally and REPEAT vertically. By default, wrapY will be set to\nthe same value as wrapX.

            \n

            Note: textureWrap() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "textureWrap", "params": [ @@ -23620,83 +23441,78 @@ } ], "example": [ - "\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textureWrap(MIRROR);\n describe('an image of the rocky mountains repeated in mirrored tiles');\n}\n\nfunction draw() {\n background(0);\n\n let dX = mouseX;\n let dY = mouseY;\n\n let u = lerp(1.0, 2.0, dX);\n let v = lerp(1.0, 2.0, dY);\n\n scale(width / 2);\n\n texture(img);\n\n beginShape(TRIANGLES);\n vertex(-1, -1, 0, 0, 0);\n vertex(1, -1, 0, u, 0);\n vertex(1, 1, 0, u, v);\n\n vertex(1, 1, 0, u, v);\n vertex(-1, 1, 0, 0, v);\n vertex(-1, -1, 0, 0, 0);\n endShape();\n}\n\n
            " + "\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            " ], - "alt": "an image of the rocky mountains repeated in mirrored tiles", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 824, - "description": "

            Sets the current material as a normal material.

            \n

            A normal material is not affected by light. It is often used as\na placeholder material when debugging.

            \n

            Surfaces facing the X-axis become red, those facing the Y-axis\nbecome green, and those facing the Z-axis become blue.

            \n

            You can view more materials in this\nexample.

            \n", + "line": 1510, + "description": "

            Sets the current material as a normal material.

            \n

            A normal material sets surfaces facing the x-axis to red, those facing the\ny-axis to green, and those facing the z-axis to blue. Normal material isn't\naffected by light. It’s often used as a placeholder material when debugging.

            \n

            Note: normalMaterial() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "normalMaterial", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Sphere with normal material');\n}\n\nfunction draw() {\n background(200);\n normalMaterial();\n sphere(40);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}\n\n
            " ], - "alt": "Sphere with normal material", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 869, - "description": "

            Sets the ambient color of the material.

            \n

            The ambientMaterial() color represents the components\nof the ambientLight() color that the object reflects.

            \n

            Consider an ambientMaterial() with the color yellow (255, 255, 0).\nIf the ambientLight() emits the color white (255, 255, 255), then the object\nwill appear yellow as it will reflect the red and green components\nof the light. If the ambientLight() emits the color red (255, 0, 0), then\nthe object will appear red as it will reflect the red component\nof the light. If the ambientLight() emits the color blue (0, 0, 255),\nthen the object will appear black, as there is no component of\nthe light that it can reflect.

            \n

            You can view more materials in this\nexample.

            \n", + "line": 1561, + "description": "

            Sets the ambient color of shapes’ surface material.

            \n

            The ambientMaterial() color sets the components of the\nambientLight() color that shapes will\nreflect. For example, calling ambientMaterial(255, 255, 0) would cause a\nshape to reflect red and green light, but not blue light.

            \n

            ambientMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call ambientMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in ambientMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call ambientMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in ambientMaterial('magenta'), can be passed to set\nthe material’s color.

            \n

            The third way to call ambientMaterial() has three parameters, v1, v2,\nand v3. RGB, HSB, or HSL values, as in ambientMaterial(255, 0, 0), can\nbe passed to set the material’s colors. Color values will be interpreted\nusing the current colorMode().

            \n

            Note: ambientMaterial() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "ambientMaterial", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('sphere reflecting red, blue, and green light');\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(255);\n ambientMaterial(70, 130, 230);\n sphere(40);\n}\n\n
            ", - "\n
            \n\n// ambientLight is both red and blue (magenta),\n// so object only reflects it's red and blue components\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('box reflecting only red and blue light');\n}\nfunction draw() {\n background(70);\n ambientLight(255, 0, 255); // magenta light\n ambientMaterial(255); // white material\n box(30);\n}\n\n
            ", - "\n
            \n\n// ambientLight is green. Since object does not contain\n// green, it does not reflect any light\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('box reflecting no light');\n}\nfunction draw() {\n background(70);\n ambientLight(0, 255, 0); // green light\n ambientMaterial(255, 0, 255); // magenta material\n box(30);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "box reflecting no light", "class": "p5", "module": "3D", "submodule": "Material", "overloads": [ { - "line": 869, + "line": 1561, "params": [ { "name": "v1", - "description": "

            red or hue value relative to the current\n color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value relative to the\n current color range

            \n", + "description": "

            green or saturation value in the\n current colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value relative to the\n current color range

            \n", + "description": "

            blue, brightness, or lightness value in the\n current colorMode().

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 955, + "line": 1766, "params": [ { "name": "gray", - "description": "

            number specifying value between\n white and black

            \n", + "description": "

            grayscale value between 0 (black) and 255 (white).

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 962, + "line": 1772, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n", "type": "p5.Color|Number[]|String" } ], @@ -23706,40 +23522,39 @@ }, { "file": "src/webgl/material.js", - "line": 982, - "description": "

            Sets the emissive color of the material.

            \n

            An emissive material will display the emissive color at\nfull strength regardless of lighting. This can give the\nappearance that the object is glowing.

            \n

            Note, \"emissive\" is a misnomer in the sense that the material\ndoes not actually emit light that will affect surrounding objects.

            \n

            You can view more materials in this\nexample.

            \n", + "line": 1792, + "description": "

            Sets the emissive color of shapes’ surface material.

            \n

            The emissiveMaterial() color sets a color shapes display at full\nstrength, regardless of lighting. This can give the appearance that a shape\nis glowing. However, emissive materials don’t actually emit light that\ncan affect surrounding objects.

            \n

            emissiveMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call emissiveMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in emissiveMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call emissiveMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in emissiveMaterial('magenta'), can be passed to set\nthe material’s color.

            \n

            The third way to call emissiveMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in emissiveMaterial(255, 0, 0) or\nemissiveMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n

            Note: emissiveMaterial() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "emissiveMaterial", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('sphere with green emissive material');\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(0);\n emissiveMaterial(130, 230, 0);\n sphere(40);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "sphere with green emissive material", "class": "p5", "module": "3D", "submodule": "Material", "overloads": [ { - "line": 982, + "line": 1792, "params": [ { "name": "v1", - "description": "

            red or hue value relative to the current\n color range

            \n", + "description": "

            red or hue value in the current\n colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value relative to the\n current color range

            \n", + "description": "

            green or saturation value in the\n current colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value relative to the\n current color range

            \n", + "description": "

            blue, brightness, or lightness value in the\n current colorMode().

            \n", "type": "Number" }, { "name": "alpha", - "description": "

            alpha value relative to current color\n range (default is 0-255)

            \n", + "description": "

            alpha value in the current\n colorMode().

            \n", "type": "Number", "optional": true } @@ -23747,22 +23562,22 @@ "chainable": 1 }, { - "line": 1026, + "line": 1862, "params": [ { "name": "gray", - "description": "

            number specifying value between\n white and black

            \n", + "description": "

            grayscale value between 0 (black) and 255 (white).

            \n", "type": "Number" } ], "chainable": 1 }, { - "line": 1033, + "line": 1868, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n", "type": "p5.Color|Number[]|String" } ], @@ -23772,30 +23587,29 @@ }, { "file": "src/webgl/material.js", - "line": 1053, - "description": "

            Sets the specular color of the material.

            \n

            A specular material is reflective (shiny). The shininess can be\ncontrolled by the shininess() function.

            \n

            Like ambientMaterial(),\nthe specularMaterial() color is the color the object will reflect\nunder ambientLight().\nHowever unlike ambientMaterial(), for all other types of lights\n(directionalLight(),\npointLight(),\nspotLight()),\na specular material will reflect the color of the light source.\nThis is what gives it its \"shiny\" appearance.

            \n

            You can view more materials in this\nexample.

            \n", + "line": 1888, + "description": "

            Sets the specular color of shapes’ surface material.

            \n

            The specularMaterial() color sets the components of light color that\nglossy coats on shapes will reflect. For example, calling\nspecularMaterial(255, 255, 0) would cause a shape to reflect red and\ngreen light, but not blue light.

            \n

            Unlike ambientMaterial(),\nspecularMaterial() will reflect the full color of light sources including\ndirectionalLight(),\npointLight(),\nand spotLight(). This is what gives it shapes\ntheir \"shiny\" appearance. The material’s shininess can be controlled by the\nshininess() function.

            \n

            specularMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call specularMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in specularMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call specularMaterial() has one parameter, color. A\np5.Color> object, an array of color values, or a CSS\ncolor string, as in specularMaterial('magenta'), can be passed to set the\nmaterial’s color.

            \n

            The third way to call specularMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in specularMaterial(255, 0, 0) or\nspecularMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n", "itemtype": "method", "name": "specularMaterial", "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('torus with specular material');\n}\n\nfunction draw() {\n background(0);\n\n ambientLight(60);\n\n // add point light to showcase specular material\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n pointLight(255, 255, 255, locX, locY, 50);\n\n specularMaterial(250);\n shininess(50);\n torus(30, 10, 64, 64);\n}\n\n
            " + "\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            " ], - "alt": "torus with specular material", "class": "p5", "module": "3D", "submodule": "Material", "overloads": [ { - "line": 1053, + "line": 1888, "params": [ { "name": "gray", - "description": "

            number specifying value between white and black.

            \n", + "description": "

            grayscale value between 0 (black) and 255 (white).

            \n", "type": "Number" }, { "name": "alpha", - "description": "

            alpha value relative to current color range\n (default is 0-255)

            \n", + "description": "

            alpha value in the current current\n colorMode().

            \n", "type": "Number", "optional": true } @@ -23803,21 +23617,21 @@ "chainable": 1 }, { - "line": 1107, + "line": 2111, "params": [ { "name": "v1", - "description": "

            red or hue value relative to\n the current color range

            \n", + "description": "

            red or hue value in\n the current colorMode().

            \n", "type": "Number" }, { "name": "v2", - "description": "

            green or saturation value\n relative to the current color range

            \n", + "description": "

            green or saturation value\n in the current colorMode().

            \n", "type": "Number" }, { "name": "v3", - "description": "

            blue or brightness value\n relative to the current color range

            \n", + "description": "

            blue, brightness, or lightness value\n in the current colorMode().

            \n", "type": "Number" }, { @@ -23830,11 +23644,11 @@ "chainable": 1 }, { - "line": 1119, + "line": 2123, "params": [ { "name": "color", - "description": "

            color as a p5.Color,\n as an array, or as a CSS string

            \n", + "description": "

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n", "type": "p5.Color|Number[]|String" } ], @@ -23844,42 +23658,40 @@ }, { "file": "src/webgl/material.js", - "line": 1139, - "description": "

            Sets the amount of gloss (\"shininess\") of a\nspecularMaterial().

            \n

            The default and minimum value is 1.

            \n", + "line": 2143, + "description": "

            Sets the amount of gloss (\"shininess\") of a\nspecularMaterial().

            \n

            Shiny materials focus reflected light more than dull materials.\nshininess() affects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nand spotLight().

            \n

            The parameter, shine, is a number that sets the amount of shininess.\nshine must be greater than 1, which is its default value.

            \n", "itemtype": "method", "name": "shininess", "params": [ { "name": "shine", - "description": "

            degree of shininess

            \n", + "description": "

            amount of shine.

            \n", "type": "Number" } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('two spheres, one more shiny than the other');\n}\nfunction draw() {\n background(0);\n noStroke();\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n ambientLight(60, 60, 60);\n pointLight(255, 255, 255, locX, locY, 50);\n specularMaterial(250);\n translate(-25, 0, 0);\n shininess(1);\n sphere(20);\n translate(50, 0, 0);\n shininess(20);\n sphere(20);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}\n\n
            " ], - "alt": "two spheres, one more shiny than the other", "class": "p5", "module": "3D", "submodule": "Material" }, { "file": "src/webgl/material.js", - "line": 1186, - "description": "

            Sets the metalness property of a material used in 3D rendering.

            \n

            The metalness property controls the degree to which the material\nappears metallic. A higher metalness value makes the material look\nmore metallic, while a lower value makes it appear less metallic.

            \n

            The default and minimum value is 0, indicating a non-metallic appearance.

            \n

            Unlike other materials, metals exclusively rely on reflections, particularly\nthose produced by specular lights (mirrorLike lights). They don't incorporate\ndiffuse or ambient lighting. Metals use a fill color to influence the overall\ncolor of their reflections. Pick a fill color, and you can easily change the\nappearance of the metal surfaces. When no fill color is provided, it defaults\nto using white.

            \n", + "line": 2214, + "description": "

            Sets the amount of \"metalness\" of a\nspecularMaterial().

            \n

            metalness() can make materials appear more metallic. It affects the way\nmaterials reflect light sources including\naffects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nspotLight(), and\nimageLight().

            \n

            The parameter, metallic, is a number that sets the amount of metalness.\nmetallic must be greater than 1, which is its default value. Higher\nvalues, such as metalness(100), make specular materials appear more\nmetallic.

            \n", "itemtype": "method", "name": "metalness", "params": [ { "name": "metallic", - "description": "
              \n
            • The degree of metalness.
              • \n
            \n", + "description": "

            amount of metalness.

            \n", "type": "Number" } ], "example": [ - "\n
            \n\nlet img;\nlet slider;\nlet slider2;\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 300, 100, 1);\n let sliderLabel = createP('Metalness');\n sliderLabel.position(100, height - 25);\n slider2 = createSlider(0, 350, 100);\n slider2.position(0, height + 20);\n slider2Label = createP('Shininess');\n slider2Label.position(100, height);\n}\nfunction draw() {\n background(220);\n imageMode(CENTER);\n push();\n image(img, 0, 0, width, height);\n clearDepth();\n pop();\n imageLight(img);\n fill('gray');\n specularMaterial('gray');\n shininess(slider2.value());\n metalness(slider.value());\n noStroke();\n sphere(30);\n}\n\n
            ", - "\n
            \n\nlet slider;\nlet slider2;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 200, 100);\n let sliderLabel = createP('Metalness');\n sliderLabel.position(100, height - 25);\n slider2 = createSlider(0, 200, 2);\n slider2.position(0, height + 25);\n let slider2Label = createP('Shininess');\n slider2Label.position(100, height);\n}\nfunction draw() {\n noStroke();\n background(100);\n fill(255, 215, 0);\n pointLight(255, 255, 255, 5000, 5000, 75);\n specularMaterial('gray');\n ambientLight(100);\n shininess(slider2.value());\n metalness(slider.value());\n rotateY(frameCount * 0.01);\n torus(20, 10);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n\n
            " ], "class": "p5", "module": "3D", @@ -23888,146 +23700,142 @@ { "file": "src/webgl/p5.Camera.js", "line": 13, - "description": "

            Sets the position of the current camera in a 3D sketch.\nParameters for this function define the camera's position,\nthe center of the sketch (where the camera is pointing),\nand an up direction (the orientation of the camera).

            \n

            This function simulates the movements of the camera, allowing objects to be\nviewed from various angles. Remember, it does not move the objects themselves\nbut the camera instead. For example when the centerX value is positive,\nand the camera is rotating to the right side of the sketch,\nthe object will seem like it's moving to the left.

            \n

            See this example\nto view the position of your camera.

            \n

            If no parameters are given, the following default is used:\ncamera(0, 0, 800, 0, 0, 0, 0, 1, 0)

            \n", + "description": "

            Sets the position and orientation of the current camera in a 3D sketch.

            \n

            camera() allows objects to be viewed from different angles. It has nine\nparameters that are all optional.

            \n

            The first three parameters, x, y, and z, are the coordinates of the\ncamera’s position. For example, calling camera(0, 0, 0) places the camera\nat the origin (0, 0, 0). By default, the camera is placed at\n(0, 0, 800).

            \n

            The next three parameters, centerX, centerY, and centerZ are the\ncoordinates of the point where the camera faces. For example, calling\ncamera(0, 0, 0, 10, 20, 30) places the camera at the origin (0, 0, 0)\nand points it at (10, 20, 30). By default, the camera points at the\norigin (0, 0, 0).

            \n

            The last three parameters, upX, upY, and upZ are the components of\nthe \"up\" vector. The \"up\" vector orients the camera’s y-axis. For example,\ncalling camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the\norigin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector\nto (0, -1, 0) which is like holding it upside-down. By default, the \"up\"\nvector is (0, 1, 0).

            \n

            Note: camera() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "camera", "is_constructor": 1, "params": [ { "name": "x", - "description": "

            camera position value on x axis

            \n", + "description": "

            x-coordinate of the camera. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "y", - "description": "

            camera position value on y axis

            \n", + "description": "

            y-coordinate of the camera. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "z", - "description": "

            camera position value on z axis

            \n", + "description": "

            z-coordinate of the camera. Defaults to 800.

            \n", "type": "Number", "optional": true }, { "name": "centerX", - "description": "

            x coordinate representing center of the sketch

            \n", + "description": "

            x-coordinate of the point the camera faces. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "centerY", - "description": "

            y coordinate representing center of the sketch

            \n", + "description": "

            y-coordinate of the point the camera faces. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "centerZ", - "description": "

            z coordinate representing center of the sketch

            \n", + "description": "

            z-coordinate of the point the camera faces. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "upX", - "description": "

            x component of direction 'up' from camera

            \n", + "description": "

            x-component of the camera’s \"up\" vector. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "upY", - "description": "

            y component of direction 'up' from camera

            \n", + "description": "

            y-component of the camera’s \"up\" vector. Defaults to 1.

            \n", "type": "Number", "optional": true }, { "name": "upZ", - "description": "

            z component of direction 'up' from camera

            \n", + "description": "

            z-component of the camera’s \"up\" vector. Defaults to 0.

            \n", "type": "Number", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a square moving closer and then away from the camera.');\n}\nfunction draw() {\n background(204);\n //move the camera away from the plane by a sin wave\n camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n plane(10, 10);\n}\n\n
            ", - "\n
            \n\n//move slider to see changes!\n//sliders control the first 6 parameters of camera()\nlet sliderGroup = [];\nlet X;\nlet Y;\nlet Z;\nlet centerX;\nlet centerY;\nlet centerZ;\nlet h = 20;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n //create sliders\n for (var i = 0; i < 6; i++) {\n if (i === 2) {\n sliderGroup[i] = createSlider(10, 400, 200);\n } else {\n sliderGroup[i] = createSlider(-400, 400, 0);\n }\n h = map(i, 0, 6, 5, 85);\n sliderGroup[i].position(10, height + h);\n sliderGroup[i].style('width', '80px');\n }\n describe(\n 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.'\n );\n}\n\nfunction draw() {\n background(60);\n // assigning sliders' value to each parameters\n X = sliderGroup[0].value();\n Y = sliderGroup[1].value();\n Z = sliderGroup[2].value();\n centerX = sliderGroup[3].value();\n centerY = sliderGroup[4].value();\n centerZ = sliderGroup[5].value();\n camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n stroke(255);\n fill(255, 102, 94);\n box(85);\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera to the top-right.\n camera(200, -400, 800);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube apperas to sway left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the camera's x-coordinate.\n let x = 400 * cos(frameCount * 0.01);\n\n // Orbit the camera around the box.\n camera(x, -400, 800);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Adjust the range sliders to change the camera's position.\n\nlet xSlider;\nlet ySlider;\nlet zSlider;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create slider objects to set the camera's coordinates.\n xSlider = createSlider(-400, 400, 400);\n xSlider.position(0, 100);\n xSlider.size(100);\n ySlider = createSlider(-400, 400, -200);\n ySlider.position(0, 120);\n ySlider.size(100);\n zSlider = createSlider(0, 1600, 800);\n zSlider.position(0, 140);\n zSlider.size(100);\n\n describe(\n 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Get the camera's coordinates from the sliders.\n let x = xSlider.value();\n let y = ySlider.value();\n let z = zSlider.value();\n\n // Move the camera.\n camera(x, y, z);\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "White square repeatedly grows to fill canvas and then shrinks.\nAn interactive example of a red cube with 3 sliders for moving it across x, y,\nz axis and 3 sliders for shifting its center.", "class": "p5", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 121, - "description": "

            Sets a perspective projection for the current camera in a 3D sketch.\nThis projection represents depth through foreshortening: objects\nthat are close to the camera appear their actual size while those\nthat are further away from the camera appear smaller.

            \n

            The parameters to this function define the viewing frustum\n(the truncated pyramid within which objects are seen by the camera) through\nvertical field of view, aspect ratio (usually width/height), and near and far\nclipping planes.

            \n

            If no parameters are given, the default values are used as:

            \n
              \n
            • fov : The default field of view for the camera is such that the full height of renderer is visible when it is positioned at a default distance of 800 units from the camera.
              • \n
            • aspect : The default aspect ratio is the ratio of renderer's width to renderer's height.
              • \n
            • near : The default value for the near clipping plane is 80, which is 0.1 times the default distance from the camera to its subject.
              • \n
            • far : The default value for the far clipping plane is 8000, which is 10 times the default distance from the camera to its subject.
              • \n
            \n

            If you prefer a fixed field of view, follow these steps:

            \n
              \n
            1. Choose your desired field of view angle (fovy). This is how wide the camera can see.
              2. \n
            2. To ensure that you can see the entire width across horizontally and height across vertically, place the camera a distance of (height / 2) / tan(fovy / 2) back from its subject.
              3. \n
            3. Call perspective with the chosen field of view, canvas aspect ratio, and near/far values:\nperspective(fovy, width / height, cameraDistance / 10, cameraDistance * 10);
              4. \n
            \n", + "line": 148, + "description": "

            Sets a perspective projection for the current camera in a 3D sketch.

            \n

            In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in\nWebGL mode.

            \n

            perspective() changes the camera’s perspective by changing its viewing\nfrustum. The frustum is the volume of space that’s visible to the camera.\nIts shape is a pyramid with its top cut off. The camera is placed where\nthe top of the pyramid should be and views everything between the frustum’s\ntop (near) plane and its bottom (far) plane.

            \n

            The first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling perspective(0.5) sets the camera’s vertical field of\nview to 0.5 radians. By default, fovy is calculated based on the sketch’s\nheight and the camera’s default z-coordinate, which is 800. The formula for\nthe default fovy is 2 * atan(height / 2 / 800).

            \n

            The second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling perspective(0.5, 1.5) sets the camera’s field of view to\n0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner\non a square canvas. By default, aspect is set to width / height.

            \n

            The third parameter, near, is the distance from the camera to the near\nplane. For example, calling perspective(0.5, 1.5, 100) sets the camera’s\nfield of view to 0.5 radians, its aspect ratio to 1.5, and places the near\nplane 100 pixels from the camera. Any shapes drawn less than 100 pixels\nfrom the camera won’t be visible. By default, near is set to 0.1 * 800,\nwhich is 1/10th the default distance between the camera and the origin.

            \n

            The fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling perspective(0.5, 1.5, 100, 10000) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the\nnear plane 100 pixels from the camera, and places the far plane 10,000\npixels from the camera. Any shapes drawn more than 10,000 pixels from the\ncamera won’t be visible. By default, far is set to 10 * 800, which is 10\ntimes the default distance between the camera and the origin.

            \n

            Note: perspective() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "perspective", "params": [ { "name": "fovy", - "description": "

            camera frustum vertical field of view,\n from bottom to top of view, in angleMode units

            \n", + "description": "

            camera frustum vertical field of view. Defaults to\n 2 * atan(height / 2 / 800).

            \n", "type": "Number", "optional": true }, { "name": "aspect", - "description": "

            camera frustum aspect ratio

            \n", + "description": "

            camera frustum aspect ratio. Defaults to\n width / height.

            \n", "type": "Number", "optional": true }, { "name": "near", - "description": "

            frustum near plane length

            \n", + "description": "

            distance from the camera to the near clipping plane.\n Defaults to 0.1 * 800.

            \n", "type": "Number", "optional": true }, { "name": "far", - "description": "

            frustum far plane length

            \n", + "description": "

            distance from the camera to the far clipping plane.\n Defaults to 10 * 800.

            \n", "type": "Number", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n//drag the mouse to look around!\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI / 3.0, width / height, 0.1, 500);\n describe(\n 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(-0.3);\n rotateY(-0.2);\n translate(0, 0, -50);\n\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\n// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "two colored 3D boxes move back and forth, rotating as mouse is dragged.", "class": "p5", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 197, - "description": "

            Enable or disable perspective for lines in the WebGL renderer.\n The behavior of linePerspective() is associated with the type of camera projection being used.

            \n
              \n
            • When using perspective(), which simulates realistic perspective, linePerspective\n is set to true by default. This means that lines will be affected by the current\n camera's perspective, resulting in a more natural appearance.
              • \n
            • When using ortho() or frustum(), which do not simulate realistic perspective,\n linePerspective is set to false by default. In this case, lines will have a uniform\n scale regardless of the camera's perspective, providing a more predictable and\n consistent appearance.
              • \n
            • You can override the default behavior by explicitly calling linePerspective() after\n using perspective(), ortho(), or frustum(). This allows you to customize the line\n perspective based on your specific requirements.
              • \n
            \n", + "line": 280, + "description": "

            Enables or disables perspective for lines in 3D sketches.

            \n

            In WebGL mode, lines can be drawn with a thinner stroke when they’re\nfurther from the camera. Doing so gives them a more realistic appearance.

            \n

            By default, lines are drawn differently based on the type of perspective\nbeing used:

            \n
              \n
            • perspective() and frustum() simulate a realistic perspective. In\nthese modes, stroke weight is affected by the line’s distance from the\ncamera. Doing so results in a more natural appearance. perspective() is\nthe default mode for 3D sketches.
              • \n
            • ortho() doesn’t simulate a realistic perspective. In this mode, stroke\nweights are consistent regardless of the line’s distance from the camera.\nDoing so results in a more predictable and consistent appearance.
              • \n
            \n

            linePerspective() can override the default line drawing mode.

            \n

            The parameter, enable, is optional. It’s a Boolean value that sets the\nway lines are drawn. If true is passed, as in linePerspective(true),\nthen lines will appear thinner when they are further from the camera. If\nfalse is passed, as in linePerspective(false), then lines will have\nconsistent stroke weights regardless of their distance from the camera. By\ndefault, linePerspective() is enabled.

            \n

            Calling linePerspective() without passing an argument returns true if\nit's enabled and false if not.

            \n

            Note: linePerspective() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "linePerspective", "example": [ - "\n
            \n \n function setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes({ antialias: true });\n strokeWeight(3);\n describe(\n 'rotated 3D boxes have their stroke weights affected if toggled back and forth with mouse clicks.'\n );\n }\nfunction draw() {\n background(220);\n rotateY(PI/24);\n rotateZ(PI/8);\n translate(0, 0, 350);\n for (let i = 0; i < 12; i++) {\n translate(0, 0, -70);\n box(30);\n }\n }\nfunction mousePressed() {\n linePerspective(!linePerspective());\n }\n \n
            \n
            \n \n function setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(4);\n }\nfunction draw() {\n background(220);\n // Using orthographic projection\n ortho();\n // Enable line perspective explicitly\n linePerspective(true);\n // Draw a rotating cube\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(25);\n // Move to a new position\n translate(0, -60, 0);\n // Using perspective projection\n perspective();\n // Disable line perspective explicitly\n linePerspective(false);\n // Draw another rotating cube with perspective\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(25);\n }\n \n
            " + "\n
            \n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n\n
            \n\n
            \n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n\n
            " ], - "alt": "Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes.", "class": "p5", "module": "3D", "submodule": "Camera", "overloads": [ { - "line": 197, + "line": 280, "params": [ { "name": "enable", - "description": "
              \n
            • Set to true to enable line perspective, false to disable.
              • \n
            \n", + "description": "

            whether to enable line perspective.

            \n", "type": "Boolean" } ] }, { - "line": 286, + "line": 392, "params": [], "return": { - "description": "The boolean value representing the current state of linePerspective().", + "description": "whether line perspective is enabled.", "type": "Boolean" } } @@ -24035,534 +23843,666 @@ }, { "file": "src/webgl/p5.Camera.js", - "line": 306, - "description": "

            Sets an orthographic projection for the current camera in a 3D sketch\nand defines a box-shaped viewing frustum within which objects are seen.\nIn this projection, all objects with the same dimension appear the same\nsize, regardless of whether they are near or far from the camera.

            \n

            The parameters to this function specify the viewing frustum where\nleft and right are the minimum and maximum x values, top and bottom are\nthe minimum and maximum y values, and near and far are the minimum and\nmaximum z values.

            \n

            If no parameters are given, the following default is used:\northo(-width/2, width/2, -height/2, height/2, 0, max(width, height) + 800).

            \n", + "line": 412, + "description": "

            Sets an orthographic projection for the current camera in a 3D sketch.

            \n

            In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.

            \n

            ortho() changes the camera’s perspective by changing its viewing frustum\nfrom a truncated pyramid to a rectangular prism. The camera is placed in\nfront of the frustum and views everything between the frustum’s near plane\nand its far plane. ortho() has six optional parameters to define the\nfrustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\northo(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and\n400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 2, width / 2, -height / 2, height / 2).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, 200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near and far are set to 0 and\nmax(width, height) + 800, respectively.

            \n

            Note: ortho() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "ortho", "params": [ { "name": "left", - "description": "

            camera frustum left plane

            \n", + "description": "

            x-coordinate of the frustum’s left plane. Defaults to -width / 2.

            \n", "type": "Number", "optional": true }, { "name": "right", - "description": "

            camera frustum right plane

            \n", + "description": "

            x-coordinate of the frustum’s right plane. Defaults to width / 2.

            \n", "type": "Number", "optional": true }, { "name": "bottom", - "description": "

            camera frustum bottom plane

            \n", + "description": "

            y-coordinate of the frustum’s bottom plane. Defaults to height / 2.

            \n", "type": "Number", "optional": true }, { "name": "top", - "description": "

            camera frustum top plane

            \n", + "description": "

            y-coordinate of the frustum’s top plane. Defaults to -height / 2.

            \n", "type": "Number", "optional": true }, { "name": "near", - "description": "

            camera frustum near plane

            \n", + "description": "

            z-coordinate of the frustum’s near plane. Defaults to 0.

            \n", "type": "Number", "optional": true }, { "name": "far", - "description": "

            camera frustum far plane

            \n", + "description": "

            z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.

            \n", "type": "Number", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n ortho();\n describe(\n 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(0.2);\n rotateY(-0.2);\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            " ], - "alt": "two 3D boxes move back and forth along same plane, rotating as mouse is dragged.", "class": "p5", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 369, - "description": "

            Sets the frustum of the current camera as defined by\nthe parameters.

            \n

            A frustum is a geometric form: a pyramid with its top\ncut off. With the viewer's eye at the imaginary top of\nthe pyramid, the six planes of the frustum act as clipping\nplanes when rendering a 3D view. Thus, any form inside the\nclipping planes is visible; anything outside\nthose planes is not visible.

            \n

            Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\nperspective().

            \n

            If no parameters are given, the following default is used:\nfrustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10),\nwhere eyeZ is equal to 800.

            \n", + "line": 522, + "description": "

            Sets the frustum of the current camera in a 3D sketch.

            \n

            In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.

            \n

            frustum() changes the default camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nfrustum(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide\nand 400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 20, width / 20, height / 20, -height / 20).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near is set to 0.1 * 800, which is\n1/10th the default distance between the camera and the origin. far is set\nto 10 * 800, which is 10 times the default distance between the camera\nand the origin.

            \n

            Note: frustum() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "frustum", "params": [ { "name": "left", - "description": "

            camera frustum left plane

            \n", + "description": "

            x-coordinate of the frustum’s left plane. Defaults to -width / 20.

            \n", "type": "Number", "optional": true }, { "name": "right", - "description": "

            camera frustum right plane

            \n", + "description": "

            x-coordinate of the frustum’s right plane. Defaults to width / 20.

            \n", "type": "Number", "optional": true }, { "name": "bottom", - "description": "

            camera frustum bottom plane

            \n", + "description": "

            y-coordinate of the frustum’s bottom plane. Defaults to height / 20.

            \n", "type": "Number", "optional": true }, { "name": "top", - "description": "

            camera frustum top plane

            \n", + "description": "

            y-coordinate of the frustum’s top plane. Defaults to -height / 20.

            \n", "type": "Number", "optional": true }, { "name": "near", - "description": "

            camera frustum near plane

            \n", + "description": "

            z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.

            \n", "type": "Number", "optional": true }, { "name": "far", - "description": "

            camera frustum far plane

            \n", + "description": "

            z-coordinate of the frustum’s far plane. Defaults to 10 * 800.

            \n", "type": "Number", "optional": true } ], "chainable": 1, "example": [ - "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n describe(\n 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateY(-0.2);\n rotateX(-0.3);\n push();\n translate(-15, 0, sin(frameCount / 30) * 25);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 25);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            " ], - "alt": "two 3D boxes move back and forth along same plane, rotating as mouse is dragged.", "class": "p5", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 441, - "description": "

            Creates a new p5.Camera object and sets it\nas the current (active) camera.

            \n

            The new camera is initialized with a default position\n(see camera())\nand a default perspective projection\n(see perspective()).\nIts properties can be controlled with the p5.Camera\nmethods.

            \n

            Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the global methods\ncamera(),\nperspective(), ortho(),\nand frustum() if it is the only camera\nin the scene.

            \n", + "line": 638, + "description": "

            Creates a new p5.Camera object and sets it\nas the current (active) camera.

            \n

            The new camera is initialized with a default position (0, 0, 800) and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as\nmyCamera.lookAt(0, 0, 0).

            \n

            Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the functions\ncamera(),\nperspective(),\northo(), and\nfrustum() if it's the only camera in the scene.

            \n

            Note: createCamera() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "createCamera", "return": { - "description": "The newly created camera object.", + "description": "the new camera.", "type": "p5.Camera" }, "example": [ - "\n
            \n// Creates a camera object and animates it around a box.\nlet camera;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n camera = createCamera();\n camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('An example that creates a camera and moves it around the box.');\n}\n\nfunction draw() {\n background(0);\n // The camera will automatically\n // rotate to look at [0, 0, 0].\n camera.lookAt(0, 0, 0);\n\n // The camera will move on the\n // x axis.\n camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n box(20);\n\n // A 'ground' box to give the viewer\n // a better idea of where the camera\n // is looking.\n translate(0, 50, 0);\n rotateX(HALF_PI);\n box(150, 150, 20);\n}\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n\n
            " ], - "alt": "An example that creates a camera and moves it around the box.", "class": "p5", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 605, - "description": "

            camera position value on x axis. default value is 0

            \n", + "line": 850, + "description": "

            The camera’s y-coordinate.

            \n

            By default, the camera’s y-coordinate is set to 0 in \"world\" space.

            \n", "itemtype": "property", "name": "eyeX", "type": "Number", "readonly": "", "example": [ - "\n\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeX = ' + cam.eyeX);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera moves. The text \"eyeX: X\" is written in black beneath the cube. X oscillates between -25 and 25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01);\n\n // Set the camera's position.\n cam.setPosition(x, -400, 800);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 634, - "description": "

            camera position value on y axis. default value is 0

            \n", + "line": 962, + "description": "

            The camera’s y-coordinate.

            \n

            By default, the camera’s y-coordinate is set to 0 in \"world\" space.

            \n", "itemtype": "property", "name": "eyeY", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeY = ' + cam.eyeY);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeY: -400\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeY)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera moves. The text \"eyeY: Y\" is written in black beneath the cube. Y oscillates between -374 and -425.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) - 400;\n\n // Set the camera's position.\n cam.setPosition(0, y, 800);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeY: ${round(cam.eyeY)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 662, - "description": "

            camera position value on z axis. default value is 800

            \n", + "line": 1074, + "description": "

            The camera’s z-coordinate.

            \n

            By default, the camera’s z-coordinate is set to 800 in \"world\" space.

            \n", "itemtype": "property", "name": "eyeZ", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeZ = ' + cam.eyeZ);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeZ: 800\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera moves. The text \"eyeZ: Z\" is written in black beneath the cube. Z oscillates between 700 and 900.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 800;\n\n // Set the camera's position.\n cam.setPosition(0, -400, z);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 690, - "description": "

            x coordinate representing center of the sketch

            \n", + "line": 1186, + "description": "

            The x-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerX is 0.

            \n", "itemtype": "property", "name": "centerX", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(1, 0, 0);\n div = createDiv('centerX = ' + cam.centerX);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerX: 10\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera shifts its focus. The text \"centerX: X\" is written in black beneath the cube. X oscillates between -15 and 35.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01) + 10;\n\n // Point the camera.\n cam.lookAt(x, 20, -30);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 719, - "description": "

            y coordinate representing center of the sketch

            \n", + "line": 1299, + "description": "

            The y-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerY is 0.

            \n", "itemtype": "property", "name": "centerY", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(0, 1, 0);\n div = createDiv('centerY = ' + cam.centerY);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerY: 20\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera shifts its focus. The text \"centerY: Y\" is written in black beneath the cube. Y oscillates between -5 and 45.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) + 20;\n\n // Point the camera.\n cam.lookAt(10, y, -30);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 748, - "description": "

            z coordinate representing center of the sketch

            \n", + "line": 1412, + "description": "

            The y-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerZ is 0.

            \n", "itemtype": "property", "name": "centerZ", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(0, 0, 1);\n div = createDiv('centerZ = ' + cam.centerZ);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerZ: -30\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera shifts its focus. The text \"centerZ: Z\" is written in black beneath the cube. Z oscillates between -55 and -25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 25 * sin(frameCount * 0.01) - 30;\n\n // Point the camera.\n cam.lookAt(10, 20, z);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 777, - "description": "

            x component of direction 'up' from camera

            \n", + "line": 1525, + "description": "

            The x-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its x-component is 0 in \"local\" space.

            \n", "itemtype": "property", "name": "upX", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upX = ' + cam.upX);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upX: X\" is written in black beneath it. X oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the x-component.\n let x = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 801, - "description": "

            y component of direction 'up' from camera

            \n", + "line": 1636, + "description": "

            The y-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its y-component is 1 in \"local\" space.

            \n", "itemtype": "property", "name": "upY", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upY = ' + cam.upY);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upY: 1\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube flips upside-down periodically. The text \"upY: Y\" is written in black beneath it. Y oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the y-component.\n let y = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 825, - "description": "

            z component of direction 'up' from camera

            \n", + "line": 1747, + "description": "

            The z-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its z-component is 0 in \"local\" space.

            \n", "itemtype": "property", "name": "upZ", "type": "Number", "readonly": "", "example": [ - "\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upZ = ' + cam.upZ);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            " + "\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upZ: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upZ: Z\" is written in black beneath it. Z oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the z-component.\n let z = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n\n
            " ], - "alt": "An example showing the use of camera object properties", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 853, - "description": "

            Sets a perspective projection.\nAccepts the same parameters as the global\nperspective().\nMore information on this function can be found there.

            \n", + "line": 1862, + "description": "

            Sets a perspective projection for the camera.

            \n

            In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in new\np5.Camera objects.

            \n

            myCamera.perspective() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling myCamera.perspective(0.5) sets the camera’s vertical\nfield of view to 0.5 radians. By default, fovy is calculated based on the\nsketch’s height and the camera’s default z-coordinate, which is 800. The\nformula for the default fovy is 2 * atan(height / 2 / 800).

            \n

            The second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling myCamera.perspective(0.5, 1.5) sets the camera’s field\nof view to 0.5 radians and aspect ratio to 1.5, which would make shapes\nappear thinner on a square canvas. By default, aspect is set to\nwidth / height.

            \n

            The third parameter, near, is the distance from the camera to the near\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places\nthe near plane 100 pixels from the camera. Any shapes drawn less than 100\npixels from the camera won’t be visible. By default, near is set to\n0.1 * 800, which is 1/10th the default distance between the camera and\nthe origin.

            \n

            The fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100, 10000)\nsets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,\nplaces the near plane 100 pixels from the camera, and places the far plane\n10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels\nfrom the camera won’t be visible. By default, far is set to 10 * 800,\nwhich is 10 times the default distance between the camera and the origin.

            \n", "itemtype": "method", "name": "perspective", + "params": [ + { + "name": "fovy", + "description": "

            camera frustum vertical field of view. Defaults to\n 2 * atan(height / 2 / 800).

            \n", + "type": "Number", + "optional": true + }, + { + "name": "aspect", + "description": "

            camera frustum aspect ratio. Defaults to\n width / height.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "near", + "description": "

            distance from the camera to the near clipping plane.\n Defaults to 0.1 * 800.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "far", + "description": "

            distance from the camera to the far clipping plane.\n Defaults to 10 * 800.

            \n", + "type": "Number", + "optional": true + } + ], "example": [ - "\n
            \n\n// drag the mouse to look around!\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // give it a perspective projection\n cam.perspective(PI / 3.0, width / height, 0.1, 500);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(-0.3);\n rotateY(-0.2);\n translate(0, 0, -50);\n\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin left and right.\n let x = 100 * sin(frameCount * 0.01);\n translate(x, 0, 0);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " ], - "alt": "two colored 3D boxes move back and forth, rotating as mouse is dragged.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 956, - "description": "

            Sets an orthographic projection.\nAccepts the same parameters as the global\northo().\nMore information on this function can be found there.

            \n", + "line": 2085, + "description": "

            Sets an orthographic projection for the camera.

            \n

            In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.

            \n

            myCamera.ortho() changes the camera’s perspective by changing its viewing\nfrustum from a truncated pyramid to a rectangular prism. The frustum is the\nvolume of space that’s visible to the camera. The camera is placed in front\nof the frustum and views everything within the frustum. myCamera.ortho()\nhas six optional parameters to define the viewing frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.ortho(-100, 100, 200, -200) creates a frustum that’s 200 pixels\nwide and 400 pixels tall. By default, these dimensions are set based on\nthe sketch’s width and height, as in\nmyCamera.ortho(-width / 2, width / 2, -height / 2, height / 2).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.ortho(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and\nends 1,000 pixels from the camera. By default, near and far are set to\n0 and max(width, height) + 800, respectively.

            \n", "itemtype": "method", "name": "ortho", + "params": [ + { + "name": "left", + "description": "

            x-coordinate of the frustum’s left plane. Defaults to -width / 2.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "right", + "description": "

            x-coordinate of the frustum’s right plane. Defaults to width / 2.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "bottom", + "description": "

            y-coordinate of the frustum’s bottom plane. Defaults to height / 2.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "top", + "description": "

            y-coordinate of the frustum’s top plane. Defaults to -height / 2.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "near", + "description": "

            z-coordinate of the frustum’s near plane. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "far", + "description": "

            z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.

            \n", + "type": "Number", + "optional": true + } + ], "example": [ - "\n
            \n\n// drag the mouse to look around!\n// there's no vanishing point\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // give it an orthographic projection\n cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(0.2);\n rotateY(-0.2);\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n push();\n // Calculate the box's coordinates.\n let x = 10 * sin(frameCount * 0.02 + i * 0.6);\n let z = -40 * i;\n // Translate the origin.\n translate(x, 0, z);\n // Draw the box.\n box(10);\n pop();\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " ], - "alt": "two 3D boxes move back and forth along same plane, rotating as mouse is dragged.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1040, - "description": "

            Sets the camera's frustum.\nAccepts the same parameters as the global\nfrustum().\nMore information on this function can be found there.

            \n", + "line": 2282, + "description": "

            Sets the camera's frustum.

            \n

            In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.

            \n

            myCamera.frustum() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.frustum(-100, 100, 200, -200) creates a frustum that’s 200\npixels wide and 400 pixels tall. By default, these coordinates are set\nbased on the sketch’s width and height, as in\nmyCamera.frustum(-width / 20, width / 20, height / 20, -height / 20).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.frustum(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends\n1,000 pixels from the camera. By default, near is set to 0.1 * 800, which\nis 1/10th the default distance between the camera and the origin. far is\nset to 10 * 800, which is 10 times the default distance between the\ncamera and the origin.

            \n", "itemtype": "method", "name": "frustum", + "params": [ + { + "name": "left", + "description": "

            x-coordinate of the frustum’s left plane. Defaults to -width / 20.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "right", + "description": "

            x-coordinate of the frustum’s right plane. Defaults to width / 20.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "bottom", + "description": "

            y-coordinate of the frustum’s bottom plane. Defaults to height / 20.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "top", + "description": "

            y-coordinate of the frustum’s top plane. Defaults to -height / 20.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "near", + "description": "

            z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "far", + "description": "

            z-coordinate of the frustum’s far plane. Defaults to 10 * 800.

            \n", + "type": "Number", + "optional": true + } + ], "example": [ - "\n
            \n\nlet cam;\n\nfunction setup() {\n x = createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // set its frustum\n cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateY(-0.2);\n rotateX(-0.3);\n push();\n translate(-15, 0, sin(frameCount / 30) * 25);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 25);\n box(30);\n pop();\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n cam2.frustum(-10, 10, -10, 10, 300, 350);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " ], - "alt": "two 3D boxes move back and forth along same plane, rotating as mouse is dragged.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1171, - "description": "

            Panning rotates the camera view to the left and right.

            \n", + "line": 2472, + "description": "

            Rotates the camera left and right.

            \n

            Panning rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.

            \n

            The parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.pan(0.001), rotates the camera to the\nright. Passing a negative angle, as in myCamera.pan(-0.001), rotates the\ncamera to the left.

            \n

            Note: Angles are interpreted based on the current\nangleMode().

            \n", "itemtype": "method", "name": "pan", "params": [ { "name": "angle", - "description": "

            amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).

            \n", + "description": "

            amount to rotate in the current\n angleMode().

            \n", "type": "Number" } ], "example": [ - "\n
            \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial pan angle\n cam.pan(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            " + "\n
            \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "camera view pans left and right across a series of rotating 3D boxes.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1231, - "description": "

            Tilting rotates the camera view up and down.

            \n", + "line": 2535, + "description": "

            Rotates the camera up and down.

            \n

            Tilting rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.

            \n

            The parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.tilt(0.001), rotates the camera down.\nPassing a negative angle, as in myCamera.tilt(-0.001), rotates the camera\nup.

            \n

            Note: Angles are interpreted based on the current\nangleMode().

            \n", "itemtype": "method", "name": "tilt", "params": [ { "name": "angle", - "description": "

            amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).

            \n", + "description": "

            amount to rotate in the current\n angleMode().

            \n", "type": "Number" } ], "example": [ - "\n
            \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial tilt\n cam.tilt(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.tilt(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateY(frameCount * 0.01);\n translate(0, -100, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n}\n\n
            " + "\n
            \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.tilt(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "camera view tilts up and down across a series of rotating 3D boxes.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1291, - "description": "

            Reorients the camera to look at a position in world space.

            \n", + "line": 2598, + "description": "

            Points the camera at a location.

            \n

            myCamera.lookAt() changes the camera’s orientation without changing its\nposition.

            \n

            The parameters, x, y, and z, are the coordinates in \"world\" space\nwhere the camera should point. For example, calling\nmyCamera.lookAt(10, 20, 30) points the camera at the coordinates\n(10, 20, 30).

            \n", "itemtype": "method", "name": "lookAt", "params": [ { "name": "x", - "description": "

            x position of a point in world space

            \n", + "description": "

            x-coordinate of the position where the camera should look in \"world\" space.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y position of a point in world space

            \n", + "description": "

            y-coordinate of the position where the camera should look in \"world\" space.

            \n", "type": "Number" }, { "name": "z", - "description": "

            z position of a point in world space

            \n", + "description": "

            z-coordinate of the position where the camera should look in \"world\" space.

            \n", "type": "Number" } ], "example": [ - "\n
            \n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // look at a new random point every 60 frames\n if (frameCount % 60 === 0) {\n cam.lookAt(random(-100, 100), random(-50, 50), 0);\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            " + "\n
            \n\n// Double-click to look at a different cube.\n\nlet cam;\nlet isLookingLeft = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(-30, 0, 0);\n\n describe(\n 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box on the left.\n push();\n // Translate the origin to the left.\n translate(-30, 0, 0);\n // Style the box.\n fill(255, 0, 0);\n // Draw the box.\n box(20);\n pop();\n\n // Draw the box on the right.\n push();\n // Translate the origin to the right.\n translate(30, 0, 0);\n // Style the box.\n fill(0, 0, 255);\n // Draw the box.\n box(20);\n pop();\n}\n\n// Change the camera's focus when the user double-clicks.\nfunction doubleClicked() {\n if (isLookingLeft === true) {\n cam.lookAt(30, 0, 0);\n isLookingLeft = false;\n } else {\n cam.lookAt(-30, 0, 0);\n isLookingLeft = true;\n }\n}\n\n
            " ], - "alt": "camera view of rotating 3D cubes changes to look at a new random\npoint every second .", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1360, - "description": "

            Sets the camera's position and orientation.\nAccepts the same parameters as the global\ncamera().\nMore information on this function can be found there.

            \n", + "line": 2695, + "description": "

            Sets the position and orientation of the camera.

            \n

            myCamera.camera() allows objects to be viewed from different angles. It\nhas nine parameters that are all optional.

            \n

            The first three parameters, x, y, and z, are the coordinates of the\ncamera’s position in \"world\" space. For example, calling\nmyCamera.camera(0, 0, 0) places the camera at the origin (0, 0, 0). By\ndefault, the camera is placed at (0, 0, 800).

            \n

            The next three parameters, centerX, centerY, and centerZ are the\ncoordinates of the point where the camera faces in \"world\" space. For\nexample, calling myCamera.camera(0, 0, 0, 10, 20, 30) places the camera\nat the origin (0, 0, 0) and points it at (10, 20, 30). By default, the\ncamera points at the origin (0, 0, 0).

            \n

            The last three parameters, upX, upY, and upZ are the components of\nthe \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s\ny-axis. For example, calling\nmyCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the\norigin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector\nto (0, -1, 0) which is like holding it upside-down. By default, the \"up\"\nvector is (0, 1, 0).

            \n", "itemtype": "method", "name": "camera", + "params": [ + { + "name": "x", + "description": "

            x-coordinate of the camera. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "y", + "description": "

            y-coordinate of the camera. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "z", + "description": "

            z-coordinate of the camera. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "centerX", + "description": "

            x-coordinate of the point the camera faces. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "centerY", + "description": "

            y-coordinate of the point the camera faces. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "centerZ", + "description": "

            z-coordinate of the point the camera faces. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "upX", + "description": "

            x-component of the camera’s \"up\" vector. Defaults to 0.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "upY", + "description": "

            x-component of the camera’s \"up\" vector. Defaults to 1.

            \n", + "type": "Number", + "optional": true + }, + { + "name": "upZ", + "description": "

            z-component of the camera’s \"up\" vector. Defaults to 0.

            \n", + "type": "Number", + "optional": true + } + ], "example": [ - "\n
            \n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // Create a camera.\n // createCamera() sets the newly created camera as\n // the current (active) camera.\n cam = createCamera();\n}\n\nfunction draw() {\n background(204);\n // Move the camera away from the plane by a sin wave\n cam.camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n plane(10, 10);\n}\n\n
            ", - "\n
            \n\n// move slider to see changes!\n// sliders control the first 6 parameters of camera()\n\nlet sliderGroup = [];\nlet X;\nlet Y;\nlet Z;\nlet centerX;\nlet centerY;\nlet centerZ;\nlet h = 20;\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // create sliders\n for (var i = 0; i < 6; i++) {\n if (i === 2) {\n sliderGroup[i] = createSlider(10, 400, 200);\n } else {\n sliderGroup[i] = createSlider(-400, 400, 0);\n }\n h = map(i, 0, 6, 5, 85);\n sliderGroup[i].position(10, height + h);\n sliderGroup[i].style('width', '80px');\n }\n}\n\nfunction draw() {\n background(60);\n // assigning sliders' value to each parameters\n X = sliderGroup[0].value();\n Y = sliderGroup[1].value();\n Z = sliderGroup[2].value();\n centerX = sliderGroup[3].value();\n centerY = sliderGroup[4].value();\n centerZ = sliderGroup[5].value();\n cam.camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n stroke(255);\n fill(255, 102, 94);\n box(85);\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right: (1200, -600, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the right: (1200, 0, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n let x = 1200 * cos(frameCount * 0.01);\n let y = -600 * sin(frameCount * 0.01);\n cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " ], - "alt": "An interactive example of a red cube with 3 sliders for moving it across x, y,\nz axis and 3 sliders for shifting its center.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1508, - "description": "

            Move camera along its local axes while maintaining current camera orientation.

            \n", + "line": 2923, + "description": "

            Moves the camera along its \"local\" axes without changing its orientation.

            \n

            The parameters, x, y, and z, are the distances the camera should\nmove. For example, calling myCamera.move(10, 20, 30) moves the camera 10\npixels to the right, 20 pixels down, and 30 pixels backward in its \"local\"\nspace.

            \n", "itemtype": "method", "name": "move", "params": [ { "name": "x", - "description": "

            amount to move along camera's left-right axis

            \n", + "description": "

            distance to move along the camera’s \"local\" x-axis.

            \n", "type": "Number" }, { "name": "y", - "description": "

            amount to move along camera's up-down axis

            \n", + "description": "

            distance to move along the camera’s \"local\" y-axis.

            \n", "type": "Number" }, { "name": "z", - "description": "

            amount to move along camera's forward-backward axis

            \n", + "description": "

            distance to move along the camera’s \"local\" z-axis.

            \n", "type": "Number" } ], "example": [ - "\n
            \n\n// see the camera move along its own axes while maintaining its orientation\nlet cam;\nlet delta = 0.5;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // move the camera along its local axes\n cam.move(delta, delta, 0);\n\n // every 100 frames, switch direction\n if (frameCount % 150 === 0) {\n delta *= -1;\n }\n\n translate(-10, -10, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n}\n\n
            " + "\n
            \n\n// Click the canvas to begin detecting key presses.\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera along its \"local\" axes\n // when the user presses certain keys.\n if (keyIsPressed === true) {\n\n // Move horizontally.\n if (keyCode === LEFT_ARROW) {\n cam.move(-1, 0, 0);\n }\n if (keyCode === RIGHT_ARROW) {\n cam.move(1, 0, 0);\n }\n\n // Move vertically.\n if (keyCode === UP_ARROW) {\n cam.move(0, -1, 0);\n }\n if (keyCode === DOWN_ARROW) {\n cam.move(0, 1, 0);\n }\n\n // Move in/out of the screen.\n if (key === 'i') {\n cam.move(0, 0, -1);\n }\n if (key === 'o') {\n cam.move(0, 0, 1);\n }\n }\n\n // Draw the box.\n box();\n}\n\n
            " ], - "alt": "camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1582, - "description": "

            Set camera position in world-space while maintaining current camera\norientation.

            \n", + "line": 3020, + "description": "

            Sets the camera’s position in \"world\" space without changing its\norientation.

            \n

            The parameters, x, y, and z, are the coordinates where the camera\nshould be placed. For example, calling myCamera.setPosition(10, 20, 30)\nplaces the camera at coordinates (10, 20, 30) in \"world\" space.

            \n", "itemtype": "method", "name": "setPosition", "params": [ { "name": "x", - "description": "

            x position of a point in world space

            \n", + "description": "

            x-coordinate in \"world\" space.

            \n", "type": "Number" }, { "name": "y", - "description": "

            y position of a point in world space

            \n", + "description": "

            y-coordinate in \"world\" space.

            \n", "type": "Number" }, { "name": "z", - "description": "

            z position of a point in world space

            \n", + "description": "

            z-coordinate in \"world\" space.

            \n", "type": "Number" } ], "example": [ - "\n
            \n\n// press '1' '2' or '3' keys to set camera position\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // '1' key\n if (keyIsDown(49)) {\n cam.setPosition(30, 0, 80);\n }\n // '2' key\n if (keyIsDown(50)) {\n cam.setPosition(0, 0, 80);\n }\n // '3' key\n if (keyIsDown(51)) {\n cam.setPosition(-30, 0, 80);\n }\n\n box(20);\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 700;\n cam2.setPosition(0, 0, z);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            " ], - "alt": "camera position changes as the user presses keys, altering view of a 3D box", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1646, - "description": "

            Copies information about the argument camera's view and projection to\nthe target camera. If the target camera is active, it will be reflected\non the screen.

            \n", + "line": 3174, + "description": "

            Sets the camera’s position, orientation, and projection by copying another\ncamera.

            \n

            The parameter, cam, is the p5.Camera object to copy. For example, calling\ncam2.set(cam1) will set cam2 using cam1’s configuration.

            \n", "itemtype": "method", "name": "set", "params": [ { "name": "cam", - "description": "

            source camera

            \n", + "description": "

            camera to copy.

            \n", "type": "p5.Camera" } ], "example": [ - "\n
            \n\nlet cam, initialCam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // Set the initial state to initialCamera and set it to the camera\n // used for drawing. Then set cam to be the active camera.\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n initialCam = createCamera();\n initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);\n initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam.set(initialCam);\n\n setCamera(cam);\n}\n\nfunction draw() {\n orbitControl();\n background(255);\n box(50);\n translate(0, 0, -25);\n plane(100);\n}\n\nfunction doubleClicked(){\n // Double-click to return the camera to its initial position.\n cam.set(initialCam);\n}\n\n
            " + "\n
            \n\n// Double-click to \"reset\" the camera zoom.\n\nlet cam1;\nlet cam2;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n cam1 = createCamera();\n\n // Place the camera at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Copy cam1's configuration.\n cam2.set(cam1);\n\n describe(\n 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n cam2.move(0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n// \"Reset\" the camera when the user double-clicks.\nfunction doubleClicked() {\n cam2.set(cam1);\n}" ], - "alt": "Prepare two cameras. One is the camera that sets the initial state,\nand the other is the camera that moves with interaction.\nDraw a plane and a box on top of it, operate the camera using orbitControl().\nDouble-click to set the camera in the initial state and return to\nthe initial state.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 1719, - "description": "

            For the cameras cam0 and cam1 with the given arguments, their view are combined\nwith the parameter amt that represents the quantity, and the obtained view is applied.\nFor example, if cam0 is looking straight ahead and cam1 is looking straight\nto the right and amt is 0.5, the applied camera will look to the halfway\nbetween front and right.\nIf the applied camera is active, the applied result will be reflected on the screen.\nWhen applying this function, all cameras involved must have exactly the same projection\nsettings. For example, if one is perspective, ortho, frustum, the other two must also be\nperspective, ortho, frustum respectively. However, if all cameras have ortho settings,\ninterpolation is possible if the ratios of left, right, top and bottom are equal to each other.\nFor example, when it is changed by orbitControl().

            \n", + "line": 3252, + "description": "

            Sets the camera’s position and orientation to values that are in-between\nthose of two other cameras.

            \n

            myCamera.slerp() uses spherical linear interpolation to calculate a\nposition and orientation that’s in-between two other cameras. Doing so is\nhelpful for transitioning smoothly between two perspectives.

            \n

            The first two parameters, cam0 and cam1, are the p5.Camera objects\nthat should be used to set the current camera.

            \n

            The third parameter, amt, is the amount to interpolate between cam0 and\ncam1. 0.0 keeps the camera’s position and orientation equal to cam0’s,\n0.5 sets them halfway between cam0’s and cam1’s , and 1.0 sets the\nposition and orientation equal to cam1’s.

            \n

            For example, calling myCamera.slerp(cam0, cam1, 0.1) sets cam’s position\nand orientation very close to cam0’s. Calling\nmyCamera.slerp(cam0, cam1, 0.9) sets cam’s position and orientation very\nclose to cam1’s.

            \n

            Note: All of the cameras must use the same projection.

            \n", "itemtype": "method", "name": "slerp", "params": [ { "name": "cam0", - "description": "

            first p5.Camera

            \n", + "description": "

            first camera.

            \n", "type": "p5.Camera" }, { "name": "cam1", - "description": "

            second p5.Camera

            \n", + "description": "

            second camera.

            \n", "type": "p5.Camera" }, { "name": "amt", - "description": "

            amount to use for interpolation during slerp

            \n", + "description": "

            amount of interpolation between 0.0 (cam0) and 1.0 (cam1).

            \n", "type": "Number" } ], "example": [ - "\n
            \n\nlet cam0, cam1, cam;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // camera for slerp.\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // cam0 is looking at the cube from the front.\n cam0 = createCamera();\n cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // cam1 is pointing straight to the right in the cube\n // at the same position as cam0 by doing a pan(-PI/2).\n cam1 = createCamera();\n cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam1.pan(-PI/2);\n\n // we only use cam.\n setCamera(cam);\n}\n\nfunction draw() {\n // calculate amount.\n const amt = 0.5 - 0.5 * cos(frameCount * TAU / 120);\n // slerp cam0 and cam1 with amt, set to cam.\n // When amt moves from 0 to 1, cam moves from cam0 to cam1,\n // shaking the camera to the right.\n cam.slerp(cam0, cam1, amt);\n\n background(255);\n // Every time the camera turns right, the cube drifts left.\n box(40);\n}\n\n
            ", - "\n
            \n\nlet cam, lastCam, initialCam;\nlet countForReset = 30;\n// This sample uses orbitControl() to move the camera.\n// Double-clicking the canvas restores the camera to its initial state.\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // main camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // Camera for recording loc info before reset\n lastCam = createCamera();\n lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // Camera for recording the initial state\n initialCam = createCamera();\n initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n\n setCamera(cam); // set main camera\n}\n\nfunction draw() {\n if (countForReset < 30) {\n // if the reset count is less than 30,\n // it will move closer to the original camera as it increases.\n countForReset++;\n cam.slerp(lastCam, initialCam, countForReset / 30);\n } else {\n // if the count is 30,\n // you can freely move the main camera with orbitControl().\n orbitControl();\n }\n\n background(255);\n box(40);\n}\n// A double-click sets countForReset to 0 and initiates a reset.\nfunction doubleClicked() {\n if (countForReset === 30) {\n countForReset = 0;\n lastCam.set(cam);\n }\n}\n\n
            " + "\n
            \n\nlet cam;\nlet cam0;\nlet cam1;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the main camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Create the first camera.\n // Keep its default settings.\n cam0 = createCamera();\n\n // Create the second camera.\n cam1 = createCamera();\n\n // Place it at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Set the current camera to cam.\n setCamera(cam);\n\n describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the amount to interpolate between cam0 and cam1.\n let amt = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Update the main camera's position and orientation.\n cam.slerp(cam0, cam1, amt);\n\n box();\n}\n\n
            " ], - "alt": "There is a camera, drawing a cube. The camera can be moved freely with\norbitControl(). Double-click to smoothly return the camera to its initial state.\nThe camera cannot be moved during that time.", "class": "p5.Camera", "module": "3D", "submodule": "Camera" }, { "file": "src/webgl/p5.Camera.js", - "line": 2332, - "description": "

            Sets the current (active) camera of a 3D sketch.\nAllows for switching between multiple cameras.

            \n", + "line": 3819, + "description": "

            Sets the current (active) camera of a 3D sketch.

            \n

            setCamera() allows for switching between multiple cameras created with\ncreateCamera().

            \n

            Note: setCamera() can only be used in WebGL mode.

            \n", "itemtype": "method", "name": "setCamera", "params": [ { "name": "cam", - "description": "

            p5.Camera object

            \n", + "description": "

            camera that should be made active.

            \n", "type": "p5.Camera" } ], "example": [ - "\n
            \n\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n\n cam1 = createCamera();\n cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam2 = createCamera();\n cam2.setPosition(30, 0, 50);\n cam2.lookAt(0, 0, 0);\n cam2.ortho(-50, 50, -50, 50, 0, 200);\n\n // set variable for previously active camera:\n currentCamera = 1;\n\n describe(\n 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // every 100 frames, switch between the two cameras\n if (frameCount % 100 === 0) {\n if (currentCamera === 1) {\n setCamera(cam1);\n currentCamera = 0;\n } else {\n setCamera(cam2);\n currentCamera = 1;\n }\n }\n\n // camera 1:\n cam1.lookAt(0, 0, 0);\n cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\n\n drawBoxes();\n}\n\nfunction drawBoxes() {\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            " + "\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n\n
            " ], - "alt": "Canvas switches between two camera views, each showing a series of spinning\n3D boxes.", "class": "p5", "module": "3D", "submodule": "Camera" @@ -24677,7 +24617,7 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 922, + "line": 923, "description": "

            After having previously called\nbegin(), this method stops drawing\nfunctions from going to the framebuffer's texture, allowing them to go\nright to the canvas again. After this, one can read from the framebuffer's\ntexture.

            \n", "itemtype": "method", "name": "end", @@ -24686,7 +24626,7 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 951, + "line": 952, "description": "

            Run a function while drawing to the framebuffer rather than to its canvas.\nThis is equivalent to calling framebuffer.begin(), running the function,\nand then calling framebuffer.end(), but ensures that one never\naccidentally forgets begin or end.

            \n", "itemtype": "method", "name": "draw", @@ -24706,14 +24646,14 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 1001, + "line": 1002, "description": "

            Call this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n", "class": "p5.Framebuffer", "module": "Rendering" }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 1030, + "line": 1031, "description": "

            Get a region of pixels from the canvas in the form of a\np5.Image, or a single pixel as an array of\nnumbers.

            \n

            Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If the Framebuffer has been set up to not store alpha values, then\nonly [R,G,B] will be returned. If no parameters are specified, the entire\nimage is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().

            \n", "itemtype": "method", "name": "get", @@ -24725,7 +24665,7 @@ "module": "Rendering", "overloads": [ { - "line": 1030, + "line": 1031, "params": [ { "name": "x", @@ -24754,7 +24694,7 @@ } }, { - "line": 1051, + "line": 1052, "params": [], "return": { "description": "the whole p5.Image", @@ -24762,7 +24702,7 @@ } }, { - "line": 1055, + "line": 1056, "params": [ { "name": "x", @@ -24784,7 +24724,7 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 1149, + "line": 1150, "description": "

            Call this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n

            This will also clear the depth buffer so that any future drawing done\nafterwards will go on top.

            \n", "example": [ "\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n}\n\nfunction draw() {\n noStroke();\n lights();\n\n // Draw a sphere to the framebuffer\n framebuffer.begin();\n background(0);\n sphere(25);\n framebuffer.end();\n\n // Load its pixels and draw a gradient over the lower half of the canvas\n framebuffer.loadPixels();\n for (let y = height/2; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = (y * width + x) * 4;\n framebuffer.pixels[idx] = (x / width) * 255;\n framebuffer.pixels[idx + 1] = (y / height) * 255;\n framebuffer.pixels[idx + 2] = 255;\n framebuffer.pixels[idx + 3] = 255;\n }\n }\n framebuffer.updatePixels();\n\n // Draw a cube on top of the pixels we just wrote\n framebuffer.begin();\n push();\n translate(20, 20);\n rotateX(0.5);\n rotateY(0.5);\n box(20);\n pop();\n framebuffer.end();\n\n image(framebuffer, -width/2, -height/2);\n noLoop();\n}\n\n
            " @@ -24795,7 +24735,7 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 1283, + "line": 1284, "description": "

            A texture with the color information of the framebuffer. Pass this (or the\nframebuffer itself) to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n", "itemtype": "property", "name": "color", @@ -24809,7 +24749,7 @@ }, { "file": "src/webgl/p5.Framebuffer.js", - "line": 1325, + "line": 1326, "description": "

            A texture with the depth information of the framebuffer. If the framebuffer\nwas created with { depth: false } in its settings, then this property will\nbe undefined. Pass this to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n", "itemtype": "property", "name": "depth", @@ -25031,23 +24971,23 @@ }, { "file": "src/webgl/p5.Shader.js", - "line": 106, - "description": "

            Shaders belong to the main canvas or a p5.Graphics. Once they are compiled,\nthey can only be used in the context they were compiled on.

            \n

            Use this method to make a new copy of a shader that gets compiled on a\ndifferent context.

            \n", + "line": 211, + "description": "

            Copies the shader from one drawing context to another.

            \n

            Each p5.Shader object must be compiled by calling\nshader() before it can run. Compilation happens\nin a drawing context which is usually the main canvas or an instance of\np5.Graphics. A shader can only be used in the\ncontext where it was compiled. The copyToContext() method compiles the\nshader again and copies it to another drawing context where it can be\nreused.

            \n

            The parameter, context, is the drawing context where the shader will be\nused. The shader can be copied to an instance of\np5.Graphics, as in\nmyShader.copyToContext(pg). The shader can also be copied from a\np5.Graphics object to the main canvas using\nthe window variable, as in myShader.copyToContext(window).

            \n

            Note: A p5.Shader object created with\ncreateShader(),\ncreateFilterShader(), or\nloadShader()\ncan be used directly with a p5.Framebuffer\nobject created with\ncreateFramebuffer(). Both objects\nhave the same context as the main canvas.

            \n", "itemtype": "method", "name": "copyToContext", "params": [ { "name": "context", - "description": "

            The graphic or instance to copy this shader to.\nPass window if you need to copy to the main canvas.

            \n", + "description": "

            WebGL context for the copied shader.

            \n", "type": "p5|p5.Graphics" } ], "return": { - "description": "A new shader on the target context.", + "description": "new shader compiled for the target context.", "type": "p5.Shader" }, "example": [ - "\n
            \n\nlet graphic = createGraphics(200, 200, WEBGL);\nlet graphicShader = graphic.createShader(vert, frag);\ngraphic.shader(graphicShader); // Use graphicShader on the graphic\n\nlet mainShader = graphicShader.copyToContext(window);\nshader(mainShader); // Use `mainShader` on the main canvas\n\n
            " + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(window);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}\n\n
            " ], "class": "p5.Shader", "module": "3D", @@ -25055,27 +24995,26 @@ }, { "file": "src/webgl/p5.Shader.js", - "line": 361, - "description": "

            Used to set the uniforms of a\np5.Shader object.

            \n

            Uniforms are used as a way to provide shader programs\n(which run on the GPU) with values from a sketch\n(which runs on the CPU).

            \n

            Here are some examples of uniforms you can make:

            \n
              \n
            • booleans
                \n
              • Example: setUniform('x', true) becomes uniform float x with the value 1.0
                • \n
              \n
              • \n
            • numbers
                \n
              • Example: setUniform('x', -2) becomes uniform float x with the value -2.0
                • \n
              \n
              • \n
            • arrays of numbers
                \n
              • Example: setUniform('x', [0, 0.5, 1]) becomes uniform vec3 x with the value vec3(0.0, 0.5, 1.0)
                • \n
              \n
              • \n
            • a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture
                \n
              • Example: setUniform('x', img) becomes uniform sampler2D x
                • \n
              \n
              • \n
            \n", + "line": 622, + "description": "

            Sets the shader’s uniform (global) variables.

            \n

            Shader programs run on the computer’s graphics processing unit (GPU).\nThey live in part of the computer’s memory that’s completely separate\nfrom the sketch that runs them. Uniforms are global variables within a\nshader program. They provide a way to pass values from a sketch running\non the CPU to a shader program running on the GPU.

            \n

            The first parameter, uniformName, is a string with the uniform’s name.\nFor the shader above, uniformName would be 'r'.

            \n

            The second parameter, data, is the value that should be used to set the\nuniform. For example, calling myShader.setUniform('r', 0.5) would set\nthe r uniform in the shader above to 0.5. data should match the\nuniform’s type. Numbers, strings, booleans, arrays, and many types of\nimages can all be passed to a shader with setUniform().

            \n", "itemtype": "method", "name": "setUniform", "chainable": 1, "params": [ { "name": "uniformName", - "description": "

            the name of the uniform.\nMust correspond to the name used in the vertex and fragment shaders

            \n", + "description": "

            name of the uniform. Must match the name\n used in the vertex and fragment shaders.

            \n", "type": "String" }, { "name": "data", - "description": "

            The value to assign to the uniform. This can be\na boolean (true/false), a number, an array of numbers, or\nan image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)

            \n", + "description": "

            value to assign to the uniform. Must match the uniform’s data type.

            \n", "type": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture" } ], "example": [ - "\n
            \n\n// Click within the image to toggle the value of uniforms\n// Note: for an alternative approach to the same example,\n// involving toggling between shaders please refer to:\n// https://p5js.org/reference/#/p5/shader\n\nlet grad;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n shader(grad);\n noStroke();\n\n describe(\n 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'\n );\n}\n\nfunction draw() {\n // update the offset values for each scenario,\n // moving the \"grad\" shader in either vertical or\n // horizontal direction each with differing colors\n\n if (showRedGreen === true) {\n grad.setUniform('colorCenter', [1, 0, 0]);\n grad.setUniform('colorBackground', [0, 1, 0]);\n grad.setUniform('offset', [sin(millis() / 2000), 1]);\n } else {\n grad.setUniform('colorCenter', [1, 0.5, 0]);\n grad.setUniform('colorBackground', [0.226, 0, 0.615]);\n grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            " + "\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            " ], - "alt": "canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.", "class": "p5.Shader", "module": "3D", "submodule": "Material" @@ -29814,159 +29753,67 @@ }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:13" + "line": " src/core/environment.js:590" }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:92" + "line": " src/core/environment.js:621" }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:131" + "line": " src/core/environment.js:652" }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:186" + "line": " src/core/environment.js:680" }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:265" + "line": " src/core/environment.js:708" }, { "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:359" + "line": " src/core/environment.js:708" }, { - "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:399" + "message": "replacing incorrect tag: returns with return", + "line": " src/core/environment.js:1050" }, { - "message": "unknown tag: alt", - "line": " src/core/shape/curves.js:494" + "message": "replacing incorrect tag: returns with return", + "line": " src/core/environment.js:1069" }, { "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:20" + "line": " src/core/environment.js:1199" }, { - "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:71" + "message": "replacing incorrect tag: function with method", + "line": " src/core/internationalization.js:105" }, { - "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:297" + "message": "replacing incorrect tag: returns with return", + "line": " src/core/internationalization.js:105" }, { "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:419" + "line": " src/core/main.js:41" }, { "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:464" + "line": " src/core/main.js:82" }, { "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:528" + "line": " src/core/main.js:113" }, { "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:591" + "line": " src/core/main.js:450" }, { - "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:772" - }, - { - "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:837" - }, - { - "message": "unknown tag: alt", - "line": " src/core/shape/vertex.js:930" - }, - { - "message": "unknown tag: alt", - "line": " src/core/constants.js:88" - }, - { - "message": "unknown tag: alt", - "line": " src/core/constants.js:106" - }, - { - "message": "unknown tag: alt", - "line": " src/core/constants.js:124" - }, - { - "message": "unknown tag: alt", - "line": " src/core/constants.js:142" - }, - { - "message": "unknown tag: alt", - "line": " src/core/constants.js:160" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:590" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:621" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:652" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:680" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:708" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:708" - }, - { - "message": "replacing incorrect tag: returns with return", - "line": " src/core/environment.js:1050" - }, - { - "message": "replacing incorrect tag: returns with return", - "line": " src/core/environment.js:1069" - }, - { - "message": "unknown tag: alt", - "line": " src/core/environment.js:1199" - }, - { - "message": "replacing incorrect tag: function with method", - "line": " src/core/internationalization.js:105" - }, - { - "message": "replacing incorrect tag: returns with return", - "line": " src/core/internationalization.js:105" - }, - { - "message": "unknown tag: alt", - "line": " src/core/main.js:41" - }, - { - "message": "unknown tag: alt", - "line": " src/core/main.js:82" - }, - { - "message": "unknown tag: alt", - "line": " src/core/main.js:113" - }, - { - "message": "unknown tag: alt", - "line": " src/core/main.js:450" - }, - { - "message": "unknown tag: name", - "line": " src/core/p5.Element.js:56" + "message": "unknown tag: name", + "line": " src/core/p5.Element.js:56" }, { "message": "unknown tag: name", @@ -29992,82 +29839,6 @@ "message": "unknown tag: alt", "line": " src/core/p5.Graphics.js:135" }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:7" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:34" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:87" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:115" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:137" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:158" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:179" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:200" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:231" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:267" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:288" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:309" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:331" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:351" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:379" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:408" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:448" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:490" - }, - { - "message": "unknown tag: alt", - "line": " src/core/reference.js:512" - }, { "message": "unknown tag: alt", "line": " src/core/rendering.js:15" @@ -30132,65 +29903,25 @@ "message": "unknown tag: alt", "line": " src/core/structure.js:494" }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:11" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:197" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:222" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:261" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:299" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:337" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:377" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:451" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:490" - }, - { - "message": "unknown tag: alt", - "line": " src/core/transform.js:529" - }, { "message": "replacing incorrect tag: returns with return", - "line": " src/dom/dom.js:2610" + "line": " src/dom/dom.js:2617" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/dom/dom.js:2696" + "line": " src/dom/dom.js:2703" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/dom/dom.js:2867" + "line": " src/dom/dom.js:2874" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/dom/dom.js:2954" + "line": " src/dom/dom.js:2961" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/dom/dom.js:3092" + "line": " src/dom/dom.js:3099" }, { "message": "replacing incorrect tag: returns with return", @@ -30276,321 +30007,25 @@ "message": "unknown tag: name", "line": " src/typography/p5.Font.js:51" }, - { - "message": "unknown tag: alt", - "line": " src/webgl/3d_primitives.js:13" - }, { "message": "replacing incorrect tag: returns with return", - "line": " src/webgl/3d_primitives.js:89" + "line": " src/webgl/3d_primitives.js:266" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/webgl/3d_primitives.js:102" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/3d_primitives.js:102" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/3d_primitives.js:183" + "line": " src/webgl/3d_primitives.js:520" }, { "message": "replacing incorrect tag: returns with return", "line": " src/webgl/GeometryBuilder.js:122" }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:11" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:378" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:378" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:378" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:378" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:378" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/interaction.js:602" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:10" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:10" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:10" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:134" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:246" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:373" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:497" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:497" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:602" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:649" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:693" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:794" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/light.js:1155" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/loading.js:12" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/loading.js:12" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/loading.js:775" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:12" - }, { "message": "replacing incorrect tag: returns with return", - "line": " src/webgl/material.js:115" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:115" + "line": " src/webgl/material.js:173" }, { "message": "replacing incorrect tag: returns with return", - "line": " src/webgl/material.js:202" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:331" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:440" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:529" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:529" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:529" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:529" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:674" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:674" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:752" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:824" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:869" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:869" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:869" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:982" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:1053" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/material.js:1139" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:13" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:121" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:197" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:306" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:369" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:441" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:511" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:605" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:634" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:662" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:690" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:719" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:748" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:777" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:801" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:825" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:853" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:956" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1040" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1171" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1231" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1291" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1360" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1360" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1508" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1582" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1646" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1719" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:1719" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Camera.js:2332" + "line": " src/webgl/material.js:429" }, { "message": "unknown tag: alt", @@ -30610,19 +30045,19 @@ }, { "message": "unknown tag: alt", - "line": " src/webgl/p5.Framebuffer.js:951" + "line": " src/webgl/p5.Framebuffer.js:952" }, { "message": "unknown tag: alt", - "line": " src/webgl/p5.Framebuffer.js:1149" + "line": " src/webgl/p5.Framebuffer.js:1150" }, { "message": "unknown tag: alt", - "line": " src/webgl/p5.Framebuffer.js:1283" + "line": " src/webgl/p5.Framebuffer.js:1284" }, { "message": "unknown tag: alt", - "line": " src/webgl/p5.Framebuffer.js:1325" + "line": " src/webgl/p5.Framebuffer.js:1326" }, { "message": "unknown tag: memberof", @@ -30714,11 +30149,7 @@ }, { "message": "replacing incorrect tag: returns with return", - "line": " src/webgl/p5.Shader.js:106" - }, - { - "message": "unknown tag: alt", - "line": " src/webgl/p5.Shader.js:361" + "line": " src/webgl/p5.Shader.js:211" }, { "message": "replacing incorrect tag: function with method", @@ -30968,6 +30399,10 @@ "message": "Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee ecridge.com/bezier.pdf for an explanation of the method.", "line": " src/core/p5.Renderer2D.js:535" }, + { + "message": "Missing item type\nPrints a message to the web browser's console.\n\nThe console\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a `console.log()` statement while studying how a section of\ncode works:\n\n\nif (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n // Game logic.\n}\n\n\n`console.error()` is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:\n\n\n// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n// Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n", + "line": " src/core/reference.js:2024" + }, { "message": "Missing item type\nargs[0] is expected to be renderer\nargs[1] is expected to be canvas", "line": " src/core/rendering.js:304" @@ -31022,15 +30457,15 @@ }, { "message": "Missing item type", - "line": " src/dom/dom.js:4055" + "line": " src/dom/dom.js:4062" }, { "message": "Missing item type", - "line": " src/dom/dom.js:5067" + "line": " src/dom/dom.js:5074" }, { "message": "Missing item type", - "line": " src/dom/dom.js:5138" + "line": " src/dom/dom.js:5145" }, { "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values", @@ -31038,11 +30473,11 @@ }, { "message": "Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.", - "line": " src/events/keyboard.js:291" + "line": " src/events/keyboard.js:785" }, { "message": "Missing item type\nThe _areDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.", - "line": " src/events/keyboard.js:377" + "line": " src/events/keyboard.js:911" }, { "message": "Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.", @@ -31170,75 +30605,75 @@ }, { "message": "Missing item type\nMultiplies a vector by a scalar and returns a new vector.", - "line": " src/math/p5.Vector.js:3439" + "line": " src/math/p5.Vector.js:3431" }, { "message": "Missing item type\nRotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.", - "line": " src/math/p5.Vector.js:3491" + "line": " src/math/p5.Vector.js:3487" }, { "message": "Missing item type\nDivides a vector by a scalar and returns a new vector.", - "line": " src/math/p5.Vector.js:3518" + "line": " src/math/p5.Vector.js:3516" }, { "message": "Missing item type\nCalculates the dot product of two vectors.", - "line": " src/math/p5.Vector.js:3571" + "line": " src/math/p5.Vector.js:3573" }, { "message": "Missing item type\nCalculates the cross product of two vectors.", - "line": " src/math/p5.Vector.js:3585" + "line": " src/math/p5.Vector.js:3587" }, { "message": "Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).", - "line": " src/math/p5.Vector.js:3599" + "line": " src/math/p5.Vector.js:3601" }, { "message": "Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.", - "line": " src/math/p5.Vector.js:3614" + "line": " src/math/p5.Vector.js:3616" }, { "message": "Missing item type\nPerforms spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.", - "line": " src/math/p5.Vector.js:3643" + "line": " src/math/p5.Vector.js:3646" }, { "message": "Missing item type\nCalculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)", - "line": " src/math/p5.Vector.js:3674" + "line": " src/math/p5.Vector.js:3678" }, { "message": "Missing item type\nCalculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x\\*x + y\\*y + z\\*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.", - "line": " src/math/p5.Vector.js:3688" + "line": " src/math/p5.Vector.js:3692" }, { "message": "Missing item type\nNormalize the vector to length 1 (make it a unit vector).", - "line": " src/math/p5.Vector.js:3704" + "line": " src/math/p5.Vector.js:3708" }, { "message": "Missing item type\nLimit the magnitude of the vector to the value used for the max\nparameter.", - "line": " src/math/p5.Vector.js:3729" + "line": " src/math/p5.Vector.js:3734" }, { "message": "Missing item type\nSet the magnitude of the vector to the value used for the len\nparameter.", - "line": " src/math/p5.Vector.js:3756" + "line": " src/math/p5.Vector.js:3762" }, { "message": "Missing item type\nCalculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.", - "line": " src/math/p5.Vector.js:3783" + "line": " src/math/p5.Vector.js:3790" }, { "message": "Missing item type\nCalculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.", - "line": " src/math/p5.Vector.js:3799" + "line": " src/math/p5.Vector.js:3806" }, { "message": "Missing item type\nReflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.", - "line": " src/math/p5.Vector.js:3815" + "line": " src/math/p5.Vector.js:3822" }, { "message": "Missing item type\nReturn a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.", - "line": " src/math/p5.Vector.js:3842" + "line": " src/math/p5.Vector.js:3850" }, { "message": "Missing item type\nEquality check against a p5.Vector", - "line": " src/math/p5.Vector.js:3858" + "line": " src/math/p5.Vector.js:3866" }, { "message": "Missing item type\nHelper function to measure ascent and descent.", @@ -31254,15 +30689,15 @@ }, { "message": "Missing item type", - "line": " src/webgl/3d_primitives.js:465" + "line": " src/webgl/3d_primitives.js:1359" }, { "message": "Missing item type\nDraws a point, a coordinate in space at the dimension of one pixel,\ngiven x, y and z coordinates. The color of the point is determined\nby the current stroke, while the point size is determined by current\nstroke weight.", - "line": " src/webgl/3d_primitives.js:1119" + "line": " src/webgl/3d_primitives.js:2411" }, { "message": "Missing item type\nDraw a line given two points", - "line": " src/webgl/3d_primitives.js:1631" + "line": " src/webgl/3d_primitives.js:2923" }, { "message": "Missing item type", @@ -31298,35 +30733,35 @@ }, { "message": "Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1", - "line": " src/webgl/loading.js:333" + "line": " src/webgl/loading.js:544" }, { "message": "Missing item type\nSTL files can be of two types, ASCII and Binary,\n\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.", - "line": " src/webgl/loading.js:477" + "line": " src/webgl/loading.js:688" }, { "message": "Missing item type\nThis function checks if the file is in ASCII format or in Binary format\n\nIt is done by searching keyword `solid` at the start of the file.\n\nAn ASCII STL data must begin with `solid` as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the `d` are known to be\nplentiful. So, check the first 5 bytes for `solid`.\n\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for `solid` to start anywhere after those prefixes.", - "line": " src/webgl/loading.js:504" + "line": " src/webgl/loading.js:715" }, { "message": "Missing item type\nThis function matches the `query` at the provided `offset`", - "line": " src/webgl/loading.js:531" + "line": " src/webgl/loading.js:742" }, { "message": "Missing item type\nThis function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\n\nCurrently there is no support for the colors provided in STL files.", - "line": " src/webgl/loading.js:543" + "line": " src/webgl/loading.js:754" }, { "message": "Missing item type\nASCII STL file starts with `solid 'nameOfFile'`\nThen contain the normal of the face, starting with `facet normal`\nNext contain a keyword indicating the start of face vertex, `outer loop`\nNext comes the three vertex, starting with `vertex x y z`\nVertices ends with `endloop`\nFace ends with `endfacet`\nNext face starts with `facet normal`\nThe end of the file is indicated by `endsolid`", - "line": " src/webgl/loading.js:631" + "line": " src/webgl/loading.js:842" }, { "message": "Missing item type", - "line": " src/webgl/material.js:1278" + "line": " src/webgl/material.js:2330" }, { "message": "Missing item type", - "line": " src/webgl/material.js:1318" + "line": " src/webgl/material.js:2370" }, { "message": "Missing item type\nAn internal class to store data that will be sent to a p5.RenderBuffer.\nThose need to eventually go into a Float32Array, so this class provides a\nvariable-length array container backed by a Float32Array so that it can be\nsent to the GPU without allocating a new array each frame.\n\nLike a C++ vector, its fixed-length Float32Array backing its contents will\ndouble in size when it goes over its capacity.", @@ -31398,11 +30833,11 @@ }, { "message": "Missing item type\nCall this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.", - "line": " src/webgl/p5.Framebuffer.js:1001" + "line": " src/webgl/p5.Framebuffer.js:1002" }, { "message": "Missing item type\nCall this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.\n\nThis will also clear the depth buffer so that any future drawing done\nafterwards will go on top.", - "line": " src/webgl/p5.Framebuffer.js:1149" + "line": " src/webgl/p5.Framebuffer.js:1150" }, { "message": "Missing item type\nCreate a 2D array for establishing stroke connections", @@ -31534,7 +30969,7 @@ }, { "message": "Missing item type", - "line": " src/webgl/p5.Shader.js:140" + "line": " src/webgl/p5.Shader.js:401" }, { "message": "Missing item type", diff --git a/src/templates/pages/reference/data.min.json b/src/templates/pages/reference/data.min.json index 4d20c03f21..b0124c603b 100644 --- a/src/templates/pages/reference/data.min.json +++ b/src/templates/pages/reference/data.min.json @@ -1 +1 @@ -{"project":{"name":"p5","description":"[![npm version](https://badge.fury.io/js/p5.svg)](https://www.npmjs.com/package/p5)","version":"1.9.2","url":"https://github.com/processing/p5.js#readme"},"files":{"src/accessibility/color_namer.js":{"name":"src/accessibility/color_namer.js","modules":{"Environment":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/describe.js":{"name":"src/accessibility/describe.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/gridOutput.js":{"name":"src/accessibility/gridOutput.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/outputs.js":{"name":"src/accessibility/outputs.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/textOutput.js":{"name":"src/accessibility/textOutput.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/color_conversion.js":{"name":"src/color/color_conversion.js","modules":{"Color Conversion":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/creating_reading.js":{"name":"src/color/creating_reading.js","modules":{"Creating & Reading":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/p5.Color.js":{"name":"src/color/p5.Color.js","modules":{},"classes":{"p5.Color":1},"fors":{"p5":1},"namespaces":{}},"src/color/setting.js":{"name":"src/color/setting.js","modules":{"Setting":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/fes_core.js":{"name":"src/core/friendly_errors/fes_core.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/file_errors.js":{"name":"src/core/friendly_errors/file_errors.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/sketch_reader.js":{"name":"src/core/friendly_errors/sketch_reader.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/stacktrace.js":{"name":"src/core/friendly_errors/stacktrace.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/validate_params.js":{"name":"src/core/friendly_errors/validate_params.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/2d_primitives.js":{"name":"src/core/shape/2d_primitives.js","modules":{"2D Primitives":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/attributes.js":{"name":"src/core/shape/attributes.js","modules":{"Attributes":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/curves.js":{"name":"src/core/shape/curves.js","modules":{"Curves":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/vertex.js":{"name":"src/core/shape/vertex.js","modules":{"Vertex":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/constants.js":{"name":"src/core/constants.js","modules":{"Constants":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/environment.js":{"name":"src/core/environment.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/helpers.js":{"name":"src/core/helpers.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/init.js":{"name":"src/core/init.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/internationalization.js":{"name":"src/core/internationalization.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/legacy.js":{"name":"src/core/legacy.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/main.js":{"name":"src/core/main.js","modules":{"Structure":1},"classes":{"p5":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Element.js":{"name":"src/core/p5.Element.js","modules":{"DOM":1},"classes":{"p5.Element":1},"fors":{"p5.Element":1},"namespaces":{}},"src/core/p5.Graphics.js":{"name":"src/core/p5.Graphics.js","modules":{},"classes":{"p5.Graphics":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Renderer.js":{"name":"src/core/p5.Renderer.js","modules":{},"classes":{"p5.Renderer":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Renderer2D.js":{"name":"src/core/p5.Renderer2D.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/reference.js":{"name":"src/core/reference.js","modules":{"Foundation":1},"classes":{},"fors":{"p5":1,"JSON":1,"console":1},"namespaces":{}},"src/core/rendering.js":{"name":"src/core/rendering.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/structure.js":{"name":"src/core/structure.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/transform.js":{"name":"src/core/transform.js","modules":{"Transform":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/data/local_storage.js":{"name":"src/data/local_storage.js","modules":{"LocalStorage":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/data/p5.TypedDict.js":{"name":"src/data/p5.TypedDict.js","modules":{"Dictionary":1},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5.TypedDict":1,"p5":1},"namespaces":{}},"src/dom/dom.js":{"name":"src/dom/dom.js","modules":{},"classes":{"p5.MediaElement":1,"p5.File":1},"fors":{"p5":1,"p5.Element":1},"namespaces":{}},"src/events/acceleration.js":{"name":"src/events/acceleration.js","modules":{"Events":1,"Acceleration":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/keyboard.js":{"name":"src/events/keyboard.js","modules":{"Keyboard":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/mouse.js":{"name":"src/events/mouse.js","modules":{"Mouse":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/touch.js":{"name":"src/events/touch.js","modules":{"Touch":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/filters.js":{"name":"src/image/filters.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/image/image.js":{"name":"src/image/image.js","modules":{"Image":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/loading_displaying.js":{"name":"src/image/loading_displaying.js","modules":{"Loading & Displaying":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/p5.Image.js":{"name":"src/image/p5.Image.js","modules":{},"classes":{"p5.Image":1},"fors":{},"namespaces":{}},"src/image/pixels.js":{"name":"src/image/pixels.js","modules":{"Pixels":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/io/files.js":{"name":"src/io/files.js","modules":{"Input":1,"Output":1},"classes":{"p5.PrintWriter":1},"fors":{"p5":1},"namespaces":{}},"src/io/p5.Table.js":{"name":"src/io/p5.Table.js","modules":{"Table":1},"classes":{"p5.Table":1},"fors":{},"namespaces":{}},"src/io/p5.TableRow.js":{"name":"src/io/p5.TableRow.js","modules":{},"classes":{"p5.TableRow":1},"fors":{},"namespaces":{}},"src/io/p5.XML.js":{"name":"src/io/p5.XML.js","modules":{},"classes":{"p5.XML":1},"fors":{},"namespaces":{}},"src/math/calculation.js":{"name":"src/math/calculation.js","modules":{"Calculation":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/math.js":{"name":"src/math/math.js","modules":{"Vector":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/noise.js":{"name":"src/math/noise.js","modules":{"Noise":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/p5.Vector.js":{"name":"src/math/p5.Vector.js","modules":{},"classes":{"p5.Vector":1},"fors":{},"namespaces":{}},"src/math/random.js":{"name":"src/math/random.js","modules":{"Random":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/trigonometry.js":{"name":"src/math/trigonometry.js","modules":{"Trigonometry":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/attributes.js":{"name":"src/typography/attributes.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/loading_displaying.js":{"name":"src/typography/loading_displaying.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/p5.Font.js":{"name":"src/typography/p5.Font.js","modules":{},"classes":{"p5.Font":1},"fors":{},"namespaces":{}},"src/utilities/array_functions.js":{"name":"src/utilities/array_functions.js","modules":{"Array Functions":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/conversion.js":{"name":"src/utilities/conversion.js","modules":{"Conversion":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/string_functions.js":{"name":"src/utilities/string_functions.js","modules":{"String Functions":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/time_date.js":{"name":"src/utilities/time_date.js","modules":{"Time & Date":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/3d_primitives.js":{"name":"src/webgl/3d_primitives.js","modules":{"3D Primitives":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/GeometryBuilder.js":{"name":"src/webgl/GeometryBuilder.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/interaction.js":{"name":"src/webgl/interaction.js","modules":{"Interaction":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/light.js":{"name":"src/webgl/light.js","modules":{"Lights":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/loading.js":{"name":"src/webgl/loading.js","modules":{"3D Models":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/material.js":{"name":"src/webgl/material.js","modules":{"Material":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Camera.js":{"name":"src/webgl/p5.Camera.js","modules":{"Camera":1},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"namespaces":{}},"src/webgl/p5.DataArray.js":{"name":"src/webgl/p5.DataArray.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.Framebuffer.js":{"name":"src/webgl/p5.Framebuffer.js","modules":{"Rendering":1},"classes":{"p5.FramebufferCamera":1,"p5.FramebufferTexture":1,"p5.Framebuffer":1},"fors":{"p5.Framebuffer":1},"namespaces":{}},"src/webgl/p5.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":1,"p5.Geometry":1},"namespaces":{}},"src/webgl/p5.Matrix.js":{"name":"src/webgl/p5.Matrix.js","modules":{},"classes":{"p5.Matrix":1},"fors":{},"namespaces":{}},"src/webgl/p5.RenderBuffer.js":{"name":"src/webgl/p5.RenderBuffer.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.Immediate.js":{"name":"src/webgl/p5.RendererGL.Immediate.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.Retained.js":{"name":"src/webgl/p5.RendererGL.Retained.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.js":{"name":"src/webgl/p5.RendererGL.js","modules":{},"classes":{"p5.RendererGL":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Shader.js":{"name":"src/webgl/p5.Shader.js","modules":{},"classes":{"p5.Shader":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Texture.js":{"name":"src/webgl/p5.Texture.js","modules":{},"classes":{"p5.Texture":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/text.js":{"name":"src/webgl/text.js","modules":{},"classes":{"ImageInfos":1,"FontInfo":1,"Cubic":1},"fors":{},"namespaces":{}},"lib/addons/p5.sound.js":{"name":"lib/addons/p5.sound.js","modules":{"p5.sound":1},"classes":{"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.Envelope":1,"p5.Noise":1,"p5.Pulse":1,"p5.AudioIn":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.PeakDetect":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.OnsetDetect":1,"p5.PolySynth":1},"fors":{"p5.sound":1,"p5":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.Envelope":1,"p5.AudioIn":1,"p5.Effect":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.PolySynth":1},"namespaces":{}},"lib/addons/p5.sound.min.js":{"name":"lib/addons/p5.sound.min.js","modules":{},"classes":{},"fors":{},"namespaces":{}}},"modules":{"Environment":{"name":"Environment","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Environment","file":"src/accessibility/color_namer.js","line":1,"requires":["core"]},"Color":{"name":"Color","submodules":{"Color Conversion":1,"Creating & Reading":1,"Setting":1},"elements":{},"classes":{"p5.Color":1},"fors":{"p5":1},"namespaces":{},"file":"src/color/p5.Color.js","line":318},"Color Conversion":{"name":"Color Conversion","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/color_conversion.js","line":1,"requires":["core"]},"Creating & Reading":{"name":"Creating & Reading","submodules":{},"elements":{},"classes":{"p5.Color":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/p5.Color.js","line":318,"requires":["core","constants"],"description":"

            A class to describe a color.

            \n

            Each p5.Color object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation() is called.

            \n

            Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.

            \n

            When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.

            \n

            Note: color() is the recommended way to create an\ninstance of this class.

            \n"},"Setting":{"name":"Setting","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/setting.js","line":1,"requires":["core","constants"]},"Shape":{"name":"Shape","submodules":{"2D Primitives":1,"Curves":1,"Vertex":1,"3D Primitives":1,"3D Models":1},"elements":{},"classes":{"p5.Geometry":1,"p5.Matrix":1},"fors":{"p5":1,"p5.Geometry":1},"namespaces":{},"file":"src/webgl/p5.Matrix.js","line":19},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/2d_primitives.js","line":1,"requires":["core","constants"]},"Attributes":{"name":"Attributes","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src/core/shape/attributes.js","line":1,"requires":["core","constants"]},"Curves":{"name":"Curves","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/curves.js","line":1,"requires":["core"]},"Vertex":{"name":"Vertex","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/vertex.js","line":1,"requires":["core","constants"]},"Constants":{"name":"Constants","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Constants","file":"src/core/constants.js","line":1},"Structure":{"name":"Structure","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"IO","file":"src/core/main.js","line":1,"requires":["constants"]},"DOM":{"name":"DOM","submodules":{},"elements":{},"classes":{"p5.Element":1,"p5.MediaElement":1,"p5.File":1},"fors":{"p5.Element":1,"p5":1},"namespaces":{},"module":"DOM","file":"src/dom/dom.js","line":5456,"description":"

            The web is much more than just canvas and the DOM functionality makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.\nThere is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.

            \n

            See tutorial: beyond the canvas\nfor more info on how to use this library.

            \n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{},"elements":{},"classes":{"p5.Graphics":1,"p5.Renderer":1,"p5.FramebufferCamera":1,"p5.FramebufferTexture":1,"p5.Framebuffer":1,"p5.RendererGL":1},"fors":{"p5":1,"p5.Framebuffer":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":945,"tag":"module","description":"

            Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.

            \n","requires":["constants"]},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{"JSON":1,"console":1},"fors":{"p5":1,"JSON":1,"console":1},"namespaces":{},"module":"Foundation","file":"src/core/reference.js","line":1},"Transform":{"name":"Transform","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Transform","file":"src/core/transform.js","line":1,"requires":["core","constants"]},"Data":{"name":"Data","submodules":{"LocalStorage":1,"Dictionary":1,"Array Functions":1,"Conversion":1,"String Functions":1},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5":1,"p5.TypedDict":1},"namespaces":{},"file":"src/data/p5.TypedDict.js","line":415},"LocalStorage":{"name":"LocalStorage","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/data/local_storage.js","line":1,"requires":["core\n\nThis module defines the p5 methods for working with local storage"]},"Dictionary":{"name":"Dictionary","submodules":{},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5.TypedDict":1,"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/data/p5.TypedDict.js","line":415,"requires":["core\n\nThis module defines the p5 methods for the p5 Dictionary classes.\nThe classes StringDict and NumberDict are for storing and working\nwith key-value pairs."],"description":"

            Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.

            \n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"file":"src/events/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"

            A class to describe an image.

            \n

            Images are rectangular grids of pixels that can be displayed and modified.

            \n

            Existing images can be loaded by calling\nloadImage(). Blank images can be created by\ncalling createImage(). p5.Image objects\nhave methods for common tasks such as applying filters and modifying\npixel values.

            \n"},"Loading & Displaying":{"name":"Loading & Displaying","submodules":{},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src/typography/p5.Font.js","line":13,"requires":["core"],"description":"

            This module defines the p5.Font class and functions for\ndrawing text to the display canvas.

            \n"},"Pixels":{"name":"Pixels","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Image","namespace":"","file":"src/image/pixels.js","line":1,"requires":["core"]},"IO":{"name":"IO","submodules":{"Structure":1,"Input":1,"Output":1,"Table":1,"Time & Date":1},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1,"p5.Table":1,"p5.TableRow":1,"p5.XML":1},"fors":{"p5":1},"namespaces":{},"file":"src/io/p5.XML.js","line":9},"Input":{"name":"Input","submodules":{},"elements":{},"classes":{"p5.XML":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/p5.XML.js","line":9,"requires":["core"],"description":"

            XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.

            \n"},"Output":{"name":"Output","submodules":{},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/files.js","line":1186,"description":"

            This is the p5 instance constructor.

            \n

            A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(),\nsetup(), and/or\ndraw() properties on it for running a sketch.

            \n

            A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object

            \n"},"Table":{"name":"Table","submodules":{},"elements":{},"classes":{"p5.Table":1,"p5.TableRow":1},"fors":{},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/p5.TableRow.js","line":9,"requires":["core"],"description":"

            Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.

            \n"},"Math":{"name":"Math","submodules":{"Calculation":1,"Vector":1,"Noise":1,"Random":1,"Trigonometry":1},"elements":{},"classes":{"p5.Vector":1},"fors":{"p5":1},"namespaces":{},"file":"src/math/p5.Vector.js","line":11},"Calculation":{"name":"Calculation","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/calculation.js","line":1,"requires":["core"]},"Vector":{"name":"Vector","submodules":{},"elements":{},"classes":{"p5.Vector":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/p5.Vector.js","line":11,"requires":["core"],"description":"

            A class to describe a two or three-dimensional vector.

            \n

            A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.

            \n

            p5.Vector objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel). Vector math relies on\nmethods inside the p5.Vector class.

            \n

            Note: createVector() is the recommended way\nto make an instance of this class.

            \n"},"Noise":{"name":"Noise","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/noise.js","line":14,"requires":["core"]},"Random":{"name":"Random","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/random.js","line":1,"requires":["core"]},"Trigonometry":{"name":"Trigonometry","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/trigonometry.js","line":1,"requires":["core","constants"]},"Typography":{"name":"Typography","submodules":{"Attributes":1,"Loading & Displaying":1},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"namespaces":{},"file":"src/typography/p5.Font.js","line":13},"Array Functions":{"name":"Array Functions","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/array_functions.js","line":1,"requires":["core"]},"Conversion":{"name":"Conversion","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/conversion.js","line":1,"requires":["core"]},"String Functions":{"name":"String Functions","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/string_functions.js","line":1,"requires":["core"]},"Time & Date":{"name":"Time & Date","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/utilities/time_date.js","line":1,"requires":["core"]},"3D Primitives":{"name":"3D Primitives","submodules":{},"elements":{},"classes":{"p5.Geometry":1},"fors":{"p5":1,"p5.Geometry":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/p5.Geometry.js","line":13,"requires":["core","p5.Geometry"],"description":"

            p5 Geometry class

            \n"},"3D":{"name":"3D","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Shader":1,"p5.Texture":1,"ImageInfos":1,"FontInfo":1,"Cubic":1},"fors":{"p5":1,"p5.Camera":1},"namespaces":{},"file":"src/webgl/text.js","line":277},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"

            This module defines the p5.Shader class

            \n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/p5.Camera.js","line":511,"requires":["core"],"description":"

            This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.

            \n

            New p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.

            \n

            Note:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.

            \n

            The camera object properties\neyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\ncreateCamera()

            \n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.Envelope":1,"p5.Noise":1,"p5.Pulse":1,"p5.AudioIn":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.PeakDetect":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.OnsetDetect":1,"p5.PolySynth":1},"fors":{"p5.sound":1,"p5":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.Envelope":1,"p5.AudioIn":1,"p5.Effect":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.PolySynth":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11691,"description":"

            p5.sound extends p5 with Web Audio functionality including audio input,\nplayback, analysis and synthesis.\n

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

              p5.sound is on GitHub.\nDownload the latest version\nhere.

              ","tag":"main","itemtype":"main"}},"classes":{"p5":{"name":"p5","shortname":"p5","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src/core/main.js","line":12,"description":"

              This is the p5 instance constructor.

              \n

              A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(),\nsetup(), and/or\ndraw() properties on it for running a sketch.

              \n

              A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object

              \n","is_constructor":1,"params":[{"name":"sketch","description":"

              a closure that can set optional preload(),\n setup(), and/or draw() properties on the\n given p5 instance

              \n","type":"Function(p5)"},{"name":"node","description":"

              element to attach canvas to

              \n","type":"HTMLElement","optional":true}],"return":{"description":"a p5 instance","type":"P5"}},"p5.Color":{"name":"p5.Color","shortname":"p5.Color","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Color","submodule":"Creating & Reading","namespace":"","file":"src/color/p5.Color.js","line":318,"description":"

              A class to describe a color.

              \n

              Each p5.Color object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation() is called.

              \n

              Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.

              \n

              When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.

              \n

              Note: color() is the recommended way to create an\ninstance of this class.

              \n","is_constructor":1,"params":[{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true},{"name":"vals","description":"

              an array containing the color values\n for red, green, blue and alpha channel\n or CSS color.

              \n","type":"Number[]|String"}]},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"

              A class to describe an\nHTML element.

              \n

              Sketches can use many elements. Common elements include the drawing canvas,\nbuttons, sliders, webcam feeds, and so on.

              \n

              All elements share the methods of the p5.Element class. They're created\nwith functions such as createCanvas() and\ncreateButton().

              \n","is_constructor":1,"params":[{"name":"elt","description":"

              wrapped DOM element.

              \n","type":"HTMLElement"},{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button element and\n // place it beneath the canvas.\n let btn = createButton('change');\n btn.position(0, 100);\n\n // Call randomColor() when\n // the button is pressed.\n btn.mousePressed(randomColor);\n\n describe('A gray square with a button that says \"change\" beneath it. The square changes color when the user presses the button.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"

              Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.

              \n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"

              width

              \n","type":"Number"},{"name":"h","description":"

              height

              \n","type":"Number"},{"name":"renderer","description":"

              the renderer to use, either P2D or WEBGL

              \n","type":"Constant"},{"name":"pInst","description":"

              pointer to p5 instance

              \n","type":"P5","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"

              Main graphics and rendering context, as well as the base API\nimplementation for p5.js \"core\". To be used as the superclass for\nRenderer2D and Renderer3D classes, respectively.

              \n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"

              DOM node that is wrapped

              \n","type":"HTMLElement"},{"name":"pInst","description":"

              pointer to p5 instance

              \n","type":"P5","optional":true},{"name":"isMainCanvas","description":"

              whether we're using it as main canvas

              \n","type":"Boolean","optional":true}]},"JSON":{"name":"JSON","shortname":"JSON","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","submodule":"Foundation","namespace":""},"console":{"name":"console","shortname":"console","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","submodule":"Foundation","namespace":""},"p5.TypedDict":{"name":"p5.TypedDict","shortname":"p5.TypedDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":82,"description":"

              Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.

              \n","is_constructor":1},"p5.StringDict":{"name":"p5.StringDict","shortname":"p5.StringDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":397,"description":"

              A simple Dictionary class for Strings.

              \n","extends":"p5.TypedDict"},"p5.NumberDict":{"name":"p5.NumberDict","shortname":"p5.NumberDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":415,"description":"

              A simple Dictionary class for Numbers.

              \n","is_constructor":1,"extends":"p5.TypedDict"},"p5.MediaElement":{"name":"p5.MediaElement","shortname":"p5.MediaElement","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/dom/dom.js","line":4073,"description":"

              A class to handle audio and video.

              \n

              p5.MediaElement extends p5.Element with\nmethods to handle audio and video. p5.MediaElement objects are created by\ncalling createVideo,\ncreateAudio, and\ncreateCapture.

              \n","is_constructor":1,"params":[{"name":"elt","description":"

              DOM node that is wrapped

              \n","type":"String"}],"extends":"p5.Element","example":["\n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createCapture().\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A webcam feed with inverted colors.');\n}\n\nfunction draw() {\n // Display the video stream and invert the colors.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n filter(INVERT);\n}\n\n
              "]},"p5.File":{"name":"p5.File","shortname":"p5.File","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/dom/dom.js","line":5456,"description":"

              A class to describe a file.

              \n

              p5.File objects are used by\nmyElement.drop() and\ncreated by\ncreateFileInput.

              \n","is_constructor":1,"params":[{"name":"file","description":"

              wrapped file.

              \n","type":"File"}],"example":["\n
              \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Display the p5.File's info once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n\n
              \n\n
              \n\n// Use the file input to select an image to\n// load and display.\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath the canvas.\n // Call handleImage() when the file image loads.\n let input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if it's ready.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Use the p5.File's data once it loads.\nfunction handleImage(file) {\n // Check the p5.File's type.\n if (file.type === 'image') {\n // Create an image using using the p5.File's data.\n img = createImg(file.data, '');\n\n // Hide the image element so it doesn't appear twice.\n img.hide();\n } else {\n img = null;\n }\n}\n\n
              "]},"p5.Image":{"name":"p5.Image","shortname":"p5.Image","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Image","submodule":"Image","namespace":"","file":"src/image/p5.Image.js","line":21,"description":"

              A class to describe an image.

              \n

              Images are rectangular grids of pixels that can be displayed and modified.

              \n

              Existing images can be loaded by calling\nloadImage(). Blank images can be created by\ncalling createImage(). p5.Image objects\nhave methods for common tasks such as applying filters and modifying\npixel values.

              \n","example":["\n
              \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a brick wall.');\n}\n\n
              \n\n
              \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A grayscale image of a brick wall.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
              "],"is_constructor":1,"params":[{"name":"width","description":"","type":"Number"},{"name":"height","description":"","type":"Number"}]},"p5.PrintWriter":{"name":"p5.PrintWriter","shortname":"p5.PrintWriter","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src/io/files.js","line":1186,"params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"","type":"String","optional":true}]},"p5.Table":{"name":"p5.Table","shortname":"p5.Table","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Table","namespace":"","file":"src/io/p5.Table.js","line":33,"description":"

              Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.

              \n","is_constructor":1,"params":[{"name":"rows","description":"

              An array of p5.TableRow objects

              \n","type":"p5.TableRow[]","optional":true}]},"p5.TableRow":{"name":"p5.TableRow","shortname":"p5.TableRow","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Table","namespace":"","file":"src/io/p5.TableRow.js","line":9,"description":"

              A TableRow object represents a single row of data values,\nstored in columns, from a table.

              \n

              A Table Row contains both an ordered array, and an unordered\nJSON object.

              \n","is_constructor":1,"params":[{"name":"str","description":"

              optional: populate the row with a\n string of values, separated by the\n separator

              \n","type":"String","optional":true},{"name":"separator","description":"

              comma separated values (csv) by default

              \n","type":"String","optional":true}]},"p5.XML":{"name":"p5.XML","shortname":"p5.XML","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Input","namespace":"","file":"src/io/p5.XML.js","line":9,"description":"

              XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.

              \n","is_constructor":1,"example":["\n
              \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum('id');\n let coloring = children[i].getString('species');\n let name = children[i].getContent();\n print(id + ', ' + coloring + ', ' + name);\n }\n\n describe('no image displayed');\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
              "]},"p5.Vector":{"name":"p5.Vector","shortname":"p5.Vector","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Math","submodule":"Vector","namespace":"","file":"src/math/p5.Vector.js","line":11,"description":"

              A class to describe a two or three-dimensional vector.

              \n

              A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.

              \n

              p5.Vector objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel). Vector math relies on\nmethods inside the p5.Vector class.

              \n

              Note: createVector() is the recommended way\nto make an instance of this class.

              \n","is_constructor":1,"params":[{"name":"x","description":"

              x component of the vector.

              \n","type":"Number","optional":true},{"name":"y","description":"

              y component of the vector.

              \n","type":"Number","optional":true},{"name":"z","description":"

              z component of the vector.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(75, 75);\n\n // Style the points.\n strokeWeight(5);\n\n // Draw the first point using a p5.Vector.\n point(p1);\n\n // Draw the second point using a p5.Vector's components.\n point(p2.x, p2.y);\n\n describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');\n}\n\n
              \n\n
              \n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n\n
              "]},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"

              A class to describe fonts.

              \n","is_constructor":1,"params":[{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true}],"example":["\n
              \n\nlet font;\n\nfunction preload() {\n // Creates a p5.Font object.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the text.\n fill('deeppink');\n textFont(font);\n textSize(36);\n\n // Display the text.\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a gray background.');\n}\n\n
              "]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"3D","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":511,"description":"

              This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.

              \n

              New p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.

              \n

              Note:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.

              \n

              The camera object properties\neyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\ncreateCamera()

              \n","params":[{"name":"rendererGL","description":"

              instance of WebGL renderer

              \n","type":"RendererGL"}],"example":["\n
              \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial pan angle\n cam.pan(-0.8);\n describe(\n 'camera view pans left and right across a series of rotating 3D boxes.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
              "],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Framebuffer":{"name":"p5.Framebuffer","shortname":"p5.Framebuffer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","namespace":"","file":"src/webgl/p5.Framebuffer.js","line":76,"description":"

              An object that one can draw to and then read as a texture. While similar\nto a p5.Graphics, using a p5.Framebuffer as a texture will generally run\nmuch faster, as it lives within the same WebGL context as the canvas it\nis created on. It only works in WebGL mode.

              \n","is_constructor":1,"params":[{"name":"target","description":"

              A p5 global instance or p5.Graphics

              \n","type":"p5.Graphics|p5"},{"name":"settings","description":"

              A settings object

              \n","type":"Object","optional":true}]},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Shape","submodule":"3D Primitives","namespace":"","file":"src/webgl/p5.Geometry.js","line":13,"description":"

              p5 Geometry class

              \n","is_constructor":1,"params":[{"name":"detailX","description":"

              number of vertices along the x-axis.

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of vertices along the y-axis.

              \n","type":"Integer","optional":true},{"name":"callback","description":"

              function to call upon object instantiation.

              \n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"3D","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"

              Shader class for WEBGL Mode

              \n","is_constructor":1,"params":[{"name":"renderer","description":"

              an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader

              \n","type":"p5.RendererGL"},{"name":"vertSrc","description":"

              source code for the vertex shader (as a string)

              \n","type":"String"},{"name":"fragSrc","description":"

              source code for the fragment shader (as a string)

              \n","type":"String"}]},"p5.sound":{"name":"p5.sound","shortname":"p5.sound","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":""},"p5.SoundFile":{"name":"p5.SoundFile","shortname":"p5.SoundFile","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":1405,"description":"

              SoundFile object with a path to a file.

              \n\n

              The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.

              \n\n

              To do something with the sound as soon as it loads\npass the name of a function as the second parameter.

              \n\n

              Only one file path is required. However, audio file formats\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.

              ","is_constructor":1,"params":[{"name":"path","description":"

              path to a sound file (String). Optionally,\n you may include multiple file formats in\n an array. Alternately, accepts an object\n from the HTML5 File API, or a p5.File.

              \n","type":"String|Array"},{"name":"successCallback","description":"

              Name of a function to call once file loads

              \n","type":"Function","optional":true},{"name":"errorCallback","description":"

              Name of a function to call if file fails to\n load. This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.

              \n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"

              Name of a function to call while file\n is loading. That function will\n receive progress of the request to\n load the sound file\n (between 0 and 1) as its first\n parameter. This progress\n does not account for the additional\n time needed to decode the audio data.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n
              "]},"p5.Amplitude":{"name":"p5.Amplitude","shortname":"p5.Amplitude","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":3022,"description":"

              Amplitude measures volume between 0.0 and 1.0.\nListens to all p5sound by default, or use setInput()\nto listen to a specific sound source. Accepts an optional\nsmoothing value, which defaults to 0.

              \n","is_constructor":1,"params":[{"name":"smoothing","description":"

              between 0.0 and .999 to smooth\n amplitude readings (defaults to 0)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet sound, amplitude;\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying() ){\n sound.pause();\n } else {\n sound.loop();\n\t\tamplitude = new p5.Amplitude();\n\t\tamplitude.setInput(sound);\n }\n}\n\n
              "]},"p5.FFT":{"name":"p5.FFT","shortname":"p5.FFT","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":3347,"description":"

              FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n\naudio frequencies within a waveform.

              \n\n

              Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses:
              • FFT.waveform() computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.
              \n• FFT.analyze() computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with getEnergy() to measure amplitude at specific\nfrequencies, or within a range of frequencies.

              \n\n

              FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as bins. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the\nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.

              ","is_constructor":1,"params":[{"name":"smoothing","description":"

              Smooth results of Freq Spectrum.\n 0.0 < smoothing < 1.0.\n Defaults to 0.8.

              \n","type":"Number","optional":true},{"name":"bins","description":"

              Length of resulting array.\n Must be a power of two between\n 16 and 1024. Defaults to 1024.

              \n","type":"Number","optional":true}],"example":["\n
              \nfunction preload(){\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT();\n sound.amp(0.2);\n}\n\nfunction draw(){\n background(220);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n let waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(20);\n for (let i = 0; i < waveform.length; i++){\n let x = map(i, 0, waveform.length, 0, width);\n let y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n\n text('tap to play', 20, 20);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying()) {\n sound.pause();\n } else {\n sound.loop();\n }\n}\n
              "]},"p5.Oscillator":{"name":"p5.Oscillator","shortname":"p5.Oscillator","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4060,"description":"

              Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).

              \n\n

              Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.\n

              ","is_constructor":1,"params":[{"name":"freq","description":"

              frequency defaults to 440Hz

              \n","type":"Number","optional":true},{"name":"type","description":"

              type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'

              \n","type":"String","optional":true}],"example":["\n
              \nlet osc, playing, freq, amp;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator('sine');\n}\n\nfunction draw() {\n background(220)\n freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);\n amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);\n\n text('tap to play', 20, 20);\n text('freq: ' + freq, 20, 40);\n text('amp: ' + amp, 20, 60);\n\n if (playing) {\n // smooth the transitions by 0.1 seconds\n osc.freq(freq, 0.1);\n osc.amp(amp, 0.1);\n }\n}\n\nfunction playOscillator() {\n // starting an oscillator on a user gesture will enable audio\n // in browsers that have a strict autoplay policy.\n // See also: userStartAudio();\n osc.start();\n playing = true;\n}\n\nfunction mouseReleased() {\n // ramp amplitude to 0 over 0.5 seconds\n osc.amp(0, 0.5);\n playing = false;\n}\n
              "]},"p5.SinOsc":{"name":"p5.SinOsc","shortname":"p5.SinOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4602,"description":"

              Constructor: new p5.SinOsc().\nThis creates a Sine Wave Oscillator and is\nequivalent to new p5.Oscillator('sine')\n or creating a p5.Oscillator and then calling\nits method setType('sine').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.TriOsc":{"name":"p5.TriOsc","shortname":"p5.TriOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4629,"description":"

              Constructor: new p5.TriOsc().\nThis creates a Triangle Wave Oscillator and is\nequivalent to new p5.Oscillator('triangle')\n or creating a p5.Oscillator and then calling\nits method setType('triangle').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.SawOsc":{"name":"p5.SawOsc","shortname":"p5.SawOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4656,"description":"

              Constructor: new p5.SawOsc().\nThis creates a SawTooth Wave Oscillator and is\nequivalent to new p5.Oscillator('sawtooth')\n or creating a p5.Oscillator and then calling\nits method setType('sawtooth').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.SqrOsc":{"name":"p5.SqrOsc","shortname":"p5.SqrOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4683,"description":"

              Constructor: new p5.SqrOsc().\nThis creates a Square Wave Oscillator and is\nequivalent to new p5.Oscillator('square')\n or creating a p5.Oscillator and then calling\nits method setType('square').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.Envelope":{"name":"p5.Envelope","shortname":"p5.Envelope","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4721,"description":"

              Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\nADSR\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: osc.freq(env).

              \n

              Use setRange to change the attack/release level.\nUse setADSR to change attackTime, decayTime, sustainPercent and releaseTime.

              \n

              Use the play method to play the entire envelope,\nthe ramp method for a pingable trigger,\nor triggerAttack/\ntriggerRelease to trigger noteOn/noteOff.

              ","is_constructor":1,"example":["\n
              \nlet t1 = 0.1; // attack time in seconds\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\n\nlet env;\nlet triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('tap to play', 20, 20);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope(t1, l1, t2, l2);\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction playSound() {\n // starting the oscillator ensures that audio is enabled.\n triOsc.start();\n env.play(triOsc);\n}\n
              "]},"p5.Noise":{"name":"p5.Noise","shortname":"p5.Noise","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":5620,"description":"

              Noise is a type of oscillator that generates a buffer with random values.

              \n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"

              Type of noise can be 'white' (default),\n 'brown' or 'pink'.

              \n","type":"String"}]},"p5.Pulse":{"name":"p5.Pulse","shortname":"p5.Pulse","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":5779,"description":"

              Creates a Pulse object, an oscillator that implements\nPulse Width Modulation.\nThe pulse is created with two oscillators.\nAccepts a parameter for frequency, and to set the\nwidth between the pulses. See \np5.Oscillator for a full list of methods.

              \n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"

              Frequency in oscillations per second (Hz)

              \n","type":"Number","optional":true},{"name":"w","description":"

              Width between the pulses (0 to 1.0,\n defaults to 0)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet pulse;\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startPulse);\n background(220);\n\n pulse = new p5.Pulse();\n pulse.amp(0.5);\n pulse.freq(220);\n}\nfunction startPulse() {\n pulse.start();\n pulse.amp(0.5, 0.02);\n}\nfunction mouseReleased() {\n pulse.amp(0, 0.2);\n}\nfunction draw() {\n background(220);\n text('tap to play', 5, 20, width - 20);\n let w = map(mouseX, 0, width, 0, 1);\n w = constrain(w, 0, 1);\n pulse.width(w);\n text('pulse width: ' + w, 5, height - 20);\n}\n
              "]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6015,"description":"

              Get audio from an input, i.e. your computer's microphone.

              \n\n

              Turn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.

              \n\n

              If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.

              \n\n

              Note: This uses the getUserMedia/\nStream API, which is not supported by certain browsers. Access in Chrome browser\nis limited to localhost and https, but access over http may be limited.

              ","is_constructor":1,"params":[{"name":"errorCallback","description":"

              A function to call if there is an error\n accessing the AudioIn. For example,\n Safari and iOS devices do not\n currently allow microphone access.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet mic;\n\n function setup(){\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(userStartAudio);\n textAlign(CENTER);\n mic = new p5.AudioIn();\n mic.start();\n}\n\nfunction draw(){\n background(0);\n fill(255);\n text('tap to start', width/2, 20);\n\n micLevel = mic.getLevel();\n let y = height - micLevel * height;\n ellipse(width/2, y, 10, 10);\n}\n
              "]},"p5.Effect":{"name":"p5.Effect","shortname":"p5.Effect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6423,"description":"

              Effect is a base class for audio effects in p5.
              \nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.

              \n

              This class is extended by p5.Distortion,\np5.Compressor,\np5.Delay,\np5.Filter,\np5.Reverb.

              \n","is_constructor":1,"params":[{"name":"ac","description":"

              Reference to the audio context of the p5 object

              \n","type":"Object","optional":true},{"name":"input","description":"

              Gain Node effect wrapper

              \n","type":"AudioNode","optional":true},{"name":"output","description":"

              Gain Node effect wrapper

              \n","type":"AudioNode","optional":true},{"name":"_drywet","description":"

              Tone.JS CrossFade node (defaults to value: 1)

              \n","type":"Object","optional":true},{"name":"wet","description":"

              Effects that extend this class should connect\n to the wet signal to this gain node, so that dry and wet\n signals are mixed properly.

              \n","type":"AudioNode","optional":true}]},"p5.Filter":{"name":"p5.Filter","shortname":"p5.Filter","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6628,"description":"

              A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:

              \np5.LowPass:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.
              \np5.HighPass:\nThe opposite of a lowpass filter.
              \np5.BandPass:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.
              \n\n

              The .res() method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"

              'lowpass' (default), 'highpass', 'bandpass'

              \n","type":"String","optional":true}],"example":["\n
              \nlet fft, noise, filter;\n\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mousePressed(makeNoise);\n fill(255, 0, 255);\n\n filter = new p5.BandPass();\n noise = new p5.Noise();\n noise.disconnect();\n noise.connect(filter);\n\n fft = new p5.FFT();\n}\n\nfunction draw() {\n background(220);\n\n // set the BandPass frequency based on mouseX\n let freq = map(mouseX, 0, width, 20, 10000);\n freq = constrain(freq, 0, 22050);\n filter.freq(freq);\n // give the filter a narrow band (lower res = wider bandpass)\n filter.res(50);\n\n // draw filtered spectrum\n let spectrum = fft.analyze();\n noStroke();\n for (let i = 0; i < spectrum.length; i++) {\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width/spectrum.length, h);\n }\n if (!noise.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20);\n }\n}\n\nfunction makeNoise() {\n // see also: `userStartAudio()`\n noise.start();\n noise.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n noise.amp(0, 0.2);\n}\n\n
              "]},"p5.LowPass":{"name":"p5.LowPass","shortname":"p5.LowPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6914,"description":"

              Constructor: new p5.LowPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('lowpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.HighPass":{"name":"p5.HighPass","shortname":"p5.HighPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6938,"description":"

              Constructor: new p5.HighPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('highpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.BandPass":{"name":"p5.BandPass","shortname":"p5.BandPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6962,"description":"

              Constructor: new p5.BandPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('bandpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.EQ":{"name":"p5.EQ","shortname":"p5.EQ","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7105,"description":"

              p5.EQ is an audio effect that performs the function of a multiband\naudio equalizer. Equalization is used to adjust the balance of\nfrequency compoenents of an audio signal. This process is commonly used\nin sound production and recording to change the waveform before it reaches\na sound output device. EQ can also be used as an audio effect to create\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\ninstantiated with 3 or 8 bands. Bands can be added or removed from\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"

              Constructor will accept 3 or 8, defaults to 3

              \n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n
              \nlet eq, soundFile\nlet eqBandIndex = 0;\nlet eqBandNames = ['lows', 'mids', 'highs'];\n\nfunction preload() {\n soundFormats('mp3', 'ogg');\n soundFile = loadSound('assets/beat');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(toggleSound);\n\n eq = new p5.EQ(eqBandNames.length);\n soundFile.disconnect();\n eq.process(soundFile);\n}\n\nfunction draw() {\n background(30);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('filtering ', 50, 25);\n\n fill(255, 40, 255);\n textSize(26);\n text(eqBandNames[eqBandIndex], 50, 55);\n\n fill(255);\n textSize(9);\n\n if (!soundFile.isPlaying()) {\n text('tap to play', 50, 80);\n } else {\n text('tap to filter next band', 50, 80)\n }\n}\n\nfunction toggleSound() {\n if (!soundFile.isPlaying()) {\n soundFile.play();\n } else {\n eqBandIndex = (eqBandIndex + 1) % eq.bands.length;\n }\n\n for (let i = 0; i < eq.bands.length; i++) {\n eq.bands[i].gain(0);\n }\n // filter the band we want to filter\n eq.bands[eqBandIndex].gain(-40);\n}\n
              "]},"p5.Panner3D":{"name":"p5.Panner3D","shortname":"p5.Panner3D","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7602,"description":"

              Panner3D is based on the \nWeb Audio Spatial Panner Node.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.

              \n

              The position is relative to an \nAudio Context Listener, which can be accessed\nby p5.soundOut.audiocontext.listener

              \n","is_constructor":1},"p5.Delay":{"name":"p5.Delay","shortname":"p5.Delay","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7926,"description":"

              Delay is an echo effect. It processes an existing sound source,\nand outputs a delayed version of that sound. The p5.Delay can\nproduce different effects depending on the delayTime, feedback,\nfilter, and type. In the example below, a feedback of 0.5 (the\ndefault value) will produce a looping delay that decreases in\nvolume by 50% each repeat. A filter will cut out the high\nfrequencies so that the delay does not sound as piercing as the\noriginal source.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"example":["\n
              \nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n osc = new p5.Oscillator('square');\n osc.amp(0.5);\n delay = new p5.Delay();\n\n // delay.process() accepts 4 parameters:\n // source, delayTime (in seconds), feedback, filter frequency\n delay.process(osc, 0.12, .7, 2300);\n\n cnv.mousePressed(oscStart);\n}\n\nfunction oscStart() {\n osc.start();\n}\n\nfunction mouseReleased() {\n osc.stop();\n}\n
              "]},"p5.Reverb":{"name":"p5.Reverb","shortname":"p5.Reverb","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":8308,"description":"

              Reverb adds depth to a sound through a large number of decaying\nechoes. It creates the perception that sound is occurring in a\nphysical space. The p5.Reverb has paramters for Time (how long does the\nreverb last) and decayRate (how much the sound decays with each echo)\nthat can be set with the .set() or .process() methods. The p5.Convolver\nextends p5.Reverb allowing you to recreate the sound of actual physical\nspaces through convolution.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"example":["\n
              \nlet soundFile, reverb;\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n reverb = new p5.Reverb();\n soundFile.disconnect(); // so we'll only hear reverb...\n\n // connect soundFile to reverb, process w/\n // 3 second reverbTime, decayRate of 2%\n reverb.process(soundFile, 3, 2);\n}\n\nfunction draw() {\n let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1);\n // 1 = all reverb, 0 = no reverb\n reverb.drywet(dryWet);\n\n background(220);\n text('tap to play', 10, 20);\n text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20);\n}\n\nfunction playSound() {\n soundFile.play();\n}\n
              "]},"p5.Convolver":{"name":"p5.Convolver","shortname":"p5.Convolver","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":8549,"description":"

              p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called \nconvolution.

              \n\n

              Convolution multiplies any audio input by an \"impulse response\"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.

              \n\n

              Use the method createConvolution(path) to instantiate a\np5.Convolver with a path to your impulse response audio file.

              ","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"

              path to a sound file

              \n","type":"String"},{"name":"callback","description":"

              function to call when loading succeeds

              \n","type":"Function","optional":true},{"name":"errorCallback","description":"

              function to call if loading fails.\n This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n
              "]},"p5.Phrase":{"name":"p5.Phrase","shortname":"p5.Phrase","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9103,"description":"

              A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.

              \n\n

              Phrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.

              \n\n

              The first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled playNote(value){}. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).

              ","is_constructor":1,"params":[{"name":"name","description":"

              Name so that you can access the Phrase.

              \n","type":"String"},{"name":"callback","description":"

              The name of a function that this phrase\n will call. Typically it will play a sound,\n and accept two parameters: a time at which\n to play the sound (in seconds from now),\n and a value from the sequence array. The\n time should be passed into the play() or\n start() method to ensure precision.

              \n","type":"Function"},{"name":"sequence","description":"

              Array of values to pass into the callback\n at each step of the phrase.

              \n","type":"Array"}],"example":["\n
              \nlet mySound, myPhrase, myPart;\nlet pattern = [1,0,0,2,0,2,0,0];\n\nfunction preload() {\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n text('tap to play', width/2, height/2);\n textAlign(CENTER, CENTER);\n\n myPhrase = new p5.Phrase('bbox', onEachStep, pattern);\n myPart = new p5.Part();\n myPart.addPhrase(myPhrase);\n myPart.setBPM(60);\n}\n\nfunction onEachStep(time, playbackRate) {\n mySound.rate(playbackRate);\n mySound.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n myPart.start();\n}\n
              "]},"p5.Part":{"name":"p5.Part","shortname":"p5.Part","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9185,"description":"

              A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents a 1/16th note.

              \n\n

              See p5.Phrase for more about musical timing.

              ","is_constructor":1,"params":[{"name":"steps","description":"

              Steps in the part

              \n","type":"Number","optional":true},{"name":"tatums","description":"

              Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet box, drum, myPart;\nlet boxPat = [1,0,0,2,0,2,0,0];\nlet drumPat = [0,1,1,0,2,0,1,0];\n\nfunction preload() {\n box = loadSound('assets/beatbox.mp3');\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n textAlign(CENTER, CENTER);\n text('tap to play', width/2, height/2);\n\n let boxPhrase = new p5.Phrase('box', playBox, boxPat);\n let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n myPart = new p5.Part();\n myPart.addPhrase(boxPhrase);\n myPart.addPhrase(drumPhrase);\n myPart.setBPM(60);\n}\n\nfunction playBox(time, playbackRate) {\n box.rate(playbackRate);\n box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n drum.rate(playbackRate);\n drum.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n\n myPart.start();\n}\n
              "]},"p5.Score":{"name":"p5.Score","shortname":"p5.Score","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9493,"description":"

              A Score consists of a series of Parts. The parts will\nbe played back in order. For example, you could have an\nA part, a B part, and a C part, and play them back in this order\nnew p5.Score(a, a, b, a, c)

              \n","is_constructor":1,"params":[{"name":"parts","description":"

              One or multiple parts, to be played in sequence.

              \n","type":"p5.Part","optional":true,"multiple":true}]},"p5.SoundLoop":{"name":"p5.SoundLoop","shortname":"p5.SoundLoop","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9673,"description":"

              SoundLoop

              \n","is_constructor":1,"params":[{"name":"callback","description":"

              this function will be called on each iteration of theloop

              \n","type":"Function"},{"name":"interval","description":"

              amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second.

              \n","type":"Number|String","optional":true}],"example":["\n
              \n let synth, soundLoop;\n let notePattern = [60, 62, 64, 67, 69, 72];\n\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n colorMode(HSB);\n background(0, 0, 86);\n text('tap to start/stop', 10, 20);\n\n //the looper's callback is passed the timeFromNow\n //this value should be used as a reference point from\n //which to schedule sounds\n let intervalInSeconds = 0.2;\n soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds);\n\n synth = new p5.MonoSynth();\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n if (soundLoop.isPlaying) {\n soundLoop.stop();\n } else {\n // start the loop\n soundLoop.start();\n }\n}\n\nfunction onSoundLoop(timeFromNow) {\n let noteIndex = (soundLoop.iterations - 1) % notePattern.length;\n let note = midiToFreq(notePattern[noteIndex]);\n synth.play(note, 0.5, timeFromNow);\n background(noteIndex * 360 / notePattern.length, 50, 100);\n}\n
              "]},"p5.Compressor":{"name":"p5.Compressor","shortname":"p5.Compressor","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10036,"description":"

              Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the main output.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","is_constructor":1,"extends":"p5.Effect"},"p5.PeakDetect":{"name":"p5.PeakDetect","shortname":"p5.PeakDetect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10312,"description":"

              PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n

              \n

              \nTo use p5.PeakDetect, call update in the draw loop\nand pass in a p5.FFT object.\n

              \n

              \nYou can listen for a specific part of the frequency spectrum by\nsetting the range between freq1 and freq2.\n

              \n\n

              threshold is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.

              \n\n

              \nThe update method is meant to be run in the draw loop, and\nframes determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n framesPerPeak = 60 / (estimatedBPM / 60 );\n

              \n\n

              \nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by Felix Turner.\n

              ","is_constructor":1,"params":[{"name":"freq1","description":"

              lowFrequency - defaults to 20Hz

              \n","type":"Number","optional":true},{"name":"freq2","description":"

              highFrequency - defaults to 20000 Hz

              \n","type":"Number","optional":true},{"name":"threshold","description":"

              Threshold for detecting a beat between 0 and 1\n scaled logarithmically where 0.1 is 1/2 the loudness\n of 1.0. Defaults to 0.35.

              \n","type":"Number","optional":true},{"name":"framesPerPeak","description":"

              Defaults to 20.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 10;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n\n // p5.PeakDetect requires a p5.FFT\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n}\n\nfunction draw() {\n background(0);\n text('click to play/pause', width/2, height/2);\n\n // peakDetect accepts an fft post-analysis\n fft.analyze();\n peakDetect.update(fft);\n\n if ( peakDetect.isDetected ) {\n ellipseWidth = 50;\n } else {\n ellipseWidth *= 0.95;\n }\n\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n }\n}\n
              "]},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10559,"description":"

              Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().

              \n

              The record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.

              ","is_constructor":1,"example":["\n
              \nlet mic, recorder, soundFile;\nlet state = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n textAlign(CENTER, CENTER);\n\n // create an audio in\n mic = new p5.AudioIn();\n\n // prompts user to enable their browser mic\n mic.start();\n\n // create a sound recorder\n recorder = new p5.SoundRecorder();\n\n // connect the mic to the recorder\n recorder.setInput(mic);\n\n // this sound file will be used to\n // playback & save the recording\n soundFile = new p5.SoundFile();\n\n text('tap to record', width/2, height/2);\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n // make sure user enabled the mic\n if (state === 0 && mic.enabled) {\n\n // record to our p5.SoundFile\n recorder.record(soundFile);\n\n background(255,0,0);\n text('Recording!', width/2, height/2);\n state++;\n }\n else if (state === 1) {\n background(0,255,0);\n\n // stop recorder and\n // send result to soundFile\n recorder.stop();\n\n text('Done! Tap to play and download', width/2, height/2, width - 20);\n state++;\n }\n\n else if (state === 2) {\n soundFile.play(); // play the result!\n save(soundFile, 'mySound.wav');\n state++;\n }\n}\n
              "]},"p5.Distortion":{"name":"p5.Distortion","shortname":"p5.Distortion","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10816,"description":"

              A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\nKevin Ennis

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"

              Unbounded distortion amount.\n Normal values range from 0-1.

              \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

              'none', '2x', or '4x'.

              \n","type":"String","optional":true,"optdefault":"'none'"}]},"p5.Gain":{"name":"p5.Gain","shortname":"p5.Gain","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10973,"description":"

              A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.

              \n","is_constructor":1,"example":["\n
              \n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, mixGain;\nfunction preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');\n sound2 = loadSound('assets/beat');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n // create a 'mix' gain bus to which we will connect both soundfiles\n mixGain = new p5.Gain();\n mixGain.connect();\n sound1.disconnect(); // diconnect from p5 output\n sound1Gain = new p5.Gain(); // setup a gain node\n sound1Gain.setInput(sound1); // connect the first sound to its input\n sound1Gain.connect(mixGain); // connect its output to the final mix bus\n sound2.disconnect();\n sound2Gain = new p5.Gain();\n sound2Gain.setInput(sound2);\n sound2Gain.connect(mixGain);\n}\nfunction startSound() {\n sound1.loop();\n sound2.loop();\n loop();\n}\nfunction mouseReleased() {\n sound1.stop();\n sound2.stop();\n}\nfunction draw(){\n background(220);\n textAlign(CENTER);\n textSize(11);\n fill(0);\n if (!sound1.isPlaying()) {\n text('tap and drag to play', width/2, height/2);\n return;\n }\n // map the horizontal position of the mouse to values useable for volume * control of sound1\n var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1);\n var sound2Volume = 1-sound1Volume;\n sound1Gain.amp(sound1Volume);\n sound2Gain.amp(sound2Volume);\n // map the vertical position of the mouse to values useable for 'output * volume control'\n var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n mixGain.amp(outputVolume);\n text('output', width/2, height - outputVolume * height * 0.9)\n fill(255, 0, 255);\n textAlign(LEFT);\n text('sound1', 5, height - sound1Volume * height * 0.9);\n textAlign(RIGHT);\n text('sound2', width - 5, height - sound2Volume * height * 0.9);\n}\n
              "]},"p5.AudioVoice":{"name":"p5.AudioVoice","shortname":"p5.AudioVoice","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11149,"description":"

              Base class for monophonic synthesizers. Any extensions of this class\nshould follow the API and implement the methods below in order to\nremain compatible with p5.PolySynth();

              \n","is_constructor":1},"p5.MonoSynth":{"name":"p5.MonoSynth","shortname":"p5.MonoSynth","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11247,"description":"

              A MonoSynth is used as a single voice for sound synthesis.\nThis is a class to be used in conjunction with the PolySynth\nclass. Custom synthetisers should be built inheriting from\nthis class.

              \n","is_constructor":1,"example":["\n
              \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n
              "]},"p5.OnsetDetect":{"name":"p5.OnsetDetect","shortname":"p5.OnsetDetect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11624,"description":"

              Listen for onsets (a sharp increase in volume) within a given\nfrequency range.

              \n","is_constructor":1,"params":[{"name":"freqLow","description":"

              Low frequency

              \n","type":"Number"},{"name":"freqHigh","description":"

              High frequency

              \n","type":"Number"},{"name":"threshold","description":"

              Amplitude threshold between 0 (no energy) and 1 (maximum)

              \n","type":"Number"},{"name":"callback","description":"

              Function to call when an onset is detected

              \n","type":"Function"}]},"p5.PolySynth":{"name":"p5.PolySynth","shortname":"p5.PolySynth","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11691,"description":"

              An AudioVoice is used as a single voice for sound synthesis.\nThe PolySynth class holds an array of AudioVoice, and deals\nwith voices allocations, with setting notes to be played, and\nparameters to be set.

              \n","is_constructor":1,"params":[{"name":"synthVoice","description":"

              A monophonic synth voice inheriting\n the AudioVoice class. Defaults to p5.MonoSynth

              \n","type":"Number","optional":true},{"name":"maxVoices","description":"

              Number of voices, defaults to 8;

              \n","type":"Number","optional":true}],"example":["\n
              \nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n
              "]}},"elements":{},"classitems":[{"file":"src/accessibility/describe.js","line":18,"description":"

              Creates a screen reader-accessible description of the canvas.

              \n

              The first parameter, text, is the description of the canvas.

              \n

              The second parameter, display, is optional. It determines how the\ndescription is displayed. If LABEL is passed, as in\ndescribe('A description.', LABEL), the description will be visible in\na div element next to the canvas. If FALLBACK is passed, as in\ndescribe('A description.', FALLBACK), the description will only be\nvisible to screen readers. This is the default mode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"describe","params":[{"name":"text","description":"

              description of the canvas.

              \n","type":"String"},{"name":"display","description":"

              either LABEL or FALLBACK.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas.\n describe('A pink square with a red heart in the bottom-right corner.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe('A pink square with a red heart in the bottom-right corner.', LABEL);\n}\n\n
              \n\n
              \n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);\n}\n\n
              \n\n
              \n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/describe.js","line":162,"description":"

              Creates a screen reader-accessible description of elements in the canvas.

              \n

              Elements are shapes or groups of shapes that create meaning together. For\nexample, a few overlapping circles could make an \"eye\" element.

              \n

              The first parameter, name, is the name of the element.

              \n

              The second parameter, text, is the description of the element.

              \n

              The third parameter, display, is optional. It determines how the\ndescription is displayed. If LABEL is passed, as in\ndescribe('A description.', LABEL), the description will be visible in\na div element next to the canvas. Using LABEL creates unhelpful\nduplicates for screen readers. Only use LABEL during development. If\nFALLBACK is passed, as in describe('A description.', FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"describeElement","params":[{"name":"name","description":"

              name of the element.

              \n","type":"String"},{"name":"text","description":"

              description of the element.

              \n","type":"String"},{"name":"display","description":"

              either LABEL or FALLBACK.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it.\n describeElement('Circle', 'A yellow circle in the top-left corner.');\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it.\n describeElement('Heart', 'A red heart in the bottom-right corner.');\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it. Display the\n // description for debugging.\n describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it. Display the\n // description for debugging.\n describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":10,"description":"

              Creates a screen reader-accessible description of shapes on the canvas.

              \n

              textOutput() adds a general description, list of shapes, and\ntable of shapes to the web page. The general description includes the\ncanvas size, canvas color, and number of shapes. For example,\nYour output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:.

              \n

              A list of shapes follows the general description. The list describes the\ncolor, location, and area of each shape. For example,\na red circle at middle covering 3% of the canvas. Each shape can be\nselected to get more details.

              \n

              textOutput() uses its table of shapes as a list. The table describes the\nshape, color, location, coordinates and area. For example,\nred circle location = middle area = 3%. This is different from\ngridOutput(), which uses its table as a grid.

              \n

              The display parameter is optional. It determines how the description is\ndisplayed. If LABEL is passed, as in textOutput(LABEL), the description\nwill be visible in a div element next to the canvas. Using LABEL creates\nunhelpful duplicates for screen readers. Only use LABEL during\ndevelopment. If FALLBACK is passed, as in textOutput(FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"textOutput","params":[{"name":"display","description":"

              either FALLBACK or LABEL.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n // Add the text description.\n textOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the text description.\n textOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":144,"description":"

              Creates a screen reader-accessible description of shapes on the canvas.

              \n

              gridOutput() adds a general description, table of shapes, and list of\nshapes to the web page. The general description includes the canvas size,\ncanvas color, and number of shapes. For example,\ngray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square.

              \n

              gridOutput() uses its table of shapes as a grid. Each shape in the grid\nis placed in a cell whose row and column correspond to the shape's location\non the canvas. The grid cells describe the color and type of shape at that\nlocation. For example, red circle. These descriptions can be selected\nindividually to get more details. This is different from\ntextOutput(), which uses its table as a list.

              \n

              A list of shapes follows the table. The list describes the color, type,\nlocation, and area of each shape. For example,\nred circle, location = middle, area = 3 %.

              \n

              The display parameter is optional. It determines how the description is\ndisplayed. If LABEL is passed, as in gridOutput(LABEL), the description\nwill be visible in a div element next to the canvas. Using LABEL creates\nunhelpful duplicates for screen readers. Only use LABEL during\ndevelopment. If FALLBACK is passed, as in gridOutput(FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"gridOutput","params":[{"name":"display","description":"

              either FALLBACK or LABEL.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n // Add the grid description.\n gridOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the grid description.\n gridOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/color/color_conversion.js","line":8,"description":"

              Conversions adapted from http://www.easyrgb.com/en/math.php.

              \n

              In these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":18,"description":"

              Convert an HSBA array to HSLA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":44,"description":"

              Convert an HSBA array to RGBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":99,"description":"

              Convert an HSLA array to HSBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":122,"description":"

              Convert an HSLA array to RGBA.

              \n

              We need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":186,"description":"

              Convert an RGBA array to HSBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":225,"description":"

              Convert an RGBA array to HSLA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"

              Gets the alpha (transparency) value of a color.

              \n

              alpha() extracts the alpha value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(0, 126, 255, 102);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [0, 126, 255, 102];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the left rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgba(0, 126, 255, 0.4)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":117,"description":"

              Gets the blue value of a color.

              \n

              blue() extracts the blue value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, blue() returns a color's blue value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the blue value in the given range.

              \n","itemtype":"method","name":"blue","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 86.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":253,"description":"

              Gets the brightness value of a color.

              \n

              brightness() extracts the HSB brightness value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, brightness() returns a color's HSB brightness in the range 0\nto 100. If the colorMode() is set to HSB, it\nreturns the brightness value in the given range.

              \n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color with values in the range 0-255.\n colorMode(HSB, 255);\n\n // Create a p5.Color object.\n let c = color(0, 127, 255);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 255.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":398,"description":"

              Creates a p5.Color object.

              \n

              By default, the parameters are interpreted as RGB values. Calling\ncolor(255, 204, 0) will return a bright yellow color. The way these\nparameters are interpreted may be changed with the\ncolorMode() function.

              \n

              The version of color() with one parameter interprets the value one of two\nways. If the parameter is a number, it's interpreted as a grayscale value.\nIf the parameter is a string, it's interpreted as a CSS color string.

              \n

              The version of color() with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.

              \n

              The version of color() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current colorMode().

              \n

              The version of color() with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current colorMode(). The last parameter\nsets the alpha (transparency) value.

              \n","itemtype":"method","name":"color","return":{"description":"resulting color.","type":"p5.Color"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(255, 204, 0);\n\n // Draw the square.\n fill(c);\n noStroke();\n square(30, 20, 55);\n\n describe('A yellow square on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(255, 204, 0);\n\n // Draw the left circle.\n fill(c1);\n noStroke();\n circle(25, 25, 80);\n\n // Create a p5.Color object using a grayscale value.\n let c2 = color(65);\n\n // Draw the right circle.\n fill(c2);\n circle(75, 75, 80);\n\n describe(\n 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a named color.\n let c = color('magenta');\n\n // Draw the square.\n fill(c);\n noStroke();\n square(20, 20, 60);\n\n describe('A magenta square on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a hex color code.\n let c1 = color('#0f0');\n\n // Draw the left rectangle.\n fill(c1);\n noStroke();\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a hex color code.\n let c2 = color('#00ff00');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two bright green rectangles on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a RGB color string.\n let c1 = color('rgb(0, 0, 255)');\n\n // Draw the top-left square.\n fill(c1);\n square(10, 10, 35);\n\n // Create a p5.Color object using a RGB color string.\n let c2 = color('rgb(0%, 0%, 100%)');\n\n // Draw the top-right square.\n fill(c2);\n square(55, 10, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c3 = color('rgba(0, 0, 255, 1)');\n\n // Draw the bottom-left square.\n fill(c3);\n square(10, 55, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c4 = color('rgba(0%, 0%, 100%, 1)');\n\n // Draw the bottom-right square.\n fill(c4);\n square(55, 55, 35);\n\n describe('Four blue squares in the corners of a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSL color string.\n let c1 = color('hsl(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSLA color string.\n let c2 = color('hsla(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSB color string.\n let c1 = color('hsb(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSBA color string.\n let c2 = color('hsba(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(50, 55, 100);\n\n // Draw the left rectangle.\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Switch the color mode to HSB.\n colorMode(HSB, 100);\n\n // Create a p5.Color object using HSB values.\n let c2 = color(50, 55, 100);\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":398,"params":[{"name":"gray","description":"

              number specifying value between white and black.

              \n","type":"Number"},{"name":"alpha","description":"

              alpha value relative to current color range\n (default is 0-255).

              \n","type":"Number","optional":true}],"return":{"description":"resulting color.","type":"p5.Color"}},{"line":652,"params":[{"name":"v1","description":"

              red or hue value relative to\n the current color range.

              \n","type":"Number"},{"name":"v2","description":"

              green or saturation value\n relative to the current color range.

              \n","type":"Number"},{"name":"v3","description":"

              blue or brightness value\n relative to the current color range.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":664,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":670,"params":[{"name":"values","description":"

              an array containing the red, green, blue,\n and alpha components of the color.

              \n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":677,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":692,"description":"

              Gets the green value of a color.

              \n

              green() extracts the green value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, green() returns a color's green value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the green value in the given range.

              \n","itemtype":"method","name":"green","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 39.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":828,"description":"

              Gets the hue value of a color.

              \n

              hue() extracts the hue value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              Hue describes a color's position on the color wheel. By default, hue()\nreturns a color's HSL hue in the range 0 to 360. If the\ncolorMode() is set to HSB or HSL, it returns the hue\nvalue in the given mode.

              \n","itemtype":"method","name":"hue","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":949,"description":"

              Blends two colors to find a third color between them.

              \n

              The amt parameter specifies the amount to interpolate between the two\nvalues. 0 is equal to the first color, 0.1 is very near the first color,\n0.5 is halfway between the two colors, and so on. Negative numbers are set\nto 0. Numbers greater than 1 are set to 1. This differs from the behavior of\nlerp. It's necessary because numbers outside of the\ninterval [0, 1] will produce strange and unexpected colors.

              \n

              The way that colors are interpolated depends on the current\ncolorMode().

              \n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"

              interpolate from this color.

              \n","type":"p5.Color"},{"name":"c2","description":"

              interpolate to this color.

              \n","type":"p5.Color"},{"name":"amt","description":"

              number between 0 and 1.

              \n","type":"Number"}],"return":{"description":"interpolated color.","type":"p5.Color"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Color objects to interpolate between.\n let from = color(218, 165, 32);\n let to = color(72, 61, 139);\n\n // Create intermediate colors.\n let interA = lerpColor(from, to, 0.33);\n let interB = lerpColor(from, to, 0.66);\n\n // Draw the left rectangle.\n noStroke();\n fill(from);\n rect(10, 20, 20, 60);\n\n // Draw the left-center rectangle.\n fill(interA);\n rect(30, 20, 20, 60);\n\n // Draw the right-center rectangle.\n fill(interB);\n rect(50, 20, 20, 60);\n\n // Draw the right rectangle.\n fill(to);\n rect(70, 20, 20, 60);\n\n describe(\n 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'\n );\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1071,"description":"

              Gets the lightness value of a color.

              \n

              lightness() extracts the HSL lightness value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, lightness() returns a color's HSL lightness in the range 0\nto 100. If the colorMode() is set to HSL, it\nreturns the lightness value in the given range.

              \n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 100, 75];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 191.5.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1216,"description":"

              Gets the red value of a color.

              \n

              red() extracts the red value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, red() returns a color's red value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the red value in the given range.

              \n","itemtype":"method","name":"red","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 69.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1352,"description":"

              Gets the saturation value of a color.

              \n

              saturation() extracts the saturation value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              Saturation is scaled differently in HSB and HSL. By default, saturation()\nreturns a color's HSL saturation in the range 0 to 100. If the\ncolorMode() is set to HSB or HSL, it returns the\nsaturation value in the given mode.

              \n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 50.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 255.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":14,"description":"

              CSS named colors.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":168,"description":"

              These regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.

              \n

              Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":181,"description":"

              Full color string patterns. The capture groups are necessary.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":362,"description":"

              Returns the color formatted as a String.

              \n

              Calling myColor.toString() can be useful for debugging, as in\nprint(myColor.toString()). It's also helpful for using p5.js with other\nlibraries.

              \n

              The parameter, format, is optional. If a format string is passed, as in\nmyColor.toString('#rrggbb'), it will determine how the color string is\nformatted. By default, color strings are formatted as 'rgba(r, g, b, a)'.

              \n","itemtype":"method","name":"toString","params":[{"name":"format","description":"

              how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.

              \n","type":"String","optional":true}],"return":{"description":"the formatted string.\n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n\n
              ","type":"String"},"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":571,"description":"

              Sets the red component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"

              the new red value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":613,"description":"

              Sets the green component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"

              the new green value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":655,"description":"

              Sets the blue component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"

              the new blue value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":697,"description":"

              Sets the alpha (transparency) value of a color.

              \n

              The range depends on the\ncolorMode(). In the default RGB mode it's\nbetween 0 and 255.

              \n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"

              the new alpha value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":789,"description":"

              Hue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":820,"description":"

              Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":1048,"description":"

              For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"

              Starts defining a shape that will mask any shapes drawn afterward.

              \n

              Any shapes drawn between beginClip() and\nendClip() will add to the mask shape. The mask\nwill apply to anything drawn after endClip().

              \n

              The parameter, options, is optional. If an object with an invert\nproperty is passed, as in beginClip({ invert: true }), it will be used to\nset the masking mode. { invert: true } inverts the mask, creating holes\nin shapes that are masked. invert is false by default.

              \n

              Masks can be contained between the\npush() and pop() functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.

              \n

              Masks can also be defined in a callback function that's passed to\nclip().

              \n","itemtype":"method","name":"beginClip","params":[{"name":"options","description":"

              an object containing clip settings.

              \n","type":"Object","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":190,"description":"

              Ends defining a mask that was started with\nbeginClip().

              \n","itemtype":"method","name":"endClip","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":222,"description":"

              Defines a shape that will mask any shapes drawn afterward.

              \n

              The first parameter, callback, is a function that defines the mask.\nAny shapes drawn in callback will add to the mask shape. The mask\nwill apply to anything drawn after clip() is called.

              \n

              The second parameter, options, is optional. If an object with an invert\nproperty is passed, as in beginClip({ invert: true }), it will be used to\nset the masking mode. { invert: true } inverts the mask, creating holes\nin shapes that are masked. invert is false by default.

              \n

              Masks can be contained between the\npush() and pop() functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.

              \n

              Masks can also be defined with beginClip()\nand endClip().

              \n","itemtype":"method","name":"clip","params":[{"name":"callback","description":"

              a function that draws the mask shape.

              \n","type":"Function"},{"name":"options","description":"

              an object containing clip settings.

              \n","type":"Object","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":414,"description":"

              Sets the color used for the background of the canvas.

              \n

              By default, the background is transparent. background() is typically used\nwithin draw() to clear the display window at the\nbeginning of each frame. It can also be used inside\nsetup() to set the background on the first frame\nof animation.

              \n

              The version of background() with one parameter interprets the value one\nof four ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color string.\nRGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the\nparameter is a p5.Color object, it will be used as\nthe background color. If the parameter is a\np5.Image object, it will be used as the background\nimage.

              \n

              The version of background() with two parameters interprets the first one\nas a grayscale value. The second parameter sets the alpha (transparency)\nvalue.

              \n

              The version of background() with three parameters interprets them as RGB,\nHSB, or HSL colors, depending on the current\ncolorMode(). By default, colors are specified\nin RGB values. Calling background(255, 204, 0) sets the background a bright\nyellow color.

              \n","itemtype":"method","name":"background","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value.\n background(51);\n\n describe('A canvas with a dark charcoal gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value and an alpha value.\n background(51, 0.4);\n describe('A canvas with a transparent gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // R, G & B values.\n background(255, 204, 0);\n\n describe('A canvas with a yellow background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n background(255, 204, 100);\n\n describe('A canvas with a royal blue background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A CSS named color.\n background('red');\n\n describe('A canvas with a red background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Three-digit hex RGB notation.\n background('#fae');\n\n describe('A canvas with a pink background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Six-digit hex RGB notation.\n background('#222222');\n\n describe('A canvas with a black background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGB notation.\n background('rgb(0, 255, 0)');\n\n describe('A canvas with a bright green background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGBA notation.\n background('rgba(0, 255, 0, 0.25)');\n\n describe('A canvas with a transparent green background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGB notation.\n background('rgb(100%, 0%, 10%)');\n\n describe('A canvas with a red background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGBA notation.\n background('rgba(100%, 0%, 100%, 0.5)');\n\n describe('A canvas with a transparent purple background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n background(c);\n\n describe('A canvas with a blue background.');\n}\n\n
              \n"],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":414,"params":[{"name":"color","description":"

              any value created by the color() function

              \n","type":"p5.Color"}],"chainable":1},{"line":608,"params":[{"name":"colorstring","description":"

              color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex.

              \n","type":"String"},{"name":"a","description":"

              opacity of the background relative to current\n color range (default is 0-255).

              \n","type":"Number","optional":true}],"chainable":1},{"line":618,"params":[{"name":"gray","description":"

              specifies a value between white and black.

              \n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":625,"params":[{"name":"v1","description":"

              red value if color mode is RGB, or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB, or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB, or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":634,"params":[{"name":"values","description":"

              an array containing the red, green, blue\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":641,"params":[{"name":"image","description":"

              image created with loadImage()\n or createImage(),\n to set as background.\n (must be same size as the sketch window).

              \n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":655,"description":"

              Clears the pixels on the canvas.

              \n

              clear() makes every pixel 100% transparent. Calling clear() doesn't\nclear objects created by createX() functions such as\ncreateGraphics(),\ncreateVideo(), and\ncreateImg(). These objects will remain\nunchanged after calling clear() and can be redrawn.

              \n

              In WebGL mode, this function can clear the screen to a specific color. It\ninterprets four numeric parameters as normalized RGBA color values. It also\nclears the depth buffer. If you are not using the WebGL renderer, these\nparameters will have no effect.

              \n","itemtype":"method","name":"clear","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');\n}\n\nfunction draw() {\n circle(mouseX, mouseY, 20);\n}\n\nfunction mousePressed() {\n clear();\n background(200);\n}\n\n
              \n\n
              \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n pg = createGraphics(60, 60);\n pg.background(200);\n pg.noStroke();\n pg.circle(pg.width / 2, pg.height / 2, 15);\n image(pg, 20, 20);\n\n describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n clear();\n image(pg, 20, 20);\n}\n\n
              "],"params":[{"name":"r","description":"

              normalized red value.

              \n","type":"Number","optional":true},{"name":"g","description":"

              normalized green value.

              \n","type":"Number","optional":true},{"name":"b","description":"

              normalized blue value.

              \n","type":"Number","optional":true},{"name":"a","description":"

              normalized alpha value.

              \n","type":"Number","optional":true}],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":733,"description":"

              Changes the way color values are interpreted.

              \n

              By default, the Number parameters for fill(),\nstroke(),\nbackground(), and\ncolor() are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to calling\ncolorMode(RGB, 255). Pure red is color(255, 0, 0) in this model.

              \n

              Calling colorMode(RGB, 100) sets colors to use RGB color values\nbetween 0 and 100. Pure red is color(100, 0, 0) in this model.

              \n

              Calling colorMode(HSB) or colorMode(HSL) changes to HSB or HSL system\ninstead of RGB. Pure red is color(0, 100, 100) in HSB and\ncolor(0, 100, 50) in HSL.

              \n

              p5.Color objects remember the mode that they were\ncreated in. Changing modes doesn't affect their appearance.

              \n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Fill with pure red.\n fill(255, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Fill with pure red.\n fill(100, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Fill with pure red.\n fill(0, 100, 100);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Fill with pure red.\n fill(0, 100, 50);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 0);\n point(x, y);\n }\n }\n\n describe(\n 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color with values in the range 0-100.\n colorMode(HSB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 100);\n point(x, y);\n }\n }\n\n describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let myColor = color(180, 175, 230);\n background(myColor);\n\n // Use RGB color with values in the range 0-1.\n colorMode(RGB, 1);\n\n // Get the red, green, and blue color components.\n let redValue = red(myColor);\n let greenValue = green(myColor);\n let blueValue = blue(myColor);\n\n // Round the color components for display.\n redValue = round(redValue, 2);\n greenValue = round(greenValue, 2);\n blueValue = round(blueValue, 2);\n\n // Display the color components.\n text(`Red: ${redValue}`, 10, 10, 80, 80);\n text(`Green: ${greenValue}`, 10, 40, 80, 80);\n text(`Blue: ${blueValue}`, 10, 70, 80, 80);\n\n describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Use RGB color with alpha values in the range 0-1.\n colorMode(RGB, 255, 255, 255, 1);\n\n noFill();\n strokeWeight(4);\n stroke(255, 0, 10, 0.3);\n circle(40, 40, 50);\n circle(50, 60, 50);\n\n describe('Two overlapping translucent pink circle outlines.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":733,"params":[{"name":"mode","description":"

              either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness).

              \n","type":"Constant"},{"name":"max","description":"

              range for all values.

              \n","type":"Number","optional":true}],"chainable":1},{"line":938,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"

              range for the red or hue depending on the\n current color mode.

              \n","type":"Number"},{"name":"max2","description":"

              range for the green or saturation depending\n on the current color mode.

              \n","type":"Number"},{"name":"max3","description":"

              range for the blue or brightness/lightness\n depending on the current color mode.

              \n","type":"Number"},{"name":"maxA","description":"

              range for the alpha.

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":982,"description":"

              Sets the color used to fill shapes.

              \n

              Calling fill(255, 165, 0) or fill('orange') means all shapes drawn\nafter the fill command will be filled with the color orange.

              \n

              The version of fill() with one parameter interprets the value one of\nthree ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color\nstring. A p5.Color object can also be provided to\nset the fill color.

              \n

              The version of fill() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current\ncolorMode(). The default color space is RGB,\nwith each value in the range from 0 to 255.

              \n","itemtype":"method","name":"fill","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n fill(51);\n square(20, 20, 60);\n\n describe('A dark charcoal gray square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n fill(255, 204, 0);\n square(20, 20, 60);\n\n describe('A yellow square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n fill(255, 204, 100);\n square(20, 20, 60);\n\n describe('A royal blue square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n fill('red');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n fill('#fae');\n square(20, 20, 60);\n\n describe('A pink square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n fill('#A251FA');\n square(20, 20, 60);\n\n describe('A purple square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n fill('rgb(0, 255, 0)');\n square(20, 20, 60);\n\n describe('A bright green square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n fill('rgba(0, 255, 0, 0.25)');\n square(20, 20, 60);\n\n describe('A soft green rectange with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n fill('rgb(100%, 0%, 10%)');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n fill('rgba(100%, 0%, 100%, 0.5)');\n square(20, 20, 60);\n\n describe('A dark fuchsia square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n fill(c);\n square(20, 20, 60);\n\n describe('A blue square with a black outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":982,"params":[{"name":"v1","description":"

              red value if color mode is RGB or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1187,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"chainable":1},{"line":1193,"params":[{"name":"gray","description":"

              a grayscale value.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1200,"params":[{"name":"values","description":"

              an array containing the red, green, blue &\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":1207,"params":[{"name":"color","description":"

              the fill color.

              \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":1219,"description":"

              Disables setting the fill color for shapes.

              \n

              Calling noFill() is the same as making the fill completely transparent,\nas in fill(0, 0). If both noStroke() and\nnoFill() are called, nothing will be drawn to the screen.

              \n","itemtype":"method","name":"noFill","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the top square.\n square(32, 10, 35);\n\n // Draw the bottom square.\n noFill();\n square(32, 55, 35);\n\n describe('A white square on above an empty square. Both squares have black outlines.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube wireframe spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noFill();\n stroke(100, 100, 240);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1279,"description":"

              Disables drawing points, lines, and the outlines of shapes.

              \n

              Calling noStroke() is the same as making the stroke completely transparent,\nas in stroke(0, 0). If both noStroke() and\nnoFill() are called, nothing will be drawn to the\nscreen.

              \n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n square(20, 20, 60);\n\n describe('A white square with no outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A pink cube with no edge outlines spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noStroke();\n fill(240, 150, 150);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1335,"description":"

              Sets the color used to draw points, lines, and the outlines of shapes.

              \n

              Calling stroke(255, 165, 0) or stroke('orange') means all shapes drawn\nafter calling stroke() will be filled with the color orange. The way\nthese parameters are interpreted may be changed with the\ncolorMode() function.

              \n

              The version of stroke() with one parameter interprets the value one of\nthree ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color\nstring. A p5.Color object can also be provided to\nset the stroke color.

              \n

              The version of stroke() with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.

              \n

              The version of stroke() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current colorMode().

              \n

              The version of stroke() with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current colorMode(). The last parameter\nsets the alpha (transparency) value.

              \n","itemtype":"method","name":"stroke","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n strokeWeight(4);\n stroke(51);\n square(20, 20, 60);\n\n describe('A white square with a dark charcoal gray outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n stroke(255, 204, 0);\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a yellow outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n strokeWeight(4);\n stroke(255, 204, 100);\n square(20, 20, 60);\n\n describe('A white square with a royal blue outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n stroke('red');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n stroke('#fae');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a pink outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n stroke('#222222');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n stroke('rgb(0, 255, 0)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A whiite square with a bright green outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n stroke('rgba(0, 255, 0, 0.25)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a soft green outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n stroke('rgb(100%, 0%, 10%)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n stroke('rgba(100%, 0%, 100%, 0.5)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a dark fuchsia outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n stroke(color(0, 0, 255));\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a blue outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":1335,"params":[{"name":"v1","description":"

              red value if color mode is RGB or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1558,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"chainable":1},{"line":1564,"params":[{"name":"gray","description":"

              a grayscale value.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1571,"params":[{"name":"values","description":"

              an array containing the red, green, blue,\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":1578,"params":[{"name":"color","description":"

              the stroke color.

              \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":1591,"description":"

              Starts using shapes to erase parts of the canvas.

              \n

              All drawing that follows erase() will subtract from the canvas, revealing\nthe web page underneath. The erased areas will become transparent, allowing\nthe content behind the canvas to show through. The\nfill(), stroke(), and\nblendMode() have no effect once erase() is\ncalled.

              \n

              The erase() function has two optional parameters. The first parameter\nsets the strength of erasing by the shape's interior. A value of 0 means\nthat no erasing will occur. A value of 255 means that the shape's interior\nwill fully erase the content underneath. The default value is 255\n(full strength).

              \n

              The second parameter sets the strength of erasing by the shape's edge. A\nvalue of 0 means that no erasing will occur. A value of 255 means that the\nshape's edge will fully erase the content underneath. The default value is\n255 (full strength).

              \n

              To cancel the erasing effect, use the noErase()\nfunction.

              \n

              erase() has no effect on drawing done with the\nimage() and\nbackground() functions.

              \n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"

              a number (0-255) for the strength of erasing under a shape's interior.\n Defaults to 255, which is full strength.

              \n","type":"Number","optional":true},{"name":"strengthStroke","description":"

              a number (0-255) for the strength of erasing under a shape's edge.\n Defaults to 255, which is full strength.

              \n","type":"Number","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n erase();\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n strokeWeight(5);\n erase(150, 255);\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1678,"description":"

              Ends erasing that was started with erase().

              \n

              The fill(), stroke(), and\nblendMode() settings will return to what they\nwere prior to calling erase().

              \n","itemtype":"method","name":"noErase","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(235, 145, 15);\n\n // Draw the left rectangle.\n noStroke();\n fill(30, 45, 220);\n rect(30, 10, 10, 80);\n\n // Erase a circle.\n erase();\n circle(50, 50, 60);\n noErase();\n\n // Draw the right rectangle.\n rect(70, 10, 10, 80);\n\n describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/core/friendly_errors/fes_core.js","line":1,"requires":["core\n\nThis is the main file for the Friendly Error System (FES)","containing\nthe core as well as miscellaneous functionality of the FES. Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either\n(1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","(4) helpForMisusedAtTopLevelCode","or (5) _fesErrorMonitor.\n\n_validateParameters is located in validate_params.js along with other code\nused for parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code\nused for dealing with file load errors.\nApart from this","there's also a file stacktrace.js","which contains the code\nto parse the error stack","borrowed from:\nhttps://github.com/stacktracejs/stacktrace.js\n\nFor more detailed information on the FES functions","including the call\nsequence of each function","please look at the FES Reference + Dev Notes:\nhttps://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":932,"description":"

              Prints out all the colors in the color pallete with white text.\nFor color blindness testing.

              \n","class":"p5","module":"Color"},{"file":"src/core/friendly_errors/file_errors.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/sketch_reader.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/stacktrace.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"

              This function does 3 things:

              \n
                \n

              1. Bounds the desired start/stop angles for an arc (in radians) so that:

                \n
                0 <= start < TWO_PI ;    start <= stop < start + TWO_PI\n
                \n

                This means that the arc rendering functions don't have to be concerned\nwith what happens if stop is smaller than start, or if the arc 'goes\nround more than once', etc.: they can just start at start and increase\nuntil stop and the correct arc will be drawn.

                \n
                2. \n

              2. Optionally adjusts the angles within each quadrant to counter the naive\nscaling of the underlying ellipse up from the unit circle. Without\nthis, the angles become arbitrary when width != height: 45 degrees\nmight be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\na 'tall' ellipse.

                \n
                3. \n

              3. Flags up when start and stop correspond to the same place on the\nunderlying ellipse. This is useful if you want to do something special\nthere (like rendering a whole ellipse instead).

                \n
                4. \n
              \n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"

              Draws an arc.

              \n

              An arc is a section of an ellipse defined by the x, y, w, and\nh parameters. x and y set the location of the arc's center. w and\nh set the arc's width and height. See\nellipse() and\nellipseMode() for more details.

              \n

              The fifth and sixth parameters, start and stop, set the angles\nbetween which to draw the arc. Arcs are always drawn clockwise from\nstart to stop. Angles are always given in radians.

              \n

              The seventh parameter, mode, is optional. It determines the arc's fill\nstyle. The fill modes are a semi-circle (OPEN), a closed semi-circle\n(CHORD), or a closed pie segment (PIE).

              \n

              The eighth parameter, detail, is also optional. It determines how many\nvertices are used to draw the arc in WebGL mode. The default value is 25.

              \n","itemtype":"method","name":"arc","params":[{"name":"x","description":"

              x-coordinate of the arc's ellipse.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the arc's ellipse.

              \n","type":"Number"},{"name":"w","description":"

              width of the arc's ellipse by default.

              \n","type":"Number"},{"name":"h","description":"

              height of the arc's ellipse by default.

              \n","type":"Number"},{"name":"start","description":"

              angle to start the arc, specified in radians.

              \n","type":"Number"},{"name":"stop","description":"

              angle to stop the arc, specified in radians.

              \n","type":"Number"},{"name":"mode","description":"

              optional parameter to determine the way of drawing\n the arc. either CHORD, PIE, or OPEN.

              \n","type":"Constant","optional":true},{"name":"detail","description":"

              optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25. Won't\n draw a stroke for a detail of more than 50.

              \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 80, 0, PI + HALF_PI);\n\n describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 40, 0, PI + HALF_PI);\n\n describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Bottom-right.\n arc(50, 55, 50, 50, 0, HALF_PI);\n\n noFill();\n\n // Bottom-left.\n arc(50, 55, 60, 60, HALF_PI, PI);\n\n // Top-left.\n arc(50, 55, 70, 70, PI, PI + QUARTER_PI);\n\n // Top-right.\n arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n describe(\n 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Default fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n describe('A white circle with the top-right third missing. The bottom is outlined in black.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // OPEN fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n describe(\n 'A white circle missing a section from the top-right. The bottom is outlined in black.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // CHORD fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n describe('A white circle with a black outline missing a section from the top-right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // PIE fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode with 5 vertices.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A yellow circle on a black background. The circle opens and closes its mouth.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the arc.\n noStroke();\n fill(255, 255, 0);\n\n // Update start and stop angles.\n let biteSize = PI / 16;\n let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;\n let endAngle = TWO_PI - startAngle;\n\n // Draw the arc.\n arc(50, 50, 80, 80, startAngle, endAngle, PIE);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":373,"description":"

              Draws an ellipse (oval).

              \n

              An ellipse is a round shape defined by the x, y, w, and\nh parameters. x and y set the location of its center. w and\nh set its width and height. See\nellipseMode() for other ways to set\nits position.

              \n

              If no height is set, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is\ntaken.

              \n

              The fifth parameter, detail, is also optional. It determines how many\nvertices are used to draw the ellipse in WebGL mode. The default value is\n25.

              \n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 80);\n\n describe('A white circle on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80);\n\n describe('A white circle on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n ellipse(0, 0, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Use 6 vertices.\n ellipse(0, 0, 80, 40, 6);\n\n describe('A white hexagon on a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":373,"params":[{"name":"x","description":"

              x-coordinate of the center of the ellipse.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the center of the ellipse.

              \n","type":"Number"},{"name":"w","description":"

              width of the ellipse.

              \n","type":"Number"},{"name":"h","description":"

              height of the ellipse.

              \n","type":"Number","optional":true}],"chainable":1},{"line":474,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"

              optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the ellipse. Default value is 25. Won't\n draw a stroke for a detail of more than 50.

              \n","type":"Integer","optional":true}]}]},{"file":"src/core/shape/2d_primitives.js","line":490,"description":"

              Draws a circle.

              \n

              A circle is a round shape defined by the x, y, and d\nparameters. x and y set the location of its center. d sets its\nwidth and height (diameter). Every point on the circle's edge is the\nsame distance, d, from its center. See\nellipseMode() for other ways to set\nits position.

              \n","itemtype":"method","name":"circle","params":[{"name":"x","description":"

              x-coordinate of the center of the circle.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the center of the circle.

              \n","type":"Number"},{"name":"d","description":"

              diameter of the circle.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n circle(50, 50, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":574,"description":"

              Draws a straight line between two points.

              \n

              A line's default width is one pixel. The version of line() with four\nparameters draws the line in 2D. To color a line, use the\nstroke() function. To change its width, use the\nstrokeWeight() function. A line\ncan't be filled, so the fill() function won't\naffect the line's color.

              \n

              The version of line() with six parameters allows the line to be drawn in\n3D space. Doing so requires adding the WEBGL argument to\ncreateCanvas().

              \n","itemtype":"method","name":"line","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n stroke('magenta');\n strokeWeight(5);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(30, 20, 85, 20);\n\n // Right.\n stroke(126);\n line(85, 20, 85, 75);\n\n // Bottom.\n stroke(255);\n line(85, 75, 30, 75);\n\n describe(\n 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n line(-20, -30, 35, 25);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black line connecting two spheres. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw a line.\n line(0, 0, 0, 30, 20, -10);\n\n // Draw the center sphere.\n sphere(10);\n\n // Translate to the second point.\n translate(30, 20, -10);\n\n // Draw the bottom-right sphere.\n sphere(10);\n}\n\n
              \n"],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":574,"params":[{"name":"x1","description":"

              the x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              the y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              the x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              the y-coordinate of the second point.

              \n","type":"Number"}],"chainable":1},{"line":706,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              the z-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              the z-coordinate of the second point.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":731,"description":"

              Draws a single point in space.

              \n

              A point's default width is one pixel. To color a point, use the\nstroke() function. To change its width, use the\nstrokeWeight() function. A point\ncan't be filled, so the fill() function won't\naffect the point's color.

              \n

              The version of point() with one parameter allows the point's location to\nbe set with its x- and y-coordinates, as in point(10, 20).

              \n

              The version of point() with three parameters allows the point to be drawn\nin 3D space with x-, y-, and z-coordinates, as in point(10, 20, 30).\nDoing so requires adding the WEBGL argument to\ncreateCanvas().

              \n

              The version of point() with one parameter allows the point's location to\nbe set with a p5.Vector object.

              \n","itemtype":"method","name":"point","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(85, 20);\n\n // Bottom-right.\n point(85, 75);\n\n // Bottom-left.\n point(30, 75);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(70, 20);\n\n // Style the next points.\n stroke('purple');\n strokeWeight(10);\n\n // Bottom-right.\n point(70, 80);\n\n // Bottom-left.\n point(30, 80);\n\n describe(\n 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let a = createVector(30, 20);\n point(a);\n\n // Top-right.\n let b = createVector(70, 20);\n point(b);\n\n // Bottom-right.\n let c = createVector(70, 80);\n point(c);\n\n // Bottom-left.\n let d = createVector(30, 80);\n point(d);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30);\n\n // Bottom-right.\n point(20, 30);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30, 0);\n\n // Bottom-right.\n point(20, 30, -50);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":731,"params":[{"name":"x","description":"

              the x-coordinate.

              \n","type":"Number"},{"name":"y","description":"

              the y-coordinate.

              \n","type":"Number"},{"name":"z","description":"

              the z-coordinate (for WebGL mode).

              \n","type":"Number","optional":true}],"chainable":1},{"line":895,"params":[{"name":"coordinateVector","description":"

              the coordinate vector.

              \n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":923,"description":"

              Draws a quadrilateral (four-sided shape).

              \n

              Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The\nfirst pair of parameters (x1, y1) sets the quad's first point. The next\nthree pairs of parameters set the coordinates for its next three points\n(x2, y2), (x3, y3), and (x4, y4). Points should be added in either\nclockwise or counter-clockwise order.

              \n

              The version of quad() with twelve parameters allows the quad to be drawn\nin 3D space. Doing so requires adding the WEBGL argument to\ncreateCanvas().

              \n

              The thirteenth and fourteenth parameters are optional. In WebGL mode, they\nset the number of segments used to draw the quadrilateral in the x- and\ny-directions. They're both 25 by default.

              \n","itemtype":"method","name":"quad","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 20, 80, 20, 80, 80, 20, 80);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 30, 80, 30, 80, 70, 20, 70);\n\n describe('A white rectangle with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(50, 62, 86, 50, 50, 38, 14, 50);\n\n describe('A white rhombus with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 50, 80, 30, 80, 70, 20, 70);\n\n describe('A white trapezoid with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n quad(-30, -30, 30, -30, 30, 30, -30, 30);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A wavy white surface spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the quad.\n quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":923,"params":[{"name":"x1","description":"

              the x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              the y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              the x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              the y-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"

              the x-coordinate of the third point.

              \n","type":"Number"},{"name":"y3","description":"

              the y-coordinate of the third point.

              \n","type":"Number"},{"name":"x4","description":"

              the x-coordinate of the fourth point.

              \n","type":"Number"},{"name":"y4","description":"

              the y-coordinate of the fourth point.

              \n","type":"Number"},{"name":"detailX","description":"

              number of segments in the x-direction.

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of segments in the y-direction.

              \n","type":"Integer","optional":true}],"chainable":1},{"line":1043,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              the z-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              the z-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              the z-coordinate of the third point.

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              the z-coordinate of the fourth point.

              \n","type":"Number"},{"name":"detailX","description":"","type":"Integer","optional":true},{"name":"detailY","description":"","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":1086,"description":"

              Draws a rectangle.

              \n

              A rectangle is a four-sided shape defined by the x, y, w, and h\nparameters. x and y set the location of its top-left corner. w sets\nits width and h sets its height. Every angle in the rectangle measures\n90˚. See rectMode() for other ways to define\nrectangles.

              \n

              The version of rect() with five parameters creates a rounded rectangle. The\nfifth parameter sets the radius for all four corners.

              \n

              The version of rect() with eight parameters also creates a rounded\nrectangle. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nrectangle. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.

              \n","itemtype":"method","name":"rect","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 40);\n\n describe('A white rectangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n rect(30, 20, 55, 50, 20);\n\n describe('A white rectangle with a black outline and round edges on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n rect(30, 20, 55, 50, 20, 15, 10, 5);\n\n describe('A white rectangle with a black outline and round edges of different radii.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n rect(-20, -30, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the rectangle.\n rect(-20, -30, 55, 55);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":1086,"params":[{"name":"x","description":"

              x-coordinate of the rectangle.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the rectangle.

              \n","type":"Number"},{"name":"w","description":"

              width of the rectangle.

              \n","type":"Number"},{"name":"h","description":"

              height of the rectangle.

              \n","type":"Number","optional":true},{"name":"tl","description":"

              optional radius of top-left corner.

              \n","type":"Number","optional":true},{"name":"tr","description":"

              optional radius of top-right corner.

              \n","type":"Number","optional":true},{"name":"br","description":"

              optional radius of bottom-right corner.

              \n","type":"Number","optional":true},{"name":"bl","description":"

              optional radius of bottom-left corner.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1209,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"

              number of segments in the x-direction (for WebGL mode).

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of segments in the y-direction (for WebGL mode).

              \n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":1224,"description":"

              Draws a square.

              \n

              A square is a four-sided shape defined by the x, y, and s\nparameters. x and y set the location of its top-left corner. s sets\nits width and height. Every angle in the square measures 90˚ and all its\nsides are the same length. See rectMode() for\nother ways to define squares.

              \n

              The version of square() with four parameters creates a rounded square.\nThe fourth parameter sets the radius for all four corners.

              \n

              The version of square() with seven parameters also creates a rounded\nsquare. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nsquare. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.

              \n","itemtype":"method","name":"square","params":[{"name":"x","description":"

              x-coordinate of the square.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the square.

              \n","type":"Number"},{"name":"s","description":"

              side size of the square.

              \n","type":"Number"},{"name":"tl","description":"

              optional radius of top-left corner.

              \n","type":"Number","optional":true},{"name":"tr","description":"

              optional radius of top-right corner.

              \n","type":"Number","optional":true},{"name":"br","description":"

              optional radius of bottom-right corner.

              \n","type":"Number","optional":true},{"name":"bl","description":"

              optional radius of bottom-left corner.

              \n","type":"Number","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n square(30, 20, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n square(30, 20, 55, 20);\n\n describe(\n 'A white square with a black outline and round edges on a gray canvas.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n square(30, 20, 55, 20, 15, 10, 5);\n\n describe('A white square with a black outline and round edges of different radii.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n square(-20, -30, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the square.\n square(-20, -30, 55);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":1371,"description":"

              Draws a triangle.

              \n

              A triangle is a three-sided shape defined by three points. The\nfirst two parameters specify the triangle's first point (x1, y1). The\nmiddle two parameters specify its second point (x2, y2). And the last two\nparameters specify its third point (x3, y3).

              \n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"

              x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the third point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the third point.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n triangle(30, 75, 58, 20, 86, 75);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n triangle(-20, 25, 8, -30, 36, 25);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white triangle spins around on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the triangle.\n triangle(-20, 25, 8, -30, 36, 25);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"

              Changes where ellipses, circles, and arcs are drawn.

              \n

              By default, the first two parameters of\nellipse(), circle(),\nand arc()\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\nellipseMode(CENTER).

              \n

              ellipseMode(RADIUS) also uses the first two parameters to set the x- and\ny-coordinates of the shape's center. The next parameters are half of the\nshapes's width and height. Calling ellipse(0, 0, 10, 15) draws a shape\nwith a width of 20 and height of 30.

              \n

              ellipseMode(CORNER) uses the first two parameters as the upper-left\ncorner of the shape. The next parameters are its width and height.

              \n

              ellipseMode(CORNERS) uses the first two parameters as the location of one\ncorner of the ellipse's bounding box. The next parameters are the location\nof the opposite corner.

              \n

              The argument passed to ellipseMode() must be written in ALL CAPS because\nthe constants CENTER, RADIUS, CORNER, and CORNERS are defined this\nway. JavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"

              either CENTER, RADIUS, CORNER, or CORNERS

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(RADIUS);\n fill(255);\n ellipse(50, 50, 30, 30);\n\n // Gray ellipse.\n ellipseMode(CENTER);\n fill(100);\n ellipse(50, 50, 30, 30);\n\n describe('A white circle with a gray circle at its center. Both circles have black outlines.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(CORNER);\n fill(255);\n ellipse(25, 25, 50, 50);\n\n // Gray ellipse.\n ellipseMode(CORNERS);\n fill(100);\n ellipse(25, 25, 50, 50);\n\n describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":100,"description":"

              Draws certain features with jagged (aliased) edges.

              \n

              smooth() is active by default. In 2D mode,\nnoSmooth() is helpful for scaling up images without blurring. The\nfunctions don't affect shapes or fonts.

              \n

              In WebGL mode, noSmooth() causes all shapes to be drawn with jagged\n(aliased) edges. The functions don't affect images or fonts.

              \n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n
              \n\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"

              Changes where rectangles and squares are drawn.

              \n

              By default, the first two parameters of\nrect() and square(),\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\nrectMode(CORNER).

              \n

              rectMode(CORNERS) also uses the first two parameters as the location of\none of the corners. The next parameters are the location of the opposite\ncorner. This mode only works for rect().

              \n

              rectMode(CENTER) uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are its width and\nheight.

              \n

              rectMode(RADIUS) also uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are\nhalf of the shape's width and height.

              \n

              The argument passed to rectMode() must be written in ALL CAPS because the\nconstants CENTER, RADIUS, CORNER, and CORNERS are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"

              either CORNER, CORNERS, CENTER, or RADIUS

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n rect(25, 25, 50, 50);\n\n rectMode(CORNERS);\n fill(100);\n rect(25, 25, 50, 50);\n\n describe('A small gray square drawn at the top-left corner of a white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n rect(50, 50, 30, 30);\n\n rectMode(CENTER);\n fill(100);\n rect(50, 50, 30, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n square(25, 25, 50);\n\n describe('A white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n square(50, 50, 30);\n\n rectMode(CENTER);\n fill(100);\n square(50, 50, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":303,"description":"

              Draws certain features with smooth (antialiased) edges.

              \n

              smooth() is active by default. In 2D mode,\nnoSmooth() is helpful for scaling up images\nwithout blurring. The functions don't affect shapes or fonts.

              \n

              In WebGL mode, noSmooth() causes all shapes to\nbe drawn with jagged (aliased) edges. The functions don't affect images or\nfonts.

              \n","itemtype":"method","name":"smooth","chainable":1,"example":["\n
              \n\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":387,"description":"

              Sets the style for rendering the ends of lines.

              \n

              The caps for line endings are either rounded (ROUND), squared\n(SQUARE), or extended (PROJECT). The default cap is ROUND.

              \n

              The argument passed to strokeCap() must be written in ALL CAPS because\nthe constants ROUND, SQUARE, and PROJECT are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"

              either ROUND, SQUARE, or PROJECT

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(12);\n\n // Top.\n strokeCap(ROUND);\n line(20, 30, 80, 30);\n\n // Middle.\n strokeCap(SQUARE);\n line(20, 50, 80, 50);\n\n // Bottom.\n strokeCap(PROJECT);\n line(20, 70, 80, 70);\n\n describe(\n 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":441,"description":"

              Sets the style of the joints that connect line segments.

              \n

              Joints are either mitered (MITER), beveled (BEVEL), or rounded\n(ROUND). The default joint is MITER in 2D mode and ROUND in WebGL\nmode.

              \n

              The argument passed to strokeJoin() must be written in ALL CAPS because\nthe constants MITER, BEVEL, and ROUND are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"

              either MITER, BEVEL, or ROUND

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(MITER);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(BEVEL);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a flat tip in center of canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(ROUND);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":540,"description":"

              Sets the width of the stroke used for points, lines, and the outlines of\nshapes.

              \n

              Note: strokeWeight() is affected by transformations, especially calls to\nscale().

              \n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"

              the weight of the stroke (in pixels).

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Middle.\n strokeWeight(4);\n line(20, 40, 80, 40);\n\n // Bottom.\n strokeWeight(10);\n line(20, 70, 80, 70);\n\n describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Scale by a factor of 5.\n scale(5);\n\n // Bottom. Coordinates are adjusted for scaling.\n line(4, 8, 16, 8);\n\n describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"

              Draws a cubic Bezier curve on the screen. These curves are defined by a\nseries of anchor and control points. The first two parameters specify\nthe first anchor point and the last two parameters specify the other\nanchor point, which become the first and last points on the curve. The\nmiddle parameters specify the two control points which define the shape\nof the curve. Approximately speaking, control points \"pull\" the curve\ntowards them.

              \n

              Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also curve().

              \n","itemtype":"method","name":"bezier","chainable":1,"example":["\n
              \n\nnoFill();\nstroke(255, 102, 0);\nline(85, 20, 10, 10);\nline(90, 90, 15, 80);\nstroke(0, 0, 0);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n
              \n\n
              \n\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n\n
              "],"alt":"stretched black s-shape in center with orange lines extending from end points.\na white colored curve on black background from the upper-right corner to the lower right corner.","class":"p5","module":"Shape","submodule":"Curves","overloads":[{"line":13,"params":[{"name":"x1","description":"

              x-coordinate for the first anchor point

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate for the first anchor point

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate for the first control point

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate for the first control point

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate for the second control point

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate for the second control point

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate for the second anchor point

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate for the second anchor point

              \n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              z-coordinate for the first anchor point

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate for the first control point

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate for the second control point

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate for the second anchor point

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"

              Sets the resolution at which Bezier's curve is displayed. The default value is 20.

              \n

              Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.

              \n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"

              resolution of the curves

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n bezierDetail(5);\n}\n\nfunction draw() {\n background(200);\n bezier(\n -40, -40, 0,\n 90, -40, 0,\n -90, 40, 0,\n 40, 40, 0\n );\n}\n\n
              "],"alt":"stretched black s-shape with a low level of bezier detail","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":131,"description":"

              Given the x or y co-ordinate values of control and anchor points of a bezier\ncurve, it evaluates the x or y coordinate of the bezier at position t. The\nparameters a and d are the x or y coordinates of first and last points on the\ncurve while b and c are of the control points.The final parameter t is the\nposition of the resultant point which is given between 0 and 1.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a bezier curve at t.

              \n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"

              coordinate of first point on the curve

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first control point

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second control point

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second point on the curve

              \n","type":"Number"},{"name":"t","description":"

              value between 0 and 1

              \n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n
              \n\nnoFill();\nlet x1 = 85,\n x2 = 10,\n x3 = 90,\n x4 = 15;\nlet y1 = 20,\n y2 = 10,\n y3 = 90,\n y4 = 80;\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\nfill(255);\nlet steps = 10;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n circle(x, y, 5);\n}\n\n
              "],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":186,"description":"

              Evaluates the tangent to the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.

              \n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"

              coordinate of first point on the curve

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first control point

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second control point

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second point on the curve

              \n","type":"Number"},{"name":"t","description":"

              value between 0 and 1

              \n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n
              \n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nlet steps = 6;\nfill(255);\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n // Get the location of the point\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n // Get the tangent points\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n // Calculate an angle from the tangent points\n let a = atan2(ty, tx);\n a += PI;\n stroke(255, 102, 0);\n line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\n // The following line of code makes a line\n // inverse of the above line\n //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n stroke(0);\n ellipse(x, y, 5, 5);\n}\n\n
              \n\n
              \n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nstroke(255, 102, 0);\nlet steps = 16;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n let a = atan2(ty, tx);\n a -= HALF_PI;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
              "],"alt":"s-shaped line with 6 short orange lines showing the tangents at those points.\ns-shaped line with 6 short orange lines showing lines coming out the underside of the bezier.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":265,"description":"

              Draws a curved line on the screen between two points, given as the\nmiddle four parameters. The first two parameters are a control point, as\nif the curve came from this point even though it's not drawn. The last\ntwo parameters similarly describe the other control point.

              \nLonger curves can be created by putting a series of curve() functions\ntogether or using curveVertex(). An additional function called\ncurveTightness() provides control for the visual quality of the curve.\nThe curve() function is an implementation of Catmull-Rom splines.

              \n","itemtype":"method","name":"curve","chainable":1,"example":["\n
              \n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\nstroke(0);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nstroke(255, 102, 0);\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\n\n
              \n\n
              \n\n// Define the curve points as JavaScript objects\nlet p1 = { x: 5, y: 26 };\nlet p2 = { x: 73, y: 24 };\nlet p3 = { x: 73, y: 61 };\nlet p4 = { x: 15, y: 65 };\nnoFill();\nstroke(255, 102, 0);\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\nstroke(0);\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\nstroke(255, 102, 0);\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\n\n
              \n\n
              \n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\nstroke(0);\ncurve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\nstroke(255, 102, 0);\ncurve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\n\n
              "],"alt":"horseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\ncurving black and orange lines.","class":"p5","module":"Shape","submodule":"Curves","overloads":[{"line":265,"params":[{"name":"x1","description":"

              x-coordinate for the beginning control point

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate for the beginning control point

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate for the first point

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate for the first point

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate for the second point

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate for the second point

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate for the ending control point

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate for the ending control point

              \n","type":"Number"}],"chainable":1},{"line":333,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              z-coordinate for the beginning control point

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate for the first point

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate for the second point

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate for the ending control point

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":359,"description":"

              Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.

              \n

              This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.

              \n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"

              resolution of the curves

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n curveDetail(5);\n}\nfunction draw() {\n background(200);\n\n curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);\n}\n\n
              "],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":399,"description":"

              Modifies the quality of forms created with curve()\nand curveVertex().The parameter tightness\ndetermines how the curve fits to the vertex points. The value 0.0 is the\ndefault value for tightness (this value defines the curves to be Catmull-Rom\nsplines) and the value 1.0 connects all the points with straight lines.\nValues within the range -5.0 and 5.0 will deform the curves but will leave\nthem recognizable and as values increase in magnitude, they will continue to deform.

              \n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"

              amount of deformation from the original vertices

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Move the mouse left and right to see the curve change\nfunction setup() {\n createCanvas(100, 100);\n noFill();\n}\n\nfunction draw() {\n background(204);\n let t = map(mouseX, 0, width, -5, 5);\n curveTightness(t);\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n\n
              "],"alt":"Line shaped like right-facing arrow,points move with mouse-x and warp shape.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":445,"description":"

              Evaluates the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are control points\nof the curve, and b and c are the start and end points of the curve.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a curve at t.

              \n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"

              coordinate of first control point of the curve

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first point

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second point

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second control point

              \n","type":"Number"},{"name":"t","description":"

              value between 0 and 1

              \n","type":"Number"}],"return":{"description":"Curve value at position t","type":"Number"},"example":["\n
              \n\nnoFill();\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nfill(255);\nellipseMode(CENTER);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 5, 73, 73, t);\n let y = curvePoint(26, 26, 24, 61, t);\n ellipse(x, y, 5, 5);\n x = curvePoint(5, 73, 73, 15, t);\n y = curvePoint(26, 24, 61, 65, t);\n ellipse(x, y, 5, 5);\n}\n\n
              \n\nline hooking down to right-bottom with 13 5×5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":494,"description":"

              Evaluates the tangent to the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points on the curve,\nand b and c are the control points.

              \n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"

              coordinate of first control point

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first point on the curve

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second point on the curve

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second conrol point

              \n","type":"Number"},{"name":"t","description":"

              value between 0 and 1

              \n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n
              \n\nnoFill();\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 73, 73, 15, t);\n let y = curvePoint(26, 24, 61, 65, t);\n //ellipse(x, y, 5, 5);\n let tx = curveTangent(5, 73, 73, 15, t);\n let ty = curveTangent(26, 24, 61, 65, t);\n let a = atan2(ty, tx);\n a -= PI / 2.0;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
              "],"alt":"right curving line mid-right of canvas with 7 short lines radiating from it.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/vertex.js","line":20,"description":"

              Use the beginContour() and\nendContour() functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must \"wind\" in the opposite direction\nfrom the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.

              \n

              These functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.

              \n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n
              \n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
              "],"alt":"white rect and smaller grey rect with red outlines in center of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":71,"description":"

              Using the beginShape() and endShape() functions allow creating more\ncomplex forms. beginShape() begins recording vertices for a shape and\nendShape() stops recording. The value of the kind parameter tells it which\ntypes of shapes to create from the provided vertices. With no mode\nspecified, the shape can be any irregular polygon.

              \n

              The parameters available for beginShape() are:

              \n

              POINTS\nDraw a series of points

              \n

              LINES\nDraw a series of unconnected line segments (individual lines)

              \n

              TRIANGLES\nDraw a series of separate triangles

              \n

              TRIANGLE_FAN\nDraw a series of connected triangles sharing the first vertex in a fan-like fashion

              \n

              TRIANGLE_STRIP\nDraw a series of connected triangles in strip fashion

              \n

              QUADS\nDraw a series of separate quads

              \n

              QUAD_STRIP\nDraw quad strip using adjacent edges to form the next quad

              \n

              TESS (WEBGL only)\nHandle irregular polygon for filling curve by explicit tessellation

              \n

              After calling the beginShape() function, a series of vertex() commands must follow. To stop\ndrawing the shape, call endShape(). Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.

              \n

              Transformations such as translate(), rotate(), and scale() do not work\nwithin beginShape(). It is also not possible to use other shapes, such as\nellipse() or rect() within beginShape().

              \n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"

              either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS

              \n","type":"Constant","optional":true}],"chainable":1,"example":["\n
              \n\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
              \n\n
              \n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
              \n\n
              \n\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
              \n\n
              \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
              \n\n
              \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
              \n\n
              \n\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n\n
              \n\n
              \n\nbeginShape(TRIANGLE_STRIP);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nvertex(90, 75);\nendShape();\n\n
              \n\n
              \n\nbeginShape(TRIANGLE_FAN);\nvertex(57.5, 50);\nvertex(57.5, 15);\nvertex(92, 50);\nvertex(57.5, 85);\nvertex(22, 50);\nvertex(57.5, 15);\nendShape();\n\n
              \n\n
              \n\nbeginShape(QUADS);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 75);\nvertex(50, 20);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 75);\nvertex(85, 20);\nendShape();\n\n
              \n\n
              \n\nbeginShape(QUAD_STRIP);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 20);\nvertex(50, 75);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 20);\nvertex(85, 75);\nendShape();\n\n
              \n\n
              \n\nbeginShape(TESS);\nvertex(20, 20);\nvertex(80, 20);\nvertex(80, 40);\nvertex(40, 40);\nvertex(40, 60);\nvertex(80, 60);\nvertex(80, 80);\nvertex(20, 80);\nendShape(CLOSE);\n\n
              "],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20×55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":297,"description":"

              Specifies vertex coordinates for Bezier curves. Each call to\nbezierVertex() defines the position of two control points and\none anchor point of a Bezier curve, adding a new segment to a\nline or shape. For WebGL mode bezierVertex() can be used in 2D\nas well as 3D mode. 2D mode expects 6 parameters, while 3D mode\nexpects 9 parameters (including z coordinates).

              \n

              The first time bezierVertex() is used within a beginShape()\ncall, it must be prefaced with a call to vertex() to set the first anchor\npoint. This function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().

              \n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n
              \n\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n\n
              \n\n
              \n\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n}\nfunction draw() {\n orbitControl();\n background(50);\n strokeWeight(4);\n stroke(255);\n point(-25, 30);\n point(25, 30);\n point(25, -30);\n point(-25, -30);\n\n strokeWeight(1);\n noFill();\n\n beginShape();\n vertex(-25, 30);\n bezierVertex(25, 30, 25, -30, -25, -30);\n endShape();\n\n beginShape();\n vertex(-25, 30, 20);\n bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);\n endShape();\n}\n\n
              "],"alt":"crescent-shaped line in middle of canvas. Points facing left.\nwhite crescent shape in middle of canvas. Points facing left.\ncrescent shape in middle of canvas with another crescent shape on positive z-axis.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":297,"params":[{"name":"x2","description":"

              x-coordinate for the first control point

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate for the first control point

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate for the second control point

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate for the second control point

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate for the anchor point

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate for the anchor point

              \n","type":"Number"}],"chainable":1},{"line":379,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate for the first control point (for WebGL mode)

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate for the second control point (for WebGL mode)

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate for the anchor point (for WebGL mode)

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":419,"description":"

              Specifies vertex coordinates for curves. This function may only\nbe used between beginShape() and endShape() and only when there\nis no MODE parameter specified to beginShape().\nFor WebGL mode curveVertex() can be used in 2D as well as 3D mode.\n2D mode expects 2 parameters, while 3D mode expects 3 parameters.

              \n

              The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.

              \n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n
              \n\nstrokeWeight(5);\npoint(84, 91);\npoint(68, 19);\npoint(21, 17);\npoint(32, 91);\nstrokeWeight(1);\n\nnoFill();\nbeginShape();\ncurveVertex(84, 91);\ncurveVertex(84, 91);\ncurveVertex(68, 19);\ncurveVertex(21, 17);\ncurveVertex(32, 91);\ncurveVertex(32, 91);\nendShape();\n\n
              "],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":419,"params":[{"name":"x","description":"

              x-coordinate of the vertex

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the vertex

              \n","type":"Number"}],"chainable":1},{"line":464,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"

              z-coordinate of the vertex (for WebGL mode)

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":528,"description":"

              Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must \"wind\" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.

              \n

              These functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.

              \n","itemtype":"method","name":"endContour","chainable":1,"example":["\n
              \n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
              "],"alt":"white rect and smaller grey rect with red outlines in center of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":591,"description":"

              The endShape() function is the companion to beginShape() and may only be\ncalled after beginShape(). When endShape() is called, all of the image\ndata defined since the previous call to beginShape() is written into the image\nbuffer. The constant CLOSE is the value for the mode parameter to close\nthe shape (to connect the beginning and the end).\nWhen using instancing with endShape() the instancing will not apply to the strokes.\nWhen the count parameter is used with a value greater than 1, it enables instancing for shapes built when in WEBGL mode. Instancing\nis a feature that allows the GPU to efficiently draw multiples of the same shape. It's often used for particle effects or other\ntimes when you need a lot of repetition. In order to take advantage of instancing, you will also need to write your own custom\nshader using the gl_InstanceID keyword. You can read more about instancing\nhere or by working from the example on this\npage.

              \n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"

              use CLOSE to close the shape

              \n","type":"Constant","optional":true},{"name":"count","description":"

              number of times you want to draw/instance the shape (for WebGL mode).

              \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
              \n\nnoFill();\n\nbeginShape();\nvertex(20, 20);\nvertex(45, 20);\nvertex(45, 80);\nendShape(CLOSE);\n\nbeginShape();\nvertex(50, 20);\nvertex(75, 20);\nvertex(75, 80);\nendShape();\n\n
              ","\n
              \n\nlet fx;\nlet vs = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // copy the instance ID to the fragment shader\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance\n // using gl_InstanceID allows us to move each instance separately\n // here we move each instance horizontally by id * 23\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // apply the offset to the final position\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\nlet fs = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance id\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance id\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n fx = createShader(vs, fs);\n}\n\nfunction draw() {\n background(220);\n\n // strokes aren't instanced, and are rather used for debug purposes\n shader(fx);\n fx.setUniform('numInstances', 4);\n\n // this doesn't have to do with instancing, this is just for centering the squares\n translate(25, -10);\n\n // here we draw the squares we want to instance\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n resetShader();\n}\n\n
              "],"alt":"Triangle line shape with smallest interior angle on bottom and upside-down L.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":772,"description":"

              Specifies vertex coordinates for quadratic Bezier curves. Each call to\nquadraticVertex() defines the position of one control points and one\nanchor point of a Bezier curve, adding a new segment to a line or shape.\nThe first time quadraticVertex() is used within a beginShape() call, it\nmust be prefaced with a call to vertex() to set the first anchor point.\nFor WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.\n2D mode expects 4 parameters, while 3D mode expects 6 parameters\n(including z coordinates).

              \n

              This function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().

              \n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n
              \n\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nendShape();\n\n
              \n\n
              \n\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\npoint(20, 80);\npoint(80, 80);\npoint(80, 60);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nquadraticVertex(20, 80, 80, 80);\nvertex(80, 60);\nendShape();\n\n
              "],"alt":"arched-shaped black line with 4 pixel thick stroke weight.\nbackwards s-shaped black line with 4 pixel thick stroke weight.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":772,"params":[{"name":"cx","description":"

              x-coordinate for the control point

              \n","type":"Number"},{"name":"cy","description":"

              y-coordinate for the control point

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate for the anchor point

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate for the anchor point

              \n","type":"Number"}],"chainable":1},{"line":837,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"

              z-coordinate for the control point (for WebGL mode)

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate for the anchor point (for WebGL mode)

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":930,"description":"

              All shapes are constructed by connecting a series of vertices. vertex()\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the beginShape() and\nendShape() functions.

              \n","itemtype":"method","name":"vertex","chainable":1,"example":["\n
              \n\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
              \n\n
              \n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(0, 35);\nvertex(35, 0);\nvertex(0, -35);\nvertex(-35, 0);\nendShape();\n\n
              \n\n
              \n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(-10, 10);\nvertex(0, 35);\nvertex(10, 10);\nvertex(35, 0);\nvertex(10, -8);\nvertex(0, -35);\nvertex(-10, -8);\nvertex(-35, 0);\nendShape();\n\n
              \n\n
              \n\nstrokeWeight(3);\nstroke(237, 34, 93);\nbeginShape(LINES);\nvertex(10, 35);\nvertex(90, 35);\nvertex(10, 65);\nvertex(90, 65);\nvertex(35, 10);\nvertex(35, 90);\nvertex(65, 10);\nvertex(65, 90);\nendShape();\n\n
              \n\n
              \n\n// Click to change the number of sides.\n// In WebGL mode, custom shapes will only\n// display hollow fill sections when\n// all calls to vertex() use the same z-value.\n\nlet sides = 3;\nlet angle, px, py;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n fill(237, 34, 93);\n strokeWeight(3);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n ngon(sides, 0, 0, 80);\n}\n\nfunction mouseClicked() {\n if (sides > 6) {\n sides = 3;\n } else {\n sides++;\n }\n}\n\nfunction ngon(n, x, y, d) {\n beginShape(TESS);\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 2;\n py = y - cos(angle) * d / 2;\n vertex(px, py, 0);\n }\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 4;\n py = y - cos(angle) * d / 4;\n vertex(px, py, 0);\n }\n endShape();\n}\n\n
              "],"alt":"4 black points in a square shape in middle-right of canvas.\n4 points making a diamond shape.\n8 points making a star.\n8 points making 4 lines.\nA rotating 3D shape with a hollow section in the middle.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":930,"params":[{"name":"x","description":"

              x-coordinate of the vertex

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the vertex

              \n","type":"Number"}],"chainable":1},{"line":1061,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"

              z-coordinate of the vertex.\n Defaults to 0 if not specified.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1069,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true},{"name":"u","description":"

              the vertex's texture u-coordinate

              \n","type":"Number","optional":true},{"name":"v","description":"

              the vertex's texture v-coordinate

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":1107,"description":"

              Sets the 3d vertex normal to use for subsequent vertices drawn with\nvertex(). A normal is a vector that is generally\nnearly perpendicular to a shape's surface which controls how much light will\nbe reflected from that part of the surface.

              \n","itemtype":"method","name":"normal","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n}\n\nfunction draw() {\n background(255);\n rotateY(frameCount / 100);\n normalMaterial();\n beginShape(TRIANGLE_STRIP);\n normal(-0.4, 0.4, 0.8);\n vertex(-30, 30, 0);\n\n normal(0, 0, 1);\n vertex(-30, -30, 30);\n vertex(30, 30, 30);\n\n normal(0.4, -0.4, 0.8);\n vertex(30, -30, 0);\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":1107,"params":[{"name":"vector","description":"

              A p5.Vector representing the vertex normal.

              \n","type":"Vector"}],"chainable":1},{"line":1144,"params":[{"name":"x","description":"

              The x component of the vertex normal.

              \n","type":"Number"},{"name":"y","description":"

              The y component of the vertex normal.

              \n","type":"Number"},{"name":"z","description":"

              The z component of the vertex normal.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/constants.js","line":9,"description":"

              Version of this p5.js.

              \n","itemtype":"property","name":"VERSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":18,"description":"

              The default, two-dimensional renderer.

              \n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":24,"description":"

              One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.

              \n

              WEBGL differs from the default P2D renderer in the following ways:

              \n\n

              To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the \"Learn\" section of this website, or read the wiki article \"Getting started with WebGL in p5\".

              \n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":45,"description":"

              One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),\nwhich can be used to determine what capabilities the rendering environment\nhas.

              \n","itemtype":"property","name":"WEBGL2","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":55,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":60,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":65,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":70,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":75,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":80,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":88,"description":"

              HALF_PI is a mathematical constant with the value\n1.57079632679489661923. It is half the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

              \n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n
              \narc(50, 50, 80, 80, 0, HALF_PI);\n
              "],"alt":"80×80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":106,"description":"

              PI is a mathematical constant with the value\n3.14159265358979323846. It is the ratio of the circumference\nof a circle to its diameter. It is useful in combination with\nthe trigonometric functions sin() and cos().

              \n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n
              \narc(50, 50, 80, 80, 0, PI);\n
              "],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":124,"description":"

              QUARTER_PI is a mathematical constant with the value 0.7853982.\nIt is one quarter the ratio of the circumference of a circle to\nits diameter. It is useful in combination with the trigonometric\nfunctions sin() and cos().

              \n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n
              \narc(50, 50, 80, 80, 0, QUARTER_PI);\n
              "],"alt":"white eighth-circle rotated about 40 degrees with curve bottom right canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":142,"description":"

              TAU is an alias for TWO_PI, a mathematical constant with the\nvalue 6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

              \n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n
              \narc(50, 50, 80, 80, 0, TAU);\n
              "],"alt":"80×80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":160,"description":"

              TWO_PI is a mathematical constant with the value\n6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().

              \n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n
              \narc(50, 50, 80, 80, 0, TWO_PI);\n
              "],"alt":"80×80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":178,"description":"

              Constant to be used with the angleMode() function, to set the mode in\nwhich p5.js interprets and calculates angles (either DEGREES or RADIANS).

              \n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n
              \nfunction setup() {\n angleMode(DEGREES);\n}\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":192,"description":"

              Constant to be used with the angleMode() function, to set the mode\nin which p5.js interprets and calculates angles (either RADIANS or DEGREES).

              \n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n
              \nfunction setup() {\n angleMode(RADIANS);\n}\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":210,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":215,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":220,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":225,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":230,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":235,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":240,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":245,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":250,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":256,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":262,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":268,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":274,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":280,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":286,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":292,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":298,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":303,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":309,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":315,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":320,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":325,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":330,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":335,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":341,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":347,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":352,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":357,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":364,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":369,"description":"

              HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\nHSB.

              \n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":378,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":385,"description":"

              AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the size function as AUTO, at a time.

              \n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":395,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":401,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":406,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":411,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":416,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":421,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":426,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":431,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":436,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":441,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":446,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":451,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":456,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":461,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":468,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":474,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":480,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":488,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":493,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":499,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":504,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":509,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":514,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":519,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":524,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":530,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":535,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":540,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":545,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":551,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":559,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":564,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":569,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":574,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":579,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":584,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":589,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":594,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":601,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":606,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":611,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":616,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":621,"itemtype":"property","name":"CHAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":626,"itemtype":"property","name":"WORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":638,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":648,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":653,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":660,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":665,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":670,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":675,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":683,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":691,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":696,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":701,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":706,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":713,"itemtype":"property","name":"FLAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":718,"itemtype":"property","name":"SMOOTH","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":725,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":730,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":740,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":746,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":752,"itemtype":"property","name":"LABEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":757,"itemtype":"property","name":"FALLBACK","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":763,"itemtype":"property","name":"CONTAIN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":769,"itemtype":"property","name":"COVER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":775,"itemtype":"property","name":"UNSIGNED_BYTE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":781,"itemtype":"property","name":"UNSIGNED_INT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":787,"itemtype":"property","name":"FLOAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":793,"itemtype":"property","name":"HALF_FLOAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":799,"itemtype":"property","name":"RGBA","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":21,"description":"

              Displays text in the web browser's console.

              \n

              print() is helpful for printing values while debugging. Each call to\nprint() creates a new line of text.

              \n

              Note: Call print('\\n') to print a blank line. Calling print() without\nan argument opens the browser's dialog for printing documents.

              \n","itemtype":"method","name":"print","params":[{"name":"contents","description":"

              content to print to the console.

              \n","type":"Any"}],"example":["\n
              \n\nfunction setup() {\n // Prints \"hello, world\" to the console.\n print('hello, world');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let name = 'ada';\n // Prints \"hello, ada\" to the console.\n print(`hello, ${name}`);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":69,"description":"

              A Number variable that tracks the number of frames drawn since the sketch\nstarted.

              \n

              frameCount's value is 0 inside setup(). It\nincrements by 1 each time the code in draw()\nfinishes executing.

              \n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the value of\n // frameCount.\n textSize(30);\n textAlign(CENTER, CENTER);\n text(frameCount, 50, 50);\n\n describe('The number 0 written in black in the middle of a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n textSize(30);\n textAlign(CENTER, CENTER);\n\n describe('A number written in black in the middle of a gray square. Its value increases rapidly.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the value of\n // frameCount.\n text(frameCount, 50, 50);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":124,"description":"

              A Number variable that tracks the number of milliseconds it took to draw\nthe last frame.

              \n

              deltaTime contains the amount of time it took\ndraw() to execute during the previous frame. It's\nuseful for simulating physics.

              \n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n
              \n\nlet x = 0;\nlet speed = 0.05;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');\n}\n\nfunction draw() {\n background(200);\n\n // Use deltaTime to calculate\n // a change in position.\n let deltaX = speed * deltaTime;\n\n // Update the x variable.\n x += deltaX;\n\n // Reset x to 0 if it's\n // greater than 100.\n if (x > 100) {\n x = 0;\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":174,"description":"

              A Boolean variable that's true if the browser is focused and false if\nnot.

              \n

              Note: The browser window can only receive input if it's focused.

              \n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n
              \n\n// Open this example in two separate browser\n// windows placed side-by-side to demonstrate.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square changes color from green to red when the browser window is out of focus.');\n}\n\nfunction draw() {\n // Change the background color\n // when the browser window\n // goes in/out of focus.\n if (focused === true) {\n background(0, 255, 0);\n } else {\n background(255, 0, 0);\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":209,"description":"

              Changes the cursor's appearance.

              \n

              The first parameter, type, sets the type of cursor to display. The\nbuilt-in options are ARROW, CROSS, HAND, MOVE, TEXT, and WAIT.\ncursor() also recognizes standard CSS cursor properties passed as\nstrings: 'help', 'wait', 'crosshair', 'not-allowed', 'zoom-in',\nand 'grab'. If the path to an image is passed, as in\ncursor('assets/target.png'), then the image will be used as the cursor.\nImages must be in .cur, .gif, .jpg, .jpeg, or .png format and should be at most 32 by 32 pixels large.

              \n

              The parameters x and y are optional. If an image is used for the\ncursor, x and y set the location pointed to within the image. They are\nboth 0 by default, so the cursor points to the image's top-left corner. x\nand y must be less than the image's width and height, respectively.

              \n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"

              Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.\n Native CSS properties: 'grab', 'progress', and so on.\n Path to cursor image.

              \n","type":"String|Constant"},{"name":"x","description":"

              horizontal active spot of the cursor.

              \n","type":"Number","optional":true},{"name":"y","description":"

              vertical active spot of the cursor.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. The cursor appears as crosshairs.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the cursor to crosshairs: +\n cursor(CROSS);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas into quadrants.\n line(50, 0, 50, 100);\n line(0, 50, 100, 50);\n\n // Change cursor based on mouse position.\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n } else {\n cursor('grab');\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Change the cursor's active spot\n // when the mouse is pressed.\n if (mouseIsPressed === true) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);\n } else {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":330,"description":"

              Sets the number of frames to draw per second.

              \n

              Calling frameRate() with one numeric argument, as in frameRate(30),\nattempts to draw 30 frames per second (FPS). The target frame rate may not\nbe achieved depending on the sketch's processing needs. Most computers\ndefault to a frame rate of 60 FPS. Frame rates of 24 FPS and above are\nfast enough for smooth animations.

              \n

              Calling frameRate() without an argument returns the current frame rate.\nThe value returned is an approximation.

              \n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the x variable based\n // on the current frameCount.\n let x = frameCount % 100;\n\n // If the mouse is pressed,\n // decrease the frame rate.\n if (mouseIsPressed === true) {\n frameRate(10);\n } else {\n frameRate(60);\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // If the mouse is pressed, do lots\n // of math to slow down drawing.\n if (mouseIsPressed === true) {\n for (let i = 0; i < 1000000; i += 1) {\n random();\n }\n }\n\n // Get the current frame rate\n // and display it.\n let fps = frameRate();\n text(fps, 50, 50);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":330,"params":[{"name":"fps","description":"

              number of frames to draw per second.

              \n","type":"Number"}],"chainable":1},{"line":404,"params":[],"return":{"description":"current frame rate.","type":"Number"}}]},{"file":"src/core/environment.js","line":447,"description":"

              Returns the target frame rate.

              \n

              The value is either the system frame rate or the last value passed to\nframeRate().

              \n","itemtype":"method","name":"getTargetFrameRate","return":{"description":"_targetFrameRate","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The number 20 written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the frame rate to 20.\n frameRate(20);\n\n // Get the target frame rate and\n // display it.\n let fps = getTargetFrameRate();\n text(fps, 43, 54);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":482,"description":"

              Hides the cursor from view.

              \n","itemtype":"method","name":"noCursor","example":["\n
              \n\nfunction setup() {\n // Hide the cursor.\n noCursor();\n}\n\nfunction draw() {\n background(200);\n\n circle(mouseX, mouseY, 10);\n\n describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":508,"description":"

              A String variable with the WebGL version in use.

              \n

              webglVersion's value equals one of the following string constants:

              \n
                \n
              • WEBGL2 whose value is 'webgl2',
                • \n
              • WEBGL whose value is 'webgl', or
                • \n
              • P2D whose value is 'p2d'. This is the default for 2D sketches.
                • \n
              \n

              See setAttributes() for ways to set the\nWebGL version.

              \n","itemtype":"property","name":"webglVersion","type":"String","readonly":"","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the current WebGL version.\n text(webglVersion, 42, 54);\n\n describe('The text \"p2d\" written in black on a gray background.');\n}\n\n
              \n\n
              \n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -15, 5);\n\n describe('The text \"webgl2\" written in black on a gray background.');\n}\n\n
              \n\n
              \n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n\n // Set WebGL to version 1.\n setAttributes({ version: 1 });\n\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -14, 5);\n\n describe('The text \"webgl\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":590,"description":"

              A Number variable that stores the width of the screen display.

              \n

              displayWidth is useful for running full-screen programs. Its value\ndepends on the current pixelDensity().

              \n

              Note: The actual screen width can be computed as\ndisplayWidth * pixelDensity().

              \n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":621,"description":"

              A Number variable that stores the height of the screen display.

              \n

              displayHeight is useful for running full-screen programs. Its value\ndepends on the current pixelDensity().

              \n

              Note: The actual screen height can be computed as\ndisplayHeight * pixelDensity().

              \n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":652,"description":"

              A Number variable that stores the width of the browser's viewport.

              \n

              The layout viewport\nis the area within the browser that's available for drawing.

              \n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":680,"description":"

              A Number variable that stores the height of the browser's viewport.

              \n

              The layout viewport\nis the area within the browser that's available for drawing.

              \n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":708,"description":"

              A function that's called when the browser window is resized.

              \n

              Code placed in the body of windowResized() will run when the\nbrowser window's size changes. It's a good place to call\nresizeCanvas() or make other\nadjustments to accommodate the new window size.

              \n

              The event parameter is optional. If added to the function declaration, it\ncan be used for debugging or other purposes.

              \n","itemtype":"method","name":"windowResized","params":[{"name":"event","description":"

              optional resize Event.

              \n","type":"UIEvent","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center.\n circle(width / 2, height / 2, 50);\n}\n\n// Resize the canvas when the\n// browser's size changes.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":803,"description":"

              A Number variable that stores the width of the canvas in pixels.

              \n

              width's default value is 100. Calling\ncreateCanvas() or\nresizeCanvas() changes the value of\nwidth. Calling noCanvas() sets its value to\n0.

              \n","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(50, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 21, 54);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// width.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(50, 100);\n background(200);\n text(width, 21, 54);\n }\n}\n\n
              "],"itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":872,"description":"

              A Number variable that stores the height of the canvas in pixels.

              \n

              height's default value is 100. Calling\ncreateCanvas() or\nresizeCanvas() changes the value of\nheight. Calling noCanvas() sets its value to\n0.

              \n","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 27);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// height.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(100, 50);\n background(200);\n text(height, 42, 27);\n }\n}\n\n
              "],"itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":941,"description":"

              Toggles full-screen mode or returns the current mode.

              \n

              Calling fullscreen(true) makes the sketch full-screen. Calling\nfullscreen(false) makes the sketch its original size.

              \n

              Calling fullscreen() without an argument returns true if the sketch\nis in full-screen mode and false if not.

              \n

              Note: Due to browser restrictions, fullscreen() can only be called with\nuser input such as a mouse press.

              \n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"

              whether the sketch should be in fullscreen mode.

              \n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state.","type":"Boolean"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n describe('A gray canvas that switches between default and full-screen display when clicked.');\n}\n\n// If the mouse is pressed,\n// toggle full-screen mode.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":996,"description":"

              Sets the pixel density or returns the current density.

              \n

              Computer displays are grids of little lights called pixels. A\ndisplay's pixel density describes how many pixels it packs into an\narea. Displays with smaller pixels have a higher pixel density and create\nsharper images.

              \n

              pixelDensity() sets the pixel scaling for high pixel density displays.\nBy default, the pixel density is set to match the display's density.\nCalling pixelDensity(1) turn this off.

              \n

              Calling pixelDensity() without an argument returns the current pixel\ndensity.

              \n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Set the pixel density to 3.\n pixelDensity(3);\n\n // Create a canvas, paint the\n // background, and draw a\n // circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A sharp white circle on a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":996,"params":[{"name":"val","description":"

              desired pixel density.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1050,"params":[],"return":{"description":"current pixel density of the sketch.","type":"Number"}}]},{"file":"src/core/environment.js","line":1069,"description":"

              Returns the display's current pixel density.

              \n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n // Get the current display density.\n let d = displayDensity();\n\n // Use the display density to set\n // the sketch's pixel density.\n pixelDensity(d);\n\n // Paint the background and\n // draw a circle.\n background(200);\n circle(50, 50, 70);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1140,"description":"

              Returns the sketch's current\nURL\nas a String.

              \n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // and display it.\n let url = getURL();\n textWrap(CHAR);\n text(url, 0, 40, 100);\n\n describe('The URL \"https://p5js.org/reference/#/p5/getURL\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1166,"description":"

              Returns the current\nURL\npath as an Array of Strings.

              \n

              For example, consider a sketch hosted at the URL\nhttps://example.com/sketchbook. Calling getURLPath() returns\n['sketchbook']. For a sketch hosted at the URL\nhttps://example.com/sketchbook/monday, getURLPath() returns\n['sketchbook', 'monday'].

              \n","itemtype":"method","name":"getURLPath","return":{"description":"path components.","type":"String[]"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL path\n // and display the first\n // part.\n let path = getURLPath();\n text(path[0], 25, 54);\n\n describe('The word \"reference\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1199,"description":"

              Returns the current\nURL parameters\nin an Object.

              \n

              For example, calling getURLParams() in a sketch hosted at the URL\nhttp://p5js.org?year=2014&month=May&day=15 returns\n{ year: 2014, month: 'May', day: 15 }.

              \n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n
              \n\n// Imagine this sketch is hosted at the following URL:\n// https://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // parameters and display\n // them.\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n\n describe('The text \"15\", \"May\", and \"2014\" written in black on separate lines.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/helpers.js","line":1,"requires":["constants"],"class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":30,"description":"

              This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":126,"description":"

              Set up our translation function, with loaded languages

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":171,"description":"

              Returns a list of languages we have translations loaded for

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":178,"description":"

              Returns the current language selected for translation

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":185,"description":"

              Sets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.

              \n","class":"p5","module":"Environment"},{"file":"src/core/legacy.js","line":1,"requires":["core\nThese are functions that are part of the Processing API but are not part of\nthe p5.js API. In some cases they have a new name","in others","they are\nremoved completely. Not all unsupported Processing functions are listed here\nbut we try to include ones that a user coming from Processing might likely\ncall."],"class":"p5","module":"Environment"},{"file":"src/core/main.js","line":41,"description":"

              Called directly before setup(), the preload() function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, setup() will wait until any load calls within have\nfinished. Nothing besides load calls (loadImage, loadJSON, loadFont,\nloadStrings, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in setup()\nor anywhere else with the use of a callback parameter.

              \n

              By default the text \"loading...\" will be displayed. To make your own\nloading page, include an HTML element with id \"p5_loading\" in your\npage. More information here.

              \n","itemtype":"method","name":"preload","example":["\n
              \nlet img;\nlet c;\nfunction preload() {\n // preload() runs once\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n // setup() waits until preload() is done\n img.loadPixels();\n // get color of middle pixel\n c = img.get(img.width / 2, img.height / 2);\n}\n\nfunction draw() {\n background(c);\n image(img, 25, 25, 50, 50);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":82,"description":"

              The setup() function is called once when the program starts. It's used to\ndefine initial environment properties such as screen size and background\ncolor and to load media such as images and fonts as the program starts.\nThere can only be one setup() function for each program and it shouldn't\nbe called again after its initial execution.

              \n

              Note: Variables declared within setup() are not accessible within other\nfunctions, including draw().

              \n","itemtype":"method","name":"setup","example":["\n
              \nlet a = 0;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(102);\n}\n\nfunction draw() {\n rect(a++ % width, 10, 2, 80);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":113,"description":"

              Called directly after setup(), the draw() function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\nstill be executed once before stopping. draw() is called automatically and\nshould never be called explicitly.

              \n

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

              \n

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

              \n

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

              \n

              It is important to note that the drawing coordinate system will be reset\nat the beginning of each draw() call. If any transformations are performed\nwithin draw() (ex: scale, rotate, translate), their effects will be\nundone at the beginning of draw(), so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.

              \n","itemtype":"method","name":"draw","example":["\n
              \nlet yPos = 0;\nfunction setup() {\n // setup() runs once\n frameRate(30);\n}\nfunction draw() {\n // draw() loops forever, until stopped\n background(204);\n yPos = yPos - 1;\n if (yPos < 0) {\n yPos = height;\n }\n line(0, yPos, width, yPos);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":450,"description":"

              Removes the entire p5 sketch. This will remove the canvas and any\nelements created by p5.js. It will also stop the draw loop and unbind\nany properties or methods from the window global scope. It will\nleave a variable p5 in case you wanted to create a new p5 sketch.\nIf you like, you can set p5 = null to erase it. While all functions and\nvariables and objects created by the p5 library will be removed, any\nother global variables created by your code will remain.

              \n","itemtype":"method","name":"remove","example":["\n
              \nfunction draw() {\n ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n remove(); // remove whole sketch on mouse press\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":751,"description":"

              Turn off some features of the friendly error system (FES), which can give\na significant boost to performance when needed.

              \n

              Note that this will disable the parts of the FES that cause performance\nslowdown (like argument checking). Friendly errors that have no performance\ncost (like giving a descriptive error if a file load fails, or warning you\nif you try to override p5.js functions in the global space),\nwill remain in place.

              \n

              See \ndisabling the friendly error system.

              \n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n
              \np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 50);\n}\n
              "],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":56,"description":"

              The element's underlying HTMLElement object.

              \n

              The\nHTMLElement\nobject's properties and methods can be used directly.

              \n","example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the border style for the\n // canvas.\n cnv.elt.style.border = '5px dashed deeppink';\n\n describe('A gray square with a pink border drawn with dashed lines.');\n}\n\n
              "],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":94,"description":"

              A Number property that stores the element's width.

              \n","type":"{Number}","itemtype":"property","name":"width","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":102,"description":"

              A Number property that stores the element's height.

              \n","type":"{Number}","itemtype":"property","name":"height","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":112,"description":"

              Attaches the element to a parent element.

              \n

              For example, a <div></div> element may be used as a box to\nhold two pieces of text, a header and a paragraph. The\n<div></div> is the parent element of both the header and\nparagraph.

              \n

              The parameter parent can have one of three types. parent can be a\nstring with the parent element's ID, as in\nmyElement.parent('container'). It can also be another\np5.Element object, as in\nmyElement.parent(myDiv). Finally, parent can be an HTMLElement\nobject, as in myElement.parent(anotherElement).

              \n

              Calling myElement.parent() without an argument returns the element's\nparent.

              \n","itemtype":"method","name":"parent","chainable":1,"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Create a div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color to white\n div.style('background-color', 'white');\n\n // Align any text to the center.\n div.style('text-align', 'center');\n\n // Set its ID to \"container\".\n div.id('container');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using its ID \"container\".\n p.parent('container');\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent.\n p.parent(div);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using the underlying\n // HTMLElement.\n p.parent(div.elt);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":112,"params":[{"name":"parent","description":"

              ID, p5.Element,\n or HTMLElement of desired parent element.

              \n","type":"String|p5.Element|Object"}],"chainable":1},{"line":233,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":254,"description":"

              Sets the element's ID using a given string.

              \n

              Calling myElement.id() without an argument returns its ID as a string.

              \n","itemtype":"method","name":"id","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the canvas' ID\n // to \"mycanvas\".\n cnv.id('mycanvas');\n\n // Get the canvas' ID.\n let id = cnv.id();\n text(id, 24, 54);\n\n describe('The text \"mycanvas\" written in black on a gray background.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":254,"params":[{"name":"id","description":"

              ID of the element.

              \n","type":"String"}],"chainable":1},{"line":286,"params":[],"return":{"description":"ID of the element.","type":"String"}}]},{"file":"src/core/p5.Element.js","line":301,"description":"

              Adds a\nclass attribute\nto the element using a given string.

              \n

              Calling myElement.class() without an argument returns a string with its current classes.

              \n","itemtype":"method","name":"class","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Add the class \"small\" to the\n // canvas element.\n cnv.class('small');\n\n // Get the canvas element's class\n // and display it.\n let c = cnv.class();\n text(c, 35, 54);\n\n describe('The word \"small\" written in black on a gray canvas.');\n\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":301,"params":[{"name":"class","description":"

              class to add.

              \n","type":"String"}],"chainable":1},{"line":337,"params":[],"return":{"description":"element's classes, if any.","type":"String"}}]},{"file":"src/core/p5.Element.js","line":350,"description":"

              Calls a function when the mouse is pressed over the element.

              \n

              Calling myElement.mousePressed(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the canvas\n // is pressed.\n cnv.mousePressed(randomColor);\n\n describe('A gray square changes color when the mouse is pressed.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":405,"description":"

              Calls a function when the mouse is pressed twice over the element.

              \n

              Calling myElement.doubleClicked(false) disables the function.

              \n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"

              function to call when the mouse is\n double clicked over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // canvas is double-clicked.\n cnv.doubleClicked(randomColor);\n\n describe('A gray square changes color when the user double-clicks the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":447,"description":"

              Calls a function when the mouse wheel scrolls over the element.

              \n

              The callback function, fxn, is passed an event object. event has\ntwo numeric properties, deltaY and deltaX. event.deltaY is\nnegative if the mouse wheel rotates away from the user. It's positive if\nthe mouse wheel rotates toward the user. event.deltaX is positive if\nthe mouse wheel moves to the right. It's negative if the mouse wheel moves\nto the left.

              \n

              Calling myElement.mouseWheel(false) disables the function.

              \n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"

              function to call when the mouse wheel is\n scrolled over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse wheel moves.\n cnv.mouseWheel(randomColor);\n\n describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call changeBackground() when the\n // mouse wheel moves.\n cnv.mouseWheel(changeBackground);\n\n describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');\n}\n\nfunction changeBackground(event) {\n // Change the background color\n // based on deltaY.\n if (event.deltaY > 0) {\n background('deeppink');\n } else if (event.deltaY < 0) {\n background('cornflowerblue');\n } else {\n background(200);\n }\n\n // Draw a shape based on deltaX.\n if (event.deltaX > 0) {\n circle(50, 50, 20);\n } else if (event.deltaX < 0) {\n square(40, 40, 20);\n }\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":533,"description":"

              Calls a function when the mouse is released over the element.

              \n

              Calling myElement.mouseReleased(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseReleased(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":578,"description":"

              Calls a function when the mouse is pressed and released over the element.

              \n

              Calling myElement.mouseReleased(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed and released over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseClicked(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":623,"description":"

              Calls a function when the mouse moves over the element.

              \n

              Calling myElement.mouseMoved(false) disables the function.

              \n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves.\n cnv.mouseMoved(randomColor);\n\n describe('A gray square changes color when the mouse moves over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":665,"description":"

              Calls a function when the mouse moves onto the element.

              \n

              Calling myElement.mouseOver(false) disables the function.

              \n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves onto the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves onto the canvas.\n cnv.mouseOver(randomColor);\n\n describe('A gray square changes color when the mouse moves onto the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":707,"description":"

              Calls a function when the mouse moves off the element.

              \n

              Calling myElement.mouseOut(false) disables the function.

              \n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves off the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves off the canvas.\n cnv.mouseOut(randomColor);\n\n describe('A gray square changes color when the mouse moves off the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":749,"description":"

              Calls a function when the element is touched.

              \n

              Calling myElement.touchStarted(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"

              function to call when the touch\n starts.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas.\n cnv.touchStarted(randomColor);\n\n describe('A gray square changes color when the user touches the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":793,"description":"

              Calls a function when the user touches the element and moves.

              \n

              Calling myElement.touchMoved(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"

              function to call when the touch\n moves over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas\n // and moves.\n cnv.touchMoved(randomColor);\n\n describe('A gray square changes color when the user touches the canvas and moves.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":837,"description":"

              Calls a function when the user stops touching the element.

              \n

              Calling myElement.touchMoved(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"

              function to call when the touch\n ends.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas,\n // then lifts their finger.\n cnv.touchEnded(randomColor);\n\n describe('A gray square changes color when the user touches the canvas, then lifts their finger.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":881,"description":"

              Calls a function when a file is dragged over the element.

              \n

              Calling myElement.dragOver(false) disables the function.

              \n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"

              function to call when the file is\n dragged over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\n// Drag a file over the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call helloFile() when a\n // file is dragged over\n // the canvas.\n cnv.dragOver(helloFile);\n\n describe('A gray square. The text \"hello, file\" appears when a file is dragged over the square.');\n}\n\nfunction helloFile() {\n text('hello, file', 50, 50);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":923,"description":"

              Calls a function when a file is dragged off the element.

              \n

              Calling myElement.dragLeave(false) disables the function.

              \n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"

              function to call when the file is\n dragged off the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\n// Drag a file over, then off\n// the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call byeFile() when a\n // file is dragged over,\n // then off the canvas.\n cnv.dragLeave(byeFile);\n\n describe('A gray square. The text \"bye, file\" appears when a file is dragged over, then off the square.');\n}\n\nfunction byeFile() {\n text('bye, file', 50, 50);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":1015,"description":"

              Helper fxn for sharing pixel methods

              \n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":83,"description":"

              Resets certain values such as those modified by functions in the Transform category\nand in the Lights category that are not automatically reset\nwith graphics buffer objects. Calling this in draw() will copy the behavior\nof the standard canvas.

              \n","itemtype":"method","name":"reset","example":["\n\n
              \nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n background(0);\n pg = createGraphics(50, 100);\n pg.fill(0);\n frameRate(5);\n}\n\nfunction draw() {\n image(pg, width / 2, 0);\n pg.background(255);\n // p5.Graphics object behave a bit differently in some cases\n // The normal canvas on the left resets the translate\n // with every loop through draw()\n // the graphics object on the right doesn't automatically reset\n // so translate() is additive and it moves down the screen\n rect(0, 0, width / 2, 5);\n pg.rect(0, 0, width / 2, 5);\n translate(0, 5, 0);\n pg.translate(0, 5, 0);\n}\nfunction mouseClicked() {\n // if you click you will see that\n // reset() resets the translate back to the initial state\n // of the Graphics object\n pg.reset();\n}\n
              "],"alt":"A white line on a black background stays still on the top-left half.\nA black line animates from top to bottom on a white background on the right half.\nWhen clicked, the black line starts back over at the top.","class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Graphics.js","line":135,"description":"

              Removes a Graphics object from the page and frees any resources\nassociated with it.

              \n","itemtype":"method","name":"remove","example":["\n
              \nlet bg;\nfunction setup() {\n bg = createCanvas(100, 100);\n bg.background(0);\n image(bg, 0, 0);\n bg.remove();\n}\n
              \n\n
              \nlet bg;\nfunction setup() {\n pixelDensity(1);\n createCanvas(100, 100);\n stroke(255);\n fill(0);\n\n // create and draw the background image\n bg = createGraphics(100, 100);\n bg.background(200);\n bg.ellipse(50, 50, 80, 80);\n}\nfunction draw() {\n let t = millis() / 1000;\n // draw the background\n if (bg) {\n image(bg, frameCount % 100, 0);\n image(bg, frameCount % 100 - 100, 0);\n }\n // draw the foreground\n let p = p5.Vector.fromAngle(t, 35).add(50, 50);\n ellipse(p.x, p.y, 30);\n}\nfunction mouseClicked() {\n // remove the background\n if (bg) {\n bg.remove();\n bg = null;\n }\n}\n
              "],"alt":"no image\na multi-colored circle moving back and forth over a scrolling background.","class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Graphics.js","line":203,"description":"

              Creates and returns a new p5.Framebuffer\ninside a p5.Graphics WebGL context.

              \n

              This takes the same parameters as the global\ncreateFramebuffer function.

              \n","itemtype":"method","name":"createFramebuffer","return":{"description":"","type":"p5.Framebuffer"},"class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":120,"description":"

              Resize our canvas element.

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":468,"description":"

              Helper function to check font type (system or otf)

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":520,"description":"

              Helper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":6,"description":"

              p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer

              \n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":535,"description":"

              Generate a cubic Bezier representing an arc on the unit circle of total\nangle size radians, beginning start radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.

              \n

              See ecridge.com/bezier.pdf for an explanation of the method.

              \n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":7,"description":"

              Creates and names a new variable. A variable is a container for a value.

              \n

              Variables that are declared with let will have block-scope.\nThis means that the variable only exists within the\n\nblock that it is created within.

              \n

              From the MDN entry:\nDeclares a block scope local variable, optionally initializing it to a value.

              \n","itemtype":"property","name":"let","example":["\n
              \n\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":34,"description":"

              Creates and names a new constant. Like a variable created with let,\na constant that is created with const is a container for a value,\nhowever constants cannot be reassigned once they are declared. Although it is\nnoteworthy that for non-primitive data types like objects & arrays, their\nelements can still be changeable. So if a variable is assigned an array, you\ncan still add or remove elements from the array but cannot reassign another\narray to it. Also unlike let, you cannot declare variables without value\nusing const.

              \n

              Constants have block-scope. This means that the constant only exists within\nthe \nblock that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.

              \n

              From the MDN entry:\nDeclares a read-only named constant.\nConstants are block-scoped, much like variables defined using the 'let' statement.\nThe value of a constant can't be changed through reassignment, and it can't be redeclared.

              \n","itemtype":"property","name":"const","example":["\n
              \n\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n\n
              \n\n
              \n\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n\n
              \n\n
              \n\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n\n
              "],"alt":"These examples do not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":87,"description":"

              The strict equality operator ===\nchecks to see if two values are equal and of the same type.

              \n

              A comparison expression always evaluates to a boolean.

              \n

              From the MDN entry:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.

              \n

              Note: In some examples around the web you may see a double-equals-sign\n==,\nused for comparison instead. This is the non-strict equality operator in Javascript.\nThis will convert the two values being compared to the same type before comparing them.

              \n","itemtype":"property","name":"===","example":["\n
              \n\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":115,"description":"

              The greater than operator \">>\nevaluates to true if the left value is greater than\nthe right value.

              \n\nThere is more info on comparison operators on MDN.","itemtype":"property","name":">","example":["\n
              \n\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":137,"description":"

              The greater than or equal to operator =\">>=\nevaluates to true if the left value is greater than or equal to\nthe right value.

              \n

              There is more info on comparison operators on MDN.

              \n","itemtype":"property","name":">=","example":["\n
              \n\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":158,"description":"

              The less than operator <\nevaluates to true if the left value is less than\nthe right value.

              \n

              There is more info on comparison operators on MDN.

              \n","itemtype":"property","name":"<","example":["\n
              \n\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":179,"description":"

              The less than or equal to operator <=\nevaluates to true if the left value is less than or equal to\nthe right value.

              \n

              There is more info on comparison operators on MDN.

              \n","itemtype":"property","name":"<=","example":["\n
              \n\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":200,"description":"

              The if-else statement helps control the flow of your code.

              \n

              A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to truthy,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to falsy,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.

              \n

              From the MDN entry:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed

              \n","itemtype":"property","name":"if-else","example":["\n
              \n\nlet a = 4;\nif (a > 0) {\n console.log('positive');\n} else {\n console.log('negative');\n}\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":231,"description":"

              Creates and names a function.\nA function is a set of statements that perform a task.

              \n

              Optionally, functions can have parameters. Parameters\nare variables that are scoped to the function, that can be assigned a value\nwhen calling the function.Multiple parameters can be given by seperating them\nwith commmas.

              \n

              From the MDN entry:\nDeclares a function with the specified parameters.

              \n","itemtype":"property","name":"function","example":["\n
              \n\nlet myName = 'Hridi';\nfunction sayHello(name) {\n console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n\n
              \n\n
              \n\nlet square = number => number * number;\nconsole.log(square(5));\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":267,"description":"

              Specifies the value to be returned by a function.\nFor more info checkout \nthe MDN entry for return.

              \n","itemtype":"property","name":"return","example":["\n
              \n\nfunction calculateSquare(x) {\n return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":288,"description":"

              A boolean is one of the 7 primitive data types in Javascript.\nA boolean can only be true or false.

              \n

              From the MDN entry:\nBoolean represents a logical entity and can have two values: true, and false.

              \n","itemtype":"property","name":"boolean","example":["\n
              \n\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":309,"description":"

              A string is one of the 7 primitive data types in Javascript.\nA string is a series of text characters. In Javascript, a string value must\nbe surrounded by either single-quotation marks(') or double-quotation marks(\").

              \n

              From the MDN entry:\nA string is a sequence of characters used to represent text.

              \n","itemtype":"property","name":"string","example":["\n
              \n\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":331,"description":"

              A number is one of the 7 primitive data types in Javascript.\nA number can be a whole number or a decimal number.

              \n

              The MDN entry for number

              \n","itemtype":"property","name":"number","example":["\n
              \n\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":351,"description":"

              From MDN's object basics:\n An object is a collection of related data and/or\n functionality (which usually consists of several variables and functions —\n which are called properties and methods when they are inside objects.)

              \n","itemtype":"property","name":"object","example":["\n
              \n \n let author = {\n name: 'Ursula K Le Guin',\n books: [\n 'The Left Hand of Darkness',\n 'The Dispossessed',\n 'A Wizard of Earthsea'\n ]\n };\n console.log(author.name); // prints 'Ursula K Le Guin' to the console\n \n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":379,"description":"

              Creates and names a class which is a template for\nthe creation of objects.

              \n

              From the MDN entry:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.

              \n","itemtype":"property","name":"class","example":["\n
              \n\nclass Rectangle {\n constructor(name, height, width) {\n this.name = name;\n this.height = height;\n this.width = width;\n }\n}\nlet square = new Rectangle('square', 1, 1); // creating new instance of Polygon Class.\nconsole.log(square.width); // prints '1' to the console\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":408,"description":"

              for creates a loop that is useful for executing one\nsection of code multiple times.

              \n

              A 'for loop' consists of three different expressions inside of a parenthesis,\nall of which are optional.These expressions are used to control the number of\ntimes the loop is run.The first expression is a statement that is used to set\nthe initial state for the loop.The second expression is a condition that you\nwould like to check before each loop. If this expression returns false then\nthe loop will exit.The third expression is executed at the end of each loop.\nThese expression are separated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.

              \n

              The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.

              \n

              As with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. The test condition with a for loop\nis the second expression detailed above. Ensuring that this expression can eventually\nbecome false ensures that your loop doesn't attempt to run an infinite amount of times,\nwhich can crash your browser.

              \n

              From the MDN entry:\nCreates a loop that executes a specified statement until the test condition evaluates to false.\nThe condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

              \n","itemtype":"property","name":"for","example":["\n
              \n\nfor (let i = 0; i < 9; i++) {\n console.log(i);\n}\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":448,"description":"

              while creates a loop that is useful for executing\none section of code multiple times.

              \n

              With a 'while loop', the code inside of the loop body (between the curly\nbraces) is run repeatedly until the test condition (inside of the parenthesis)\nevaluates to false. The condition is tested before executing the code body\nwith while, so if the condition is initially false\nthe loop body, or statement, will never execute.

              \n

              As with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. This is to keep your loop\nfrom trying to run an infinite amount of times, which can crash your browser.

              \n

              From the MDN entry:\nThe while statement creates a loop that executes a specified statement as long\nas the test condition evaluates to true.The condition is evaluated before\nexecuting the statement.

              \n","itemtype":"property","name":"while","example":["\n
              \n\n// This example logs the lines below to the console\n// 4\n// 3\n// 2\n// 1\n// 0\nlet num = 5;\nwhile (num > 0) {\n num = num - 1;\n console.log(num);\n}\n\n
              "],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":490,"description":"

              From the MDN entry:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON string.

              \n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"

              :Javascript object that you would like to convert to JSON

              \n","type":"Object"}],"example":["\n
              \n\nlet myObject = { x: 5, y: 6 };\nlet myObjectAsString = JSON.stringify(myObject);\nconsole.log(myObjectAsString); // prints \"{\"x\":5,\"y\":6}\" to the console\nconsole.log(typeof myObjectAsString); // prints 'string' to the console\n\n
              "],"alt":"This example does not render anything","class":"JSON","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":512,"description":"

              Prints a message to your browser's web console. When using p5, you can use print\nand console.log interchangeably.

              \n

              The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in Firefox\n, Chrome, Edge,\nand Safari.\nWith the online p5 editor the console\nis embedded directly in the page underneath the code editor.

              \n

              From the MDN entry:\nThe Console method log() outputs a message to the web console. The message may\nbe a single string (with optional substitution values),\nor it may be any one or more JavaScript objects.

              \n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"

              :Message that you would like to print to the console

              \n","type":"String|Expression|Object"}],"example":["\n
              \n\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n\n
              "],"alt":"This example does not render anything","class":"console","module":"Foundation","submodule":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"

              Creates a canvas element in the document and sets its dimensions\nin pixels. This method should be called only once at the start of setup().\nCalling createCanvas more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use createGraphics()\n(hidden by default but it can be shown).

              \n

              Important note: in 2D mode (i.e. when p5.Renderer is not set) the origin (0,0)\nis positioned at the top left of the screen. In 3D mode (i.e. when p5.Renderer\nis set to WEBGL), the origin is positioned at the center of the canvas.\nSee this issue for more information.

              \n

              A WebGL canvas will use a WebGL2 context if it is supported by the browser.\nCheck the webglVersion property to check what\nversion is being used, or call setAttributes({ version: 1 })\nto create a WebGL1 context.

              \n

              The system variables width and height are set by the parameters passed to this\nfunction. If createCanvas() is not used, the\nwindow will be given a default size of 100×100 pixels.

              \n

              Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('').\nIf specified, avoid using setAttributes() afterwards, as this will remove and recreate the existing canvas.

              \n

              For more ways to position the canvas, see the\n\npositioning the canvas wiki page.

              \n","itemtype":"method","name":"createCanvas","return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 50);\n background(153);\n line(0, 0, width, height);\n}\n\n
              "],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":15,"params":[{"name":"w","description":"

              width of the canvas

              \n","type":"Number"},{"name":"h","description":"

              height of the canvas

              \n","type":"Number"},{"name":"renderer","description":"

              either P2D or WEBGL

              \n","type":"Constant","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}],"return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"}},{"line":64,"params":[{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"canvas","description":"","type":"HTMLCanvasElement","optional":true}],"return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"}}]},{"file":"src/core/rendering.js","line":166,"description":"

              Resizes the canvas to given width and height. The canvas will be cleared\nand draw will be called immediately, allowing the sketch to re-render itself\nin the resized canvas.

              \n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"

              width of the canvas

              \n","type":"Number"},{"name":"h","description":"

              height of the canvas

              \n","type":"Number"},{"name":"noRedraw","description":"

              don't redraw the canvas immediately

              \n","type":"Boolean","optional":true}],"example":["\n
              \nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
              "],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":232,"description":"

              Removes the default canvas for a p5 sketch that doesn't require a canvas

              \n","itemtype":"method","name":"noCanvas","example":["\n
              \n\nfunction setup() {\n noCanvas();\n}\n\n
              "],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":253,"description":"

              Creates and returns a new p5.Graphics object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.

              \n

              A WebGL p5.Graphics will use a WebGL2 context if it is supported by the browser.\nCheck the pg.webglVersion property of the renderer\nto check what version is being used, or call pg.setAttributes({ version: 1 })\nto create a WebGL1 context.

              \n

              Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('').\nBy default this canvas will be hidden (offscreen buffer), to make visible, set element's style to display:block;

              \n","itemtype":"method","name":"createGraphics","return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n
              \n\nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n pg = createGraphics(100, 100);\n}\n\nfunction draw() {\n background(200);\n pg.background(100);\n pg.noStroke();\n pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\n image(pg, 50, 50);\n image(pg, 0, 0, 50, 50);\n}\n\n
              "],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":253,"params":[{"name":"w","description":"

              width of the offscreen graphics buffer

              \n","type":"Number"},{"name":"h","description":"

              height of the offscreen graphics buffer

              \n","type":"Number"},{"name":"renderer","description":"

              either P2D or WEBGL\n undefined defaults to p2d

              \n","type":"Constant","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"}},{"line":296,"params":[{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"canvas","description":"","type":"HTMLCanvasElement","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"}}]},{"file":"src/core/rendering.js","line":304,"description":"

              args[0] is expected to be renderer\nargs[1] is expected to be canvas

              \n","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":316,"description":"

              Creates and returns a new p5.Framebuffer, a\nhigh-performance WebGL object that you can draw to and then use as a texture.

              \n

              Options can include:

              \n
                \n
              • format: The data format of the texture, either UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. The default is UNSIGNED_BYTE.
                • \n
              • channels: What color channels to store, either RGB or RGBA. The default is to match the channels in the main canvas (with alpha unless disabled with setAttributes.)
                • \n
              • depth: A boolean, whether or not to include a depth buffer. Defaults to true.
                • \n
              • depthFormat: The data format for depth information, either UNSIGNED_INT or FLOAT. The default is FLOAT if available, or UNSIGNED_INT otherwise.
                • \n
              • stencil: A boolean, whether or not to include a stencil buffer, which can be used for masking. This may only be used if also using a depth buffer. Defaults to the value of depth, which is true if not provided.
                • \n
              • antialias: Boolean or Number, whether or not to render with antialiased edges, and if so, optionally the number of samples to use. Defaults to whether or not the main canvas is antialiased, using a default of 2 samples if so. Antialiasing is only supported when WebGL 2 is available.
                • \n
              • width: The width of the texture. Defaults to matching the main canvas.
                • \n
              • height: The height of the texture. Defaults to matching the main canvas.
                • \n
              • density: The pixel density of the texture. Defaults to the pixel density of the main canvas.
                • \n
              • textureFiltering: Either LINEAR (nearby pixels will be interpolated when reading values from the color texture) or NEAREST (no interpolation.) Generally, use LINEAR when using the texture as an image, and use NEAREST if reading the texture as data. Defaults to LINEAR.
                • \n
              \n

              If width, height, or density are specified, then the framebuffer will\nkeep that size until manually changed. Otherwise, it will be autosized, and\nit will update to match the main canvas's size and density when the main\ncanvas changes.

              \n","itemtype":"method","name":"createFramebuffer","params":[{"name":"options","description":"

              An optional object with configuration

              \n","type":"Object","optional":true}],"return":{"description":"","type":"p5.Framebuffer"},"example":["\n
              \n\nlet prev, next;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n prev = createFramebuffer({ format: FLOAT });\n next = createFramebuffer({ format: FLOAT });\n noStroke();\n}\n\nfunction draw() {\n // Swap prev and next so that we can use the previous\n // frame as a texture when drawing the current frame\n [prev, next] = [next, prev];\n\n // Draw to the framebuffer\n next.begin();\n background(255);\n\n push();\n tint(255, 253);\n image(prev, -width/2, -height/2);\n // Make sure the image plane doesn't block you from seeing any part\n // of the scene\n clearDepth();\n pop();\n\n push();\n normalMaterial();\n translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(12);\n pop();\n next.end();\n\n image(next, -width/2, -height/2);\n}\n\n
              "],"alt":"A red, green, and blue box (using normalMaterial) moves and rotates around\nthe canvas, leaving a trail behind it that slowly grows and fades away.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":391,"description":"

              This makes the canvas forget how far from the camera everything that has\nbeen drawn was. Use this if you want to make sure the next thing you draw\nwill not draw behind anything that is already on the canvas.

              \n

              This is useful for things like feedback effects, where you want the previous\nframe to act like a background for the next frame, and not like a plane in\n3D space in the scene.

              \n

              This method is only available in WebGL mode. Since 2D mode does not have\n3D depth, anything you draw will always go on top of the previous content on\nthe canvas anyway.

              \n","itemtype":"method","name":"clearDepth","params":[{"name":"depth","description":"

              The value, between 0 and 1, to reset the depth to, where\n0 corresponds to a value as close as possible to the camera before getting\nclipped, and 1 corresponds to a value as far away from the camera as possible.\nThe default value is 1.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nlet prev, next;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n prev = createFramebuffer({ format: FLOAT });\n next = createFramebuffer({ format: FLOAT });\n noStroke();\n}\n\nfunction draw() {\n // Swap prev and next so that we can use the previous\n // frame as a texture when drawing the current frame\n [prev, next] = [next, prev];\n\n // Draw to the framebuffer\n next.begin();\n background(255);\n\n push();\n tint(255, 253);\n image(prev, -width/2, -height/2);\n // Make sure the image plane doesn't block you from seeing any part\n // of the scene\n clearDepth();\n pop();\n\n push();\n normalMaterial();\n translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(12);\n pop();\n next.end();\n\n image(next, -width/2, -height/2);\n}\n\n
              "],"alt":"A red, green, and blue box (using normalMaterial) moves and rotates around\nthe canvas, leaving a trail behind it that slowly grows and fades away.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":461,"description":"

              Blends the pixels in the display window according to the defined mode.\nThere is a choice of the following modes to blend the source pixels (A)\nwith the ones of pixels already in the display window (B):

              \n
                \n
              • BLEND - linear interpolation of colours: C =\nA*factor + B. This is the default blending mode.
                • \n
              • ADD - sum of A and B
                • \n
              • DARKEST - only the darkest colour succeeds: C =\nmin(A*factor, B).
                • \n
              • LIGHTEST - only the lightest colour succeeds: C =\nmax(A*factor, B).
                • \n
              • DIFFERENCE - subtract colors from underlying image.\n(2D)
                • \n
              • EXCLUSION - similar to DIFFERENCE, but less\nextreme.
                • \n
              • MULTIPLY - multiply the colors, result will always be\ndarker.
                • \n
              • SCREEN - opposite multiply, uses inverse values of the\ncolors.
                • \n
              • REPLACE - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.
                • \n
              • REMOVE - removes pixels from B with the alpha strength of A.
                • \n
              • OVERLAY - mix of MULTIPLY and SCREEN\n. Multiplies dark values, and screens light values. (2D)
                • \n
              • HARD_LIGHT - SCREEN when greater than 50%\ngray, MULTIPLY when lower. (2D)
                • \n
              • SOFT_LIGHT - mix of DARKEST and\nLIGHTEST. Works like OVERLAY, but not as harsh. (2D)\n
                • \n
              • DODGE - lightens light tones and increases contrast,\nignores darks. (2D)
                • \n
              • BURN - darker areas are applied, increasing contrast,\nignores lights. (2D)
                • \n
              • SUBTRACT - remainder of A and B (3D)
                • \n
              \n\n

              (2D) indicates that this blend mode only works in the 2D renderer.
              \n(3D) indicates that this blend mode only works in the WEBGL renderer.

              \n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"

              blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT

              \n","type":"Constant"}],"example":["\n
              \n\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
              \n\n
              \n\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
              "],"alt":"translucent image thick red & blue diagonal rounded lines intersecting center\nThick red & blue diagonal rounded lines intersecting center. dark at overlap","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":545,"description":"

              The p5.js API provides a lot of functionality for creating graphics, but there is\nsome native HTML5 Canvas functionality that is not exposed by p5. You can still call\nit directly using the variable drawingContext, as in the example shown. This is\nthe equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');.\nSee this\n\nreference for the native canvas API for possible drawing functions you can call.

              \n","itemtype":"property","name":"drawingContext","example":["\n
              \n\nfunction setup() {\n drawingContext.shadowOffsetX = 5;\n drawingContext.shadowOffsetY = -5;\n drawingContext.shadowBlur = 10;\n drawingContext.shadowColor = 'black';\n background(200);\n ellipse(width / 2, height / 2, 50, 50);\n}\n\n
              "],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/structure.js","line":9,"description":"

              Stops p5.js from continuously executing the code within draw().\nIf loop() is called, the code in draw()\nbegins to run continuously again. If using noLoop()\nin setup(), it should be the last line inside the block.

              \n

              When noLoop() is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\nmousePressed() or\nkeyPressed(). Instead, use those functions to\ncall redraw() or loop(),\nwhich will run draw(), which can update the screen\nproperly. This means that when noLoop() has been\ncalled, no drawing can happen, and functions like saveFrames()\nor loadPixels() may not be used.

              \n

              Note that if the sketch is resized, redraw() will\nbe called to update the sketch, even after noLoop()\nhas been specified. Otherwise, the sketch would enter an odd state until\nloop() was called.

              \n

              Use isLooping() to check the current state of loop().

              \n","itemtype":"method","name":"noLoop","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n noLoop();\n}\n\nfunction draw() {\n line(10, 10, 90, 90);\n}\n\n
              \n\n
              \n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n noLoop();\n}\n\nfunction mouseReleased() {\n loop();\n}\n\n
              "],"alt":"113 pixel long line extending from top-left to bottom right of canvas.\nhorizontal line moves slowly from left. Loops but stops on mouse press.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":82,"description":"

              By default, p5.js loops through draw() continuously, executing the code within\nit. However, the draw() loop may be stopped by calling\nnoLoop(). In that case, the draw()\nloop can be resumed with loop().

              \n

              Avoid calling loop() from inside setup().

              \n

              Use isLooping() to check the current state of loop().

              \n","itemtype":"method","name":"loop","example":["\n
              \n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n loop();\n}\n\nfunction mouseReleased() {\n noLoop();\n}\n\n
              "],"alt":"horizontal line moves slowly from left. Loops but stops on mouse press.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":133,"description":"

              By default, p5.js loops through draw() continuously,\nexecuting the code within it. If the sketch is stopped with\nnoLoop() or resumed with loop(),\nisLooping() returns the current state for use within custom event handlers.

              \n","itemtype":"method","name":"isLooping","return":{"description":"","type":"Boolean"},"example":["\n
              \n\nlet checkbox, button, colBG, colFill;\n\nfunction setup() {\n createCanvas(100, 100);\n\n button = createButton('Colorize if loop()');\n button.position(0, 120);\n button.mousePressed(changeBG);\n\n checkbox = createCheckbox('loop()', true);\n checkbox.changed(checkLoop);\n\n colBG = color(0);\n colFill = color(255);\n}\n\nfunction changeBG() {\n if (isLooping()) {\n colBG = color(random(255), random(255), random(255));\n colFill = color(random(255), random(255), random(255));\n }\n}\n\nfunction checkLoop() {\n if (this.checked()) {\n loop();\n } else {\n noLoop();\n }\n}\n\nfunction draw() {\n background(colBG);\n fill(colFill);\n ellipse(frameCount % width, height / 2, 50);\n}\n\n
              "],"alt":"Ellipse moves slowly from left. Checkbox toggles loop()/noLoop().\nButton colorizes sketch if isLooping().","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":192,"description":"

              The push() function saves the current drawing style\nsettings and transformations, while pop() restores these\nsettings. Note that these functions are always used together. They allow you to\nchange the style and transformation settings and later return to what you had.\nWhen a new state is started with push(), it builds on\nthe current style and transform information. The push()\nand pop() functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)

              \n

              push() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().

              \n

              In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: setCamera(),\nambientLight(),\ndirectionalLight(),\npointLight(), texture(),\nspecularMaterial(),\nshininess(),\nnormalMaterial()\nand shader().

              \n","itemtype":"method","name":"push","example":["\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\ntranslate(50, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              \n\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              "],"alt":"Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":290,"description":"

              The push() function saves the current drawing style\nsettings and transformations, while pop() restores\nthese settings. Note that these functions are always used together. They allow\nyou to change the style and transformation settings and later return to what\nyou had. When a new state is started with push(), it\nbuilds on the current style and transform information. The push()\nand pop() functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)

              \n

              push() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().

              \n

              In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\nsetCamera(),\nambientLight(),\ndirectionalLight(),\npointLight(),\ntexture(),\nspecularMaterial(),\nshininess(),\nnormalMaterial() and\nshader().

              \n","itemtype":"method","name":"pop","example":["\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\ntranslate(50, 0);\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              \n\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              "],"alt":"Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":391,"description":"

              Executes the code within draw() one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by mousePressed()\nor keyPressed() occurs.

              \n

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

              \n

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

              \n

              In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.

              \n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"

              Redraw for n-times. The default value is 1.

              \n","type":"Integer","optional":true}],"example":["\n
              \nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n x += 1;\n redraw();\n}\n\n
              \n\n
              \n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x += 1;\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n redraw(5);\n}\n\n
              "],"alt":"black line on far left of canvas\nblack line on far left of canvas","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":494,"description":"

              The p5() constructor enables you to activate \"instance mode\" instead of normal\n\"global mode\". This is an advanced topic. A short description and example is\nincluded below. Please see\n\nDan Shiffman's Coding Train video tutorial or this\ntutorial page\nfor more info.

              \n

              By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply ellipse(), fill(), etc. However, this\nmight be inconvenient if you are mixing with other JS libraries (synchronously or\nasynchronously) or writing long programs of your own. p5.js currently supports a\nway around this problem called \"instance mode\". In instance mode, all p5 functions\nare bound up in a single variable instead of polluting your global namespace.

              \n

              Optionally, you can specify a default container for the canvas and any other elements\nto append to with a second argument. You can give the ID of an element in your html,\nor an html node itself.

              \n

              Note that creating instances like this also allows you to have more than one p5 sketch on\na single web page, as they will each be wrapped up with their own set up variables. Of\ncourse, you could also use iframes to have multiple sketches in global mode.

              \n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"

              a function containing a p5.js sketch

              \n","type":"Object"},{"name":"node","description":"

              ID or pointer to HTML DOM node to contain sketch in

              \n","type":"String|Object"}],"example":["\n
              \nconst s = p => {\n let x = 100;\n let y = 100;\n\n p.setup = function() {\n p.createCanvas(700, 410);\n };\n\n p.draw = function() {\n p.background(0);\n p.fill(255);\n p.rect(x, y, 50, 50);\n };\n};\n\nnew p5(s); // invoke p5\n
              "],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"

              Multiplies the current matrix by the one specified through the parameters.\nThis is a powerful operation that can perform the equivalent of translate,\nscale, shear and rotate all at once. You can learn more about transformation\nmatrices on \nWikipedia.

              \n

              The naming of the arguments here follows the naming of the \nWHATWG specification and corresponds to a\ntransformation matrix of the\nform:

              \n
              \n

              \n
              \n

              \n","itemtype":"method","name":"applyMatrix","chainable":1,"example":["\n
              \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n // Equivalent to translate(x, y);\n applyMatrix(1, 0, 0, 1, 40 + step, 50);\n rect(0, 0, 50, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n translate(50, 50);\n // Equivalent to scale(x, y);\n applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, 0, TWO_PI);\n let cos_a = cos(angle);\n let sin_a = sin(angle);\n background(200);\n translate(50, 50);\n // Equivalent to rotate(angle);\n applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, -PI / 4, PI / 4);\n background(200);\n translate(50, 50);\n // equivalent to shearX(angle);\n let shear_factor = 1 / tan(PI / 2 - angle);\n applyMatrix(1, 0, shear_factor, 1, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n}\n\nfunction draw() {\n background(200);\n rotateY(PI / 6);\n stroke(153);\n box(35);\n let rad = millis() / 1000;\n // Set rotation angles\n let ct = cos(rad);\n let st = sin(rad);\n // Matrix for rotation around the Y axis\n applyMatrix(\n ct, 0.0, st, 0.0,\n 0.0, 1.0, 0.0, 0.0,\n -st, 0.0, ct, 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n stroke(255);\n box(50);\n}\n\n
              \n\n
              \n\nfunction draw() {\n background(200);\n let testMatrix = [1, 0, 0, 1, 0, 0];\n applyMatrix(testMatrix);\n rect(0, 0, 50, 50);\n}\n\n
              "],"alt":"A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing\nA rectangle in the upper left corner","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":11,"params":[{"name":"arr","description":"

              an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)

              \n","type":"Array"}],"chainable":1},{"line":157,"params":[{"name":"a","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"b","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"c","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"d","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"e","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"f","description":"

              numbers which define the 2×3 or 4×4 matrix to be multiplied

              \n","type":"Number"}],"chainable":1},{"line":167,"params":[{"name":"a","description":"","type":"Number"},{"name":"b","description":"","type":"Number"},{"name":"c","description":"","type":"Number"},{"name":"d","description":"","type":"Number"},{"name":"e","description":"","type":"Number"},{"name":"f","description":"","type":"Number"},{"name":"g","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"h","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"i","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"j","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"k","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"l","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"m","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"n","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"o","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"},{"name":"p","description":"

              numbers which define the 4×4 matrix to be multiplied

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/transform.js","line":197,"description":"

              Replaces the current matrix with the identity matrix.

              \n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n
              \n\ntranslate(50, 50);\napplyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\nrect(0, 0, 20, 20);\n// Note that the translate is also reset.\nresetMatrix();\nrect(0, 0, 20, 20);\n\n
              "],"alt":"A rotated rectangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":222,"description":"

              Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for angleMode, so angles\ncan be entered in either RADIANS or DEGREES.

              \n

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

              \n

              Technically, rotate() multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\npush() and pop().

              \n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"

              the angle of rotation, specified in radians\n or degrees, depending on current angleMode

              \n","type":"Number"},{"name":"axis","description":"

              (in 3d) the axis to rotate around

              \n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n
              \n\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n\n
              "],"alt":"white 52×52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":261,"description":"

              Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

              \n

              Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

              \n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"

              the angle of rotation, specified in radians\n or degrees, depending on current angleMode

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateX(millis() / 1000);\n box();\n}\n\n
              "],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":299,"description":"

              Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

              \n

              Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

              \n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"

              the angle of rotation, specified in radians\n or degrees, depending on current angleMode

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateY(millis() / 1000);\n box();\n}\n\n
              "],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":337,"description":"

              Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.

              \n

              This method works in WEBGL mode only.

              \n

              Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll transformations are reset when draw() begins again.

              \n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"

              the angle of rotation, specified in radians\n or degrees, depending on current angleMode

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(255);\n rotateZ(millis() / 1000);\n box();\n}\n\n
              "],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":377,"description":"

              Increases or decreases the size of a shape by expanding or contracting\nvertices. Objects always scale from their relative origin to the\ncoordinate system. Scale values are specified as decimal percentages.\nFor example, the function call scale(2.0) increases the dimension of a\nshape by 200%.

              \n

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

              \n

              Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with push() and pop().

              \n","itemtype":"method","name":"scale","chainable":1,"example":["\n
              \n\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n\n
              \n\n
              \n\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n\n
              "],"alt":"white 52×52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50×50 at center. other 25×65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":377,"params":[{"name":"s","description":"

              percent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given

              \n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"

              percent to scale the object in the y-axis

              \n","type":"Number","optional":true},{"name":"z","description":"

              percent to scale the object in the z-axis (webgl only)

              \n","type":"Number","optional":true}],"chainable":1},{"line":421,"params":[{"name":"scales","description":"

              per-axis percents to scale the object

              \n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":451,"description":"

              Shears a shape around the x-axis by the amount specified by the angle\nparameter. Angles should be specified in the current angleMode.\nObjects are always sheared around their relative position to the origin\nand positive numbers shear objects in a clockwise direction.

              \n

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

              \n

              Technically, shearX() multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the push() and pop() functions.

              \n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"

              angle of shear specified in radians or degrees,\n depending on current angleMode

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
              "],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":490,"description":"

              Shears a shape around the y-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode. Objects\nare always sheared around their relative position to the origin and\npositive numbers shear objects in a clockwise direction.

              \n

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

              \n

              Technically, shearY() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.

              \n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"

              angle of shear specified in radians or degrees,\n depending on current angleMode

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
              "],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":529,"description":"

              Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.

              \n

              Transformations are cumulative and apply to everything that happens after\nand subsequent calls to the function accumulates the effect. For example,\ncalling translate(50, 0) and then translate(20, 0) is the same as\ntranslate(70, 0). If translate() is called within draw(), the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using push() and pop().

              \n","itemtype":"method","name":"translate","chainable":1,"example":["\n
              \n\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n\n
              \n\n
              \n\nrect(0, 0, 55, 55); // Draw rect at original 0,0\ntranslate(30, 20);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\ntranslate(14, 14);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\n\n
              \n\n\n
              \n\nfunction draw() {\n background(200);\n rectMode(CENTER);\n translate(width / 2, height / 2);\n translate(p5.Vector.fromAngle(millis() / 1000, 40));\n rect(0, 0, 20, 20);\n}\n\n
              "],"alt":"white 55×55 rect with black outline at center right.\n3 white 55×55 rects with black outlines at top-l, center-r and bottom-r.\na 20×20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":529,"params":[{"name":"x","description":"

              left/right translation

              \n","type":"Number"},{"name":"y","description":"

              up/down translation

              \n","type":"Number"},{"name":"z","description":"

              forward/backward translation (WEBGL only)

              \n","type":"Number","optional":true}],"chainable":1},{"line":582,"params":[{"name":"vector","description":"

              the vector to translate by

              \n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"

              Stores a value in local storage under the key name.\n Local storage is saved in the browser and persists\n between browsing sessions and page reloads.\n The key can be the name of the variable but doesn't\n have to be. To retrieve stored items\n see getItem.\nSensitive data such as passwords or personal information\n should not be stored in local storage.

              \n","itemtype":"method","name":"storeItem","params":[{"name":"key","description":"","type":"String"},{"name":"value","description":"","type":"String|Number|Object|Boolean|p5.Color|p5.Vector"}],"example":["\n
              \n // Type to change the letter in the\n // center of the canvas.\n // If you reload the page, it will\n // still display the last key you entered\nlet myText;\nfunction setup() {\n createCanvas(100, 100);\n myText = getItem('myText');\n if (myText === null) {\n myText = '';\n }\n describe(`When you type the key name is displayed as black text on white background.\n If you reload the page, the last letter typed is still displaying.`);\n }\nfunction draw() {\n textSize(40);\n background(255);\n text(myText, width / 2, height / 2);\n }\nfunction keyPressed() {\n myText = key;\n storeItem('myText', myText);\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":99,"description":"

              Returns the value of an item that was stored in local storage\n using storeItem()

              \n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"

              name that you wish to use to store in local storage

              \n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n
              \n // Click the mouse to change\n // the color of the background\n // Once you have changed the color\n // it will stay changed even when you\n // reload the page.\nlet myColor;\nfunction setup() {\n createCanvas(100, 100);\n myColor = getItem('myColor');\n }\nfunction draw() {\n if (myColor !== null) {\n background(myColor);\n }\n describe(`If you click, the canvas changes to a random color.·\n If you reload the page, the canvas is still the color it was when the\n page was previously loaded.`);\n }\nfunction mousePressed() {\n myColor = color(random(255), random(255), random(255));\n storeItem('myColor', myColor);\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":173,"description":"

              Clears all local storage items set with storeItem()\n for the current domain.

              \n","itemtype":"method","name":"clearStorage","example":["\n
              \n \n function setup() {\n let myNum = 10;\n let myBool = false;\n storeItem('myNum', myNum);\n storeItem('myBool', myBool);\n print(getItem('myNum')); // logs 10 to the console\n print(getItem('myBool')); // logs false to the console\n clearStorage();\n print(getItem('myNum')); // logs null to the console\n print(getItem('myBool')); // logs null to the console\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":201,"description":"

              Removes an item that was stored with storeItem()

              \n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n
              \n \n function setup() {\n let myVar = 10;\n storeItem('myVar', myVar);\n print(getItem('myVar')); // logs 10 to the console\n removeItem('myVar');\n print(getItem('myVar')); // logs null to the console\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"

              Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.

              \n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n
              \n \n function setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n let anotherDictionary = createStringDict({ happy: 'coding' });\n print(anotherDictionary.hasKey('happy')); // logs true to console\n }\n
              "],"class":"p5","module":"Data","submodule":"Dictionary","overloads":[{"line":14,"params":[{"name":"key","description":"","type":"String"},{"name":"value","description":"","type":"String"}],"return":{"description":"","type":"p5.StringDict"}},{"line":37,"params":[{"name":"object","description":"

              object

              \n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"

              Creates a new instance of p5.NumberDict using the key-value pair\n or object you provide.

              \n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n
              \n \n function setup() {\n let myDictionary = createNumberDict(100, 42);\n print(myDictionary.hasKey(100)); // logs true to console\n let anotherDictionary = createNumberDict({ 200: 84 });\n print(anotherDictionary.hasKey(200)); // logs true to console\n }\n
              "],"class":"p5","module":"Data","submodule":"Dictionary","overloads":[{"line":48,"params":[{"name":"key","description":"","type":"Number"},{"name":"value","description":"","type":"Number"}],"return":{"description":"","type":"p5.NumberDict"}},{"line":71,"params":[{"name":"object","description":"

              object

              \n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":102,"description":"

              Returns the number of key-value pairs currently stored in the Dictionary.

              \n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(1, 10);\n myDictionary.create(2, 20);\n myDictionary.create(3, 30);\n print(myDictionary.size()); // logs 3 to the console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":123,"description":"

              Returns true if the given key exists in the Dictionary,\notherwise returns false.

              \n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"

              that you want to look up

              \n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":145,"description":"

              Returns the value stored at the given key.

              \n","itemtype":"method","name":"get","params":[{"name":"the","description":"

              key you want to access

              \n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n let myValue = myDictionary.get('p5');\n print(myValue === 'js'); // logs true to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":171,"description":"

              Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.

              \n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.set('p5', 'JS');\n myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":198,"description":"

              private helper function to handle the user passing in objects\nduring construction or calls to create()

              \n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":209,"description":"

              Creates a new key-value pair in the Dictionary.

              \n","itemtype":"method","name":"create","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":209,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":227,"params":[{"name":"obj","description":"

              key/value pair

              \n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":245,"description":"

              Removes all previously stored key-value pairs from the Dictionary.

              \n","itemtype":"method","name":"clear","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // prints 'true'\n myDictionary.clear();\n print(myDictionary.hasKey('p5')); // prints 'false'\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":266,"description":"

              Removes the key-value pair stored at the given key from the Dictionary.

              \n","itemtype":"method","name":"remove","params":[{"name":"key","description":"

              for the pair to remove

              \n","type":"Number|String"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n myDictionary.remove('p5');\n myDictionary.print();\n // above logs \"key: happy value: coding\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":295,"description":"

              Logs the set of items currently stored in the Dictionary to the console.

              \n","itemtype":"method","name":"print","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":319,"description":"

              Converts the Dictionary into a CSV file for local download.

              \n","itemtype":"method","name":"saveTable","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveTable('beatles');\n }\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":357,"description":"

              Converts the Dictionary into a JSON file for local download.

              \n","itemtype":"method","name":"saveJSON","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveJSON('beatles');\n }\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":388,"description":"

              private helper function to ensure that the user passed in valid\nvalues for the Dictionary type

              \n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":430,"description":"

              private helper function to ensure that the user passed in valid\nvalues for the Dictionary type

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":439,"description":"

              Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"add","params":[{"name":"Key","description":"

              for the value you wish to add to

              \n","type":"Number"},{"name":"Number","description":"

              to add to the value

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.add(2, 2);\n print(myDictionary.get(2)); // logs 7 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":466,"description":"

              Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"

              for the value you wish to subtract from

              \n","type":"Number"},{"name":"Number","description":"

              to subtract from the value

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.sub(2, 2);\n print(myDictionary.get(2)); // logs 3 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":489,"description":"

              Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"

              for value you wish to multiply

              \n","type":"Number"},{"name":"Amount","description":"

              to multiply the value by

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 4);\n myDictionary.mult(2, 2);\n print(myDictionary.get(2)); // logs 8 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":516,"description":"

              Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"div","params":[{"name":"Key","description":"

              for value you wish to divide

              \n","type":"Number"},{"name":"Amount","description":"

              to divide the value by

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 8);\n myDictionary.div(2, 2);\n print(myDictionary.get(2)); // logs 4 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":543,"description":"

              private helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":567,"description":"

              Return the lowest number currently stored in the Dictionary.

              \n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let lowestValue = myDictionary.minValue(); // value is -10\n print(lowestValue);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":587,"description":"

              Return the highest number currently stored in the Dictionary.

              \n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let highestValue = myDictionary.maxValue(); // value is 3\n print(highestValue);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":607,"description":"

              private helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":629,"description":"

              Return the lowest key currently used in the Dictionary.

              \n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let lowestKey = myDictionary.minKey(); // value is 1.2\n print(lowestKey);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":649,"description":"

              Return the highest key currently used in the Dictionary.

              \n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let highestKey = myDictionary.maxKey(); // value is 4\n print(highestKey);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"

              Searches the page for the first element that matches the given\nCSS selector string.

              \n

              The selector string can be an ID, class, tag name, or a combination.\nselect() returns a p5.Element object if it\nfinds a match and null if not.

              \n

              The second parameter, container, is optional. It specifies a container to\nsearch within. container can be CSS selector string, a\np5.Element object, or an\nHTMLElement object.

              \n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"

              CSS selector string of element to search for.

              \n","type":"String"},{"name":"container","description":"

              CSS selector string, p5.Element, or\n HTMLElement to search within.

              \n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"p5.Element containing the element.","type":"p5.Element|null"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n // Select the canvas by its tag.\n let cnv = select('canvas');\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Add a class attribute to the canvas.\n cnv.class('pinkborder');\n\n background(200);\n\n // Select the canvas by its class.\n cnv = select('.pinkborder');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Set the canvas' ID.\n cnv.id('mycanvas');\n\n background(200);\n\n // Select the canvas by its ID.\n cnv = select('#mycanvas');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":109,"description":"

              Searches the page for all elements that matches the given\nCSS selector string.

              \n

              The selector string can be an ID, class, tag name, or a combination.\nselectAll() returns an array of p5.Element\nobjects if it finds any matches and an empty array if none are found.

              \n

              The second parameter, container, is optional. It specifies a container to\nsearch within. container can be CSS selector string, a\np5.Element object, or an\nHTMLElement object.

              \n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"

              CSS selector string of element to search for.

              \n","type":"String"},{"name":"container","description":"

              CSS selector string, p5.Element, or\n HTMLElement to search within.

              \n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"array of p5.Elements containing any elements found.","type":"p5.Element[]"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create three buttons.\n createButton('1');\n createButton('2');\n createButton('3');\n\n // Select the buttons by their tag.\n let buttons = selectAll('button');\n\n // Position the buttons.\n for (let i = 0; i < 3; i += 1) {\n buttons[i].position(0, i * 30);\n }\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\".');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Create three buttons and position them.\n let b1 = createButton('1');\n b1.position(0, 0);\n let b2 = createButton('2');\n b2.position(0, 30);\n let b3 = createButton('3');\n b3.position(0, 60);\n\n // Add a class attribute to each button.\n b1.class('btn');\n b2.class('btn btn-pink');\n b3.class('btn');\n\n // Select the buttons by their class.\n let buttons = selectAll('.btn');\n let pinkButtons = selectAll('.btn-pink');\n\n // Style the selected buttons.\n buttons.forEach(setFont);\n pinkButtons.forEach(setColor);\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\". Buttons \"1\" and \"3\" are gray. Button \"2\" is pink.');\n}\n\n// Set a button's font to Comic Sans MS.\nfunction setFont(btn) {\n btn.style('font-family', 'Comic Sans MS');\n}\n\n// Set a button's background and font color.\nfunction setColor(btn) {\n btn.style('background', 'deeppink');\n btn.style('color', 'white');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":206,"description":"

              Helper function for select and selectAll

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":221,"description":"

              Helper function for getElement and getElements.

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":255,"description":"

              Removes all elements created by p5.js, including any event handlers.

              \n

              There are two exceptions:\ncanvas elements created by createCanvas()\nand p5.Render objects created by\ncreateGraphics().

              \n","itemtype":"method","name":"removeElements","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place\n // it in the middle of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n describe('A gray square with the text \"p5*js\" written in its center. The text disappears when the mouse is pressed.');\n}\n\n// Remove all elements when the mouse is pressed.\nfunction mousePressed() {\n removeElements();\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a paragraph element and place\n // it at the top of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n // Create a slider element and place it\n // beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n describe('A gray square with the text \"p5*js\" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');\n}\n\nfunction draw() {\n // Use the slider value to change the background color.\n let g = slider.value();\n background(g);\n}\n\n// Remove all elements when the mouse is double-clicked.\nfunction doubleClicked() {\n removeElements();\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":329,"description":"

              Calls a function when the element changes.

              \n

              Calling myElement.changed(false) disables the function.

              \n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"

              function to call when the element changes.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nlet dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":404,"description":"

              Calls a function when the element receives input.

              \n

              myElement.input() is often used to with text inputs and sliders. Calling\nmyElement.input(false) disables the function.

              \n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"

              function to call when input is detected within\n the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":477,"description":"

              Helpers for create methods.

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":490,"description":"

              Creates a <div></div> element.

              \n

              <div></div> elements are commonly used as containers for\nother elements.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <div></div>.

              \n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"

              inner HTML for the new <div></div> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and set its position.\n let div = createDiv('p5*js');\n div.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h3 element within the div.\n let div = createDiv('

              p5*js

              ');\n div.position(20, 5);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n              \n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":542,"description":"

              Creates a <p></p> element.

              \n

              <p></p> elements are commonly used for paragraph-length text.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <p></p>.

              \n","itemtype":"method","name":"createP","params":[{"name":"html","description":"

              inner HTML for the new <p></p> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its position.\n let p = createP('Tell me a story.');\n p.position(5, 0);\n\n describe('A gray square displaying the text \"Tell me a story.\" written in black.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":577,"description":"

              Creates a <span></span> element.

              \n

              <span></span> elements are commonly used as containers\nfor inline elements. For example, a <span></span>\ncan hold part of a sentence that's a\ndifferent style.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <span></span>.

              \n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"

              inner HTML for the new <span></span> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a span element and set its position.\n let span = createSpan('p5*js');\n span.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create a div element as a container.\n let div = createDiv();\n\n // Place the div at the center.\n div.position(25, 35);\n\n // Create a span element.\n let s1 = createSpan('p5');\n\n // Create a second span element.\n let s2 = createSpan('*');\n\n // Set the second span's font color.\n s2.style('color', 'deeppink');\n\n // Create a third span element.\n let s3 = createSpan('js');\n\n // Add all the spans to the container div.\n s1.parent(div);\n s2.parent(div);\n s3.parent(div);\n\n describe('A gray square with the text \"p5*js\" written in black at its center. The asterisk is pink.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":648,"description":"

              Creates an <img> element that can appear outside of the canvas.

              \n

              The first parameter, src, is a string with the path to the image file.\nsrc should be a relative path, as in 'assets/image.png', or a URL, as\nin 'https://example.com/image.png'.

              \n

              The second parameter, alt, is a string with the\nalternate text\nfor the image. An empty string '' can be used for images that aren't displayed.

              \n

              The third parameter, crossOrigin, is optional. It's a string that sets the\ncrossOrigin property\nof the image. Use 'anonymous' or 'use-credentials' to fetch the image\nwith cross-origin access.

              \n

              The fourth parameter, callback, is also optional. It sets a function to\ncall after the image loads. The new image is passed to the callback\nfunction as a p5.Element object.

              \n","itemtype":"method","name":"createImg","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n let img = createImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'The p5.js magenta asterisk.'\n );\n img.position(0, -10);\n\n describe('A gray square with a magenta asterisk in its center.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":648,"params":[{"name":"src","description":"

              relative path or URL for the image.

              \n","type":"String"},{"name":"alt","description":"

              alternate text for the image.

              \n","type":"String"}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":692,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"

              crossOrigin property to use when fetching the image.

              \n","type":"String","optional":true},{"name":"successCallback","description":"

              function to call once the image loads. The new image will be passed\n to the function as a p5.Element object.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":723,"description":"

              Creates an <a></a> element that links to another web page.

              \n

              The first parmeter, href, is a string that sets the URL of the linked\npage.

              \n

              The second parameter, html, is a string that sets the inner HTML of the\nlink. It's common to use text, images, or buttons as links.

              \n

              The third parameter, target, is optional. It's a string that tells the\nweb browser where to open the link. By default, links open in the current\nbrowser tab. Passing '_blank' will cause the link to open in a new\nbrowser tab. MDN describes a few\nother options.

              \n","itemtype":"method","name":"createA","params":[{"name":"href","description":"

              URL of linked page.

              \n","type":"String"},{"name":"html","description":"

              inner HTML of link element to display.

              \n","type":"String"},{"name":"target","description":"

              target where the new link should open,\n either '_blank', '_self', '_parent', or '_top'.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an anchor element that links to p5js.org.\n let a = createA('http://p5js.org/', 'p5*js');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create an anchor tag that links to p5js.org.\n // Open the link in a new tab.\n let a = createA('http://p5js.org/', 'p5*js', '_blank');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":786,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":788,"description":"

              Creates a slider <input></input> element.

              \n

              Range sliders are useful for quickly selecting numbers from a given range.

              \n

              The first two parameters, min and max, are numbers that set the\nslider's minimum and maximum.

              \n

              The third parameter, value, is optional. It's a number that sets the\nslider's default value.

              \n

              The fourth parameter, step, is also optional. It's a number that sets the\nspacing between each value in the slider's range. Setting step to 0\nallows the slider to move smoothly from min to max.

              \n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"

              minimum value of the slider.

              \n","type":"Number"},{"name":"max","description":"

              maximum value of the slider.

              \n","type":"Number"},{"name":"value","description":"

              default value of the slider.

              \n","type":"Number","optional":true},{"name":"step","description":"

              size for each step in the slider's range.

              \n","type":"Number","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n slider = createSlider(0, 255);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n slider = createSlider(0, 255, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 50.\n slider = createSlider(0, 255, 0, 50);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 0 so that it moves smoothly.\n slider = createSlider(0, 255, 0, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":923,"description":"

              Creates a <button></button> element.

              \n

              The first parameter, label, is a string that sets the label displayed on\nthe button.

              \n

              The second parameter, value, is optional. It's a string that sets the\nbutton's value. See\nMDN\nfor more details.

              \n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"

              label displayed on the button.

              \n","type":"String"},{"name":"value","description":"

              value of the button.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and place it beneath the canvas.\n let button = createButton('click me');\n button.position(0, 100);\n\n // Call repaint() when the button is pressed.\n button.mousePressed(repaint);\n\n describe('A gray square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\n// Change the background color.\nfunction repaint() {\n let g = random(255);\n background(g);\n}\n\n
              \n\n
              \n\nlet button;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and set its value to 0.\n // Place the button beneath the canvas.\n button = createButton('click me', 'red');\n button.position(0, 100);\n\n // Call randomColor() when the button is pressed.\n button.mousePressed(randomColor);\n\n describe('A red square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\nfunction draw() {\n // Use the button's value to set the background color.\n let c = button.value();\n background(c);\n}\n\n// Set the button's value to a random color.\nfunction randomColor() {\n let c = random(['red', 'green', 'blue', 'yellow']);\n button.value(c);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1007,"description":"

              Creates a checkbox <input></input> element.

              \n

              Checkboxes extend the p5.Element class with a\nchecked() method. Calling myBox.checked() returns true if it the box\nis checked and false if not.

              \n

              The first parameter, label, is optional. It's a string that sets the label\nto display next to the checkbox.

              \n

              The second parameter, value, is also optional. It's a boolean that sets the\ncheckbox's value.

              \n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"

              label displayed after the checkbox.

              \n","type":"String","optional":true},{"name":"value","description":"

              value of the checkbox. Checked is true and unchecked is false.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox();\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\".\n checkbox = createCheckbox(' white');\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox labeled \"white\" beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\" and set its value to true.\n checkbox = createCheckbox(' white', true);\n checkbox.position(0, 100);\n\n describe('A white square with a checkbox labeled \"white\" beneath it. The square turns black when the box is unchecked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1158,"description":"

              Creates a dropdown menu <select></select> element.

              \n

              The parameter is optional. If true is passed, as in\nlet mySelect = createSelect(true), then the dropdown will support\nmultiple selections. If an existing <select></select> element\nis passed, as in let mySelect = createSelect(otherSelect), the existing\nelement will be wrapped in a new p5.Element\nobject.

              \n

              Dropdowns extend the p5.Element class with a few\nhelpful methods for managing options:

              \n
                \n
              • mySelect.option(name, [value]) adds an option to the menu. The first paremeter, name, is a string that sets the option's name and value. The second parameter, value, is optional. If provided, it sets the value that corresponds to the key name. If an option with name already exists, its value is changed to value.
                • \n
              • mySelect.value() returns the currently-selected option's value.
                • \n
              • mySelect.selected() returns the currently-selected option.
                • \n
              • mySelect.selected(option) selects the given option by default.
                • \n
              • mySelect.disable() marks the whole dropdown element as disabled.
                • \n
              • mySelect.disable(option) marks a given option as disabled.
                • \n
              • mySelect.enable() marks the whole dropdown element as enabled.
                • \n
              • mySelect.enable(option) marks a given option as enabled.
                • \n
              \n","itemtype":"method","name":"createSelect","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n // Disable the \"yellow\" option.\n mySelect.disable('yellow');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options with names and values.\n mySelect.option('one', 'red');\n mySelect.option('two', 'green');\n mySelect.option('three', 'blue');\n mySelect.option('four', 'yellow');\n\n // Set the selected option to \"one\".\n mySelect.selected('one');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\n// Hold CTRL to select multiple options on Windows and Linux.\n// Hold CMD to select multiple options on macOS.\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and allow multiple selections.\n // Place it beneath the canvas.\n mySelect = createSelect(true);\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the selected value(s) to draw circles.\n let colors = mySelect.selected();\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = 10 + i * 20;\n\n // Access the color.\n let c = colors[i];\n\n // Draw the circle.\n fill(c);\n circle(x, 50, 20);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1158,"params":[{"name":"multiple","description":"

              support multiple selections.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1323,"params":[{"name":"existing","description":"

              select element to wrap, either as a p5.Element or\n a HTMLSelectElement.

              \n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1439,"description":"

              Creates a radio button element.

              \n

              The parameter is optional. If a string is passed, as in\nlet myRadio = createSelect('food'), then each radio option will\nhave \"food\" as its name parameter: <input name=\"food\"></input>.\nIf an existing <div></div> or <span></span>\nelement is passed, as in let myRadio = createSelect(container), it will\nbecome the radio button's parent element.

              \n

              Radio buttons extend the p5.Element class with a few\nhelpful methods for managing options:

              \n
                \n
              • myRadio.option(value, [label]) adds an option to the menu. The first paremeter, value, is a string that sets the option's value and label. The second parameter, label, is optional. If provided, it sets the label displayed for the value. If an option with value already exists, its label is changed and its value is returned.
                • \n
              • myRadio.value() returns the currently-selected option's value.
                • \n
              • myRadio.selected() returns the currently-selected option.
                • \n
              • myRadio.selected(value) selects the given option and returns it as an HTMLInputElement.
                • \n
              • myRadio.disable(shouldDisable) enables the entire radio button if true is passed and disables it if false is passed.
                • \n
              \n","itemtype":"method","name":"createRadio","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(60);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three color options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let g = myRadio.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n // Color values are labeled with\n // emotions they evoke.\n myRadio.option('red', 'love');\n myRadio.option('yellow', 'joy');\n myRadio.option('blue', 'trust');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three options listed, \"love\", \"joy\", and \"trust\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n
              \n\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n // Create a button and place it beneath the canvas.\n let btn = createButton('disable');\n btn.position(0, 100);\n\n // Call disableRadio() when btn is pressed.\n btn.mousePressed(disableRadio);\n\n describe('A yellow square with three options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option. A \"disable\" button beneath the canvas disables the color options when pressed.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n// Disable myRadio.\nfunction disableRadio() {\n myRadio.disable(true);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1439,"params":[{"name":"containerElement","description":"

              container HTML Element, either a <div></div>\nor <span></span>.

              \n","type":"Object","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1573,"params":[{"name":"name","description":"

              name parameter assigned to each option's <input></input> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1578,"params":[],"return":{"description":"new p5.Element object.","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1740,"description":"

              Creates a color picker element.

              \n

              The parameter, value, is optional. If a color string or\np5.Color object is passed, it will set the default\ncolor.

              \n

              Color pickers extend the p5.Element class with a\ncouple of helpful methods for managing colors:

              \n
                \n
              • myPicker.value() returns the current color as a hex string in the format '#rrggbb'.
                • \n
              • myPicker.color() returns the current color as a p5.Color object.
                • \n
              \n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"

              default color as a CSS color string.

              \n","type":"String|p5.Color","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.color();\n background(c);\n}\n\n
              \n\n
              \n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A number with the format \"#rrggbb\" is displayed on a pink canvas. The background color and number change when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.value();\n background(c);\n\n // Display the current color as a hex string.\n text(c, 25, 55);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1840,"description":"

              Creates a text <input></input> element.

              \n

              Call myInput.size() to set the length of the text box.

              \n

              The first parameter, value, is optional. It's a string that sets the\ninput's default value. The input is blank by default.

              \n

              The second parameter, type, is also optional. It's a string that\nspecifies the type of text being input. See MDN for a full\nlist of options.\nThe default is 'text'.

              \n","itemtype":"method","name":"createInput","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas.\n myInput = createInput();\n myInput.position(0, 100);\n\n describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n\n
              \n\n
              \n\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas. Set its default\n // text to \"hello!\".\n myInput = createInput('hello!');\n myInput.position(0, 100);\n\n describe('The text \"hello!\" written at the center of a gray square. A text box beneath the square also says \"hello!\". The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1840,"params":[{"name":"value","description":"

              default value of the input box. Defaults to an empty string ''.

              \n","type":"String","optional":true},{"name":"type","description":"

              type of input. Defaults to 'text'.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1910,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1923,"description":"

              Creates an <input></input> element of type 'file'.

              \n

              createFileInput() allows users to select local files for use in a sketch.\nIt returns a p5.File object.

              \n

              The first parameter, callback, is a function that's called when the file\nloads. The callback function should have one parameter, file, that's a\np5.File object.

              \n

              The second parameter, multiple, is optional. It's a boolean value that\nallows loading multiple files if set to true. If true, callback\nwill be called once per file.

              \n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"

              function to call once the file loads.

              \n","type":"Function"},{"name":"multiple","description":"

              allow multiple files to be selected.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.File object.","type":"p5.File"},"example":["\n
              \n\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n\n
              \n\n
              \n\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2049,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2096,"description":"

              Creates a <video> element for simple audio/video playback.

              \n

              createVideo() returns a new\np5.MediaElement object. Videos are shown by\ndefault. They can be hidden by calling video.hide() and drawn to the\ncanvas using image().

              \n

              The first parameter, src, is the path the video. If a single string is\npassed, as in 'assets/topsecret.mp4', a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, ['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm'].\nThis is useful for ensuring that the video can play across different browsers with\ndifferent capabilities. See\nMDN\nfor more information about supported formats.

              \n

              The second parameter, callback, is optional. It's a function to call once\nthe video is ready to play.

              \n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"

              path to a video file, or an array of paths for\n supporting different browsers.

              \n","type":"String|String[]"},{"name":"callback","description":"

              function to call once the video is ready to play.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Note: this may not work in some browsers.\n let video = createVideo('assets/small.mp4');\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n let video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n
              \n\n
              \n\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n // Call mute() once the video loads.\n video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n muteVideo\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n// Mute the video once it loads.\nfunction muteVideo() {\n video.volume(0);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2192,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2194,"description":"

              Creates a hidden <audio> element for simple audio playback.

              \n

              createAudio() returns a new\np5.MediaElement object.

              \n

              The first parameter, src, is the path the video. If a single string is\npassed, as in 'assets/video.mp4', a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, ['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm'].\nThis is useful for ensuring that the video can play across different\nbrowsers with different capabilities. See\nMDN\nfor more information about supported formats.

              \n

              The second parameter, callback, is optional. It's a function to call once\nthe audio is ready to play.

              \n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"

              path to an audio file, or an array of paths\n for supporting different browsers.

              \n","type":"String|String[]","optional":true},{"name":"callback","description":"

              function to call once the audio is ready to play.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load the audio.\n let beat = createAudio('assets/beat.mp3');\n\n // Show the default audio controls.\n beat.showControls();\n\n describe('An audio beat plays when the user double-clicks the square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2240,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2276,"description":"

              Creates a <video> element that \"captures\" the audio/video stream from\nthe webcam and microphone.

              \n

              createCapture() returns a new\np5.MediaElement object. Videos are shown by\ndefault. They can be hidden by calling capture.hide() and drawn to the\ncanvas using image().

              \n

              The first parameter, type, is optional. It sets the type of capture to\nuse. By default, createCapture() captures both audio and video. If VIDEO\nis passed, as in createCapture(VIDEO), only video will be captured.\nIf AUDIO is passed, as in createCapture(AUDIO), only audio will be\ncaptured. A constraints object can also be passed to customize the stream.\nSee the \nW3C documentation for possible properties. Different browsers support different\nproperties.

              \n

              The 'flipped' property is an optional property which can be set to {flipped:true}\nto mirror the video output.If it is true then it means that video will be mirrored\nor flipped and if nothing is mentioned then by default it will be false.

              \n

              The second parameter,callback, is optional. It's a function to call once\nthe capture is ready for use. The callback function should have one\nparameter, stream, that's a\nMediaStream object.

              \n

              Note: createCapture() only works when running a sketch locally or using HTTPS. Learn more\nhere\nand here.

              \n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"

              type of capture, either AUDIO or VIDEO,\n or a constraints object. Both video and audio\n audio streams are captured by default.

              \n","type":"String|Constant|Object","optional":true},{"name":"flipped","description":"

              flip the capturing video and mirror the output with {flipped:true}. By\n default it is false.

              \n","type":"Object","optional":true},{"name":"callback","description":"

              function to call once the stream\n has loaded.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Create the video capture.\n createCapture(VIDEO);\n\n describe('A video stream from the webcam.');\n}\n\n
              \n\n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture and hide the element.\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A video stream from the webcam with inverted colors.');\n}\n\nfunction draw() {\n // Draw the video capture within the canvas.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n\n // Invert the colors in the stream.\n filter(INVERT);\n}\n\n
              \n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture with mirrored output.\n capture = createCapture(VIDEO,{ flipped:true });\n capture.size(100,100);\n\n describe('A video stream from the webcam with flipped or mirrored output.');\n}\n\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(480, 120);\n\n // Create a constraints object.\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: false\n };\n\n // Create the video capture.\n createCapture(constraints);\n\n describe('A video stream from the webcam.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2467,"description":"

              Creates a new p5.Element object.

              \n

              The first parameter, tag, is a string an HTML tag such as 'h5'.

              \n

              The second parameter, content, is optional. It's a string that sets the\nHTML content to insert into the new element. New elements have no content\nby default.

              \n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"

              tag for the new element.

              \n","type":"String"},{"name":"content","description":"

              HTML content to insert into the element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with nothing in it.\n createElement('h5');\n\n describe('A gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with the content \"p5*js\".\n let h5 = createElement('h5', 'p5*js');\n\n // Set the element's style and position.\n h5.style('color', 'deeppink');\n h5.position(30, 15);\n\n describe('The text \"p5*js\" written in pink in the middle of a gray square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2528,"description":"

              Adds a class to the element.

              \n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"

              name of class to add.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n \n function setup() {\n createCanvas(100, 100);\n background(200);\n // Create a div element.\n let div = createDiv('div');\n // Add a class to the div.\n div.addClass('myClass');\n describe('A gray square.');\n }\n \n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2567,"description":"

              Removes a class from the element.

              \n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"

              name of class to remove.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\n// In this example, a class is set when the div is created\n// and removed when mouse is pressed. This could link up\n// with a CSS style rule to toggle style properties.\n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n\n// Remove 'myClass' from the div when the user presses the mouse.\nfunction mousePressed() {\n div.removeClass('myClass');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2610,"description":"

              Checks if a class is already applied to element.

              \n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class.","type":"Boolean"},"params":[{"name":"c","description":"

              name of class to check.

              \n","type":"String"}],"example":["\n
              \n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the class 'show' to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the class 'show' when the mouse is pressed.\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2651,"description":"

              Toggles whether a class is applied to the element.

              \n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"

              class name to toggle.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the 'show' class to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the 'show' class when the mouse is pressed.\nfunction mousePressed() {\n div.toggleClass('show');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2696,"description":"

              Attaches the element as a child of another element.

              \n

              myElement.child() accepts either a string ID, DOM node, or\np5.Element. For example,\nmyElement.child(otherElement). If no argument is provided, an array of\nchildren DOM nodes is returned.

              \n","itemtype":"method","name":"child","return":{"description":"an array of child nodes.","type":"Node[]"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Make div1 the child of div0\n // using the p5.Element.\n div0.child(div1);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Give div1 an ID.\n div1.id('apples');\n\n // Make div1 the child of div0\n // using its ID.\n div0.child('apples');\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              \n\n
              \n\n// This example assumes there is a div already on the page\n// with id \"myChildDiv\".\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n\n // Select the child element by its ID.\n let elt = document.getElementById('myChildDiv');\n\n // Make div1 the child of div0\n // using its HTMLElement object.\n div0.child(elt);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2696,"params":[],"return":{"description":"an array of child nodes.","type":"Node[]"}},{"line":2776,"params":[{"name":"child","description":"

              the ID, DOM node, or p5.Element\n to add to the current element

              \n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2801,"description":"

              Centers the element either vertically, horizontally, or both.

              \n

              center() will center the element relative to its parent or according to\nthe page's body if the element has no parent.

              \n

              If no argument is passed, as in myElement.center() the element is aligned\nboth vertically and horizontally.

              \n","itemtype":"method","name":"center","params":[{"name":"align","description":"

              passing 'vertical', 'horizontal' aligns element accordingly

              \n","type":"String","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and style it.\n let div = createDiv('');\n div.size(10, 10);\n div.style('background-color', 'orange');\n\n // Center the div relative to the page's body.\n div.center();\n\n describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2867,"description":"

              Sets the inner HTML of the element, replacing any existing HTML.

              \n

              The second parameter, append, is optional. If true is passed, as in\nmyElement.html('hi', true), the HTML is appended instead of replacing\nexisting HTML.

              \n

              If no arguments are passed, as in myElement.html(), the element's inner\nHTML is returned.

              \n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the div element and set its size.\n let div = createDiv('');\n div.size(100, 100);\n\n // Set the inner HTML to \"hi\".\n div.html('hi');\n\n describe('A gray square with the word \"hi\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and set its size.\n let div = createDiv('Hello ');\n div.size(100, 100);\n\n // Append \"World\" to the div's HTML.\n div.html('World', true);\n\n describe('A gray square with the text \"Hello World\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element.\n let div = createDiv('Hello');\n\n // Prints \"Hello\" to the console.\n print(div.html());\n\n describe('A gray square with the word \"Hello!\" written beneath it.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2867,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":2936,"params":[{"name":"html","description":"

              the HTML to be placed inside the element

              \n","type":"String","optional":true},{"name":"append","description":"

              whether to append HTML to existing

              \n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2954,"description":"

              Sets the element's position.

              \n

              The first two parameters, x and y, set the element's position relative\nto the top-left corner of the web page.

              \n

              The third parameter, positionType, is optional. It sets the element's\npositioning scheme.\npositionType is a string that can be either 'static', 'fixed',\n'relative', 'sticky', 'initial', or 'inherit'.

              \n

              If no arguments passed, as in myElement.position(), the method returns\nthe element's position in an object, as in { x: 0, y: 0 }.

              \n","itemtype":"method","name":"position","return":{"description":"object of form `{ x: 0, y: 0 }` containing the element's position.","type":"Object"},"example":["\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas 50px to the right and 100px\n // below the top-left corner of the window.\n cnv.position(50, 100);\n\n describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas at the top-left corner\n // of the window with a 'fixed' position type.\n cnv.position(0, 0, 'fixed');\n\n describe('A gray square in the top-left corner of the web page.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2954,"params":[],"return":{"description":"object of form `{ x: 0, y: 0 }` containing the element's position.","type":"Object"}},{"line":3005,"params":[{"name":"x","description":"

              x-position relative to top-left of window (optional)

              \n","type":"Number","optional":true},{"name":"y","description":"

              y-position relative to top-left of window (optional)

              \n","type":"Number","optional":true},{"name":"positionType","description":"

              it can be static, fixed, relative, sticky, initial or inherit (optional)

              \n","type":"String","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":3092,"description":"

              Applies a style to the element by adding a\nCSS declaration.

              \n

              The first parameter, property, is a string. If the name of a style\nproperty is passed, as in myElement.style('color'), the method returns\nthe current value as a string or null if it hasn't been set. If a\nproperty:style string is passed, as in\nmyElement.style('color:deeppink'), the method sets the style property\nto value.

              \n

              The second parameter, value, is optional. It sets the property's value.\nvalue can be a string, as in\nmyElement.style('color', 'deeppink'), or a\np5.Color object, as in\nmyElement.style('color', myColor).

              \n","itemtype":"method","name":"style","return":{"description":"value of the property.","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\".\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', 'deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Create a paragraph element and set its font color using a p5.Color object.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', c);\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\"\n // using property:value syntax.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color:deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an empty paragraph element and set its font color to \"deeppink\".\n let p = createP();\n p.position(5, 5);\n p.style('color', 'deeppink');\n\n // Get the element's color as an RGB color string.\n let c = p.style('color');\n\n // Set the element's inner HTML using the RGB color string.\n p.html(c);\n\n describe('The text \"rgb(255, 20, 147)\" written in pink on a gray background.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3092,"params":[{"name":"property","description":"

              style property to set.

              \n","type":"String"}],"return":{"description":"value of the property.","type":"String"}},{"line":3192,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"

              value to assign to the property.

              \n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"value of the property.","type":"String"}}]},{"file":"src/dom/dom.js","line":3249,"description":"

              Adds an\nattribute\nto the element.

              \n

              This method is useful for advanced tasks. Most commonly-used attributes,\nsuch as id, can be set with their dedicated methods. For example,\nnextButton.id('next') sets an element's id attribute. Calling\nnextButton.attribute('id', 'next') has the same effect.

              \n

              The first parameter, attr, is the attribute's name as a string. Calling\nmyElement.attribute('align') returns the attribute's current value as a\nstring or null if it hasn't been set.

              \n

              The second parameter, value, is optional. It's a string used to set the\nattribute's value. For example, calling\nmyElement.attribute('align', 'center') sets the element's horizontal\nalignment to center.

              \n","itemtype":"method","name":"attribute","return":{"description":"value of the attribute.","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a container div element and place it at the top-left corner.\n let container = createDiv();\n container.position(0, 0);\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"left\".\n let p1 = createP('hi');\n p1.parent(container);\n p1.attribute('align', 'left');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"center\".\n let p2 = createP('hi');\n p2.parent(container);\n p2.attribute('align', 'center');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"right\".\n let p3 = createP('hi');\n p3.parent(container);\n p3.attribute('align', 'right');\n\n describe('A gray square with the text \"hi\" written on three separate lines, each placed further to the right.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3249,"params":[],"return":{"description":"value of the attribute.","type":"String"}},{"line":3304,"params":[{"name":"attr","description":"

              attribute to set.

              \n","type":"String"},{"name":"value","description":"

              value to assign to the attribute.

              \n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3333,"description":"

              Removes an attribute from the element.

              \n

              The parameter attr is the attribute's name as a string. For example,\ncalling myElement.removeAttribute('align') removes its align\nattribute if it's been set.

              \n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"

              attribute to remove.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place it in the center of the canvas.\n // Set its \"align\" attribute to \"center\".\n p = createP('hi');\n p.position(0, 20);\n p.attribute('align', 'center');\n\n describe('The text \"hi\" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');\n}\n\n// Remove the 'align' attribute when the user double-clicks the paragraph.\nfunction doubleClicked() {\n p.removeAttribute('align');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3384,"description":"

              Returns or sets the element's value.

              \n

              Calling myElement.value() returns the element's current value.

              \n

              The parameter, value, is an optional number or string. If provided,\nas in myElement.value(123), it's used to set the element's value.

              \n","itemtype":"method","name":"value","return":{"description":"value of the element.","type":"String|Number"},"example":["\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n
              \n\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square. The text resets to \"hello\" when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n// Reset the input's value.\nfunction doubleClicked() {\n input.value('hello');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3384,"params":[],"return":{"description":"value of the element.","type":"String|Number"}},{"line":3451,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3467,"description":"

              Shows the current element.

              \n","itemtype":"method","name":"show","chainable":1,"example":["\n
              \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and hide it.\n p = createP('p5*js');\n p.position(10, 10);\n p.hide();\n\n describe('A gray square. The text \"p5*js\" appears when the user double-clicks the square.');\n}\n\n// Show the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.show();\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3503,"description":"

              Hides the current element.

              \n","itemtype":"method","name":"hide","chainable":1,"example":["\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" at the center of a gray square. The text disappears when the user double-clicks the square.');\n}\n\n// Hide the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.hide();\n}\n              \n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3536,"description":"

            Sets the element's width and height.

            \n

            Calling myElement.size() without an argument returns the element's size\nas an object with the properties width and height. For example,\n { width: 20, height: 10 }.

            \n

            The first parameter, width, is optional. It's a number used to set the\nelement's width. Calling myElement.size(10)

            \n

            The second parameter, 'height, is also optional. It's a number used to set the element's height. For example, calling myElement.size(20, 10)` sets the element's width to 20 pixels and height\nto 10 pixels.

            \n

            The constant AUTO can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is width / height. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\nmyElement.size(20, AUTO) sets the width to 20 pixels and height to 10\npixels.

            \n

            Note: In the case of elements that need to load data, such as images, wait\nto call myElement.size() until after the data loads.

            \n","itemtype":"method","name":"size","return":{"description":"width and height of the element in an object.","type":"Object"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 20 pixels.\n div.size(80, 20);\n\n describe('A gray square with a pink rectangle near its top.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 40 pixels.\n div.size(80, 40);\n\n // Get the div's size as an object.\n let s = div.size();\n\n // Display the div's dimensions.\n div.html(`${s.width} x ${s.height}`);\n\n describe('A gray square with a pink rectangle near its top. The text \"80 x 40\" is written within the rectangle.');\n}\n\n
            \n\n
            \n\nlet img1;\nlet img2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n img1 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n ''\n );\n img1.position(0, 0);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n // Resize the image once it's loaded.\n img2 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n '',\n resizeImage\n );\n img2.position(0, 0);\n\n describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');\n}\n\n// Resize img2 and keep its aspect ratio.\nfunction resizeImage() {\n img2.size(50, AUTO);\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3536,"params":[],"return":{"description":"width and height of the element in an object.","type":"Object"}},{"line":3650,"params":[{"name":"w","description":"

            width of the element, either AUTO, or a number.

            \n","type":"Number|Constant","optional":true},{"name":"h","description":"

            height of the element, either AUTO, or a number.

            \n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":3705,"description":"

            Removes the element, stops all audio/video streams, and removes all\ncallback functions.

            \n","itemtype":"method","name":"remove","example":["\n
            \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" written at the center of a gray square. ');\n}\n\n// Remove the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.remove();\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3764,"description":"

            Calls a function when the user drops a file on the element.

            \n

            The first parameter, callback, is a function to call once the file loads.\nThe callback function should have one parameter, file, that's a\np5.File object. If the user drops multiple files on\nthe element, callback, is called once for each file.

            \n

            The second parameter, fxn, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, event, that's a\nDragEvent.

            \n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"

            called when a file loads. Called once for each file dropped.

            \n","type":"Function"},{"name":"fxn","description":"

            called once when any files are dropped.

            \n","type":"Function","optional":true}],"chainable":1,"example":["\n
            \n\n// Drop an image on the canvas to view\n// this example.\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call handleFile() when a file that's dropped on the canvas has loaded.\n c.drop(handleFile);\n\n describe('A gray square. When the user drops an image on the square, it is displayed.');\n}\n\n// Remove the existing image and display the new one.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an element with the\n // dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n
            \n\n
            \n\n// Drop an image on the canvas to view\n// this example.\nlet img;\nlet msg;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call functions when the user drops a file on the canvas\n // and when the file loads.\n c.drop(handleFile, handleDrop);\n\n describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');\n}\n\n// Display the image when it loads.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an img element with the dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n// Display the file's name when it loads.\nfunction handleDrop(event) {\n // Remove current paragraph, if any.\n if (msg) {\n msg.remove();\n }\n\n // Use event to get the drop target's id.\n let id = event.target.id;\n\n // Write the canvas' id beneath it.\n msg = createP(id);\n msg.position(0, 100);\n\n // Set the font color randomly for each drop.\n let c = random(['red', 'green', 'blue']);\n msg.style('color', c);\n msg.style('font-size', '12px');\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3919,"description":"

            Makes the element draggable.

            \n

            The parameter, elmnt, is optional. If another\np5.Element object is passed, as in\nmyElement.draggable(otherElement), the other element will become draggable.

            \n","itemtype":"method","name":"draggable","params":[{"name":"elmnt","description":"

            another p5.Element.

            \n","type":"p5.Element","optional":true}],"chainable":1,"example":["\n
            \n\nlet stickyNote;\nlet textInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and style it.\n stickyNote = createDiv('Note');\n stickyNote.position(5, 5);\n stickyNote.size(80, 20);\n stickyNote.style('font-size', '16px');\n stickyNote.style('font-family', 'Comic Sans MS');\n stickyNote.style('background', 'orchid');\n stickyNote.style('padding', '5px');\n\n // Make the note draggable.\n stickyNote.draggable();\n\n // Create a panel div and style it.\n let panel = createDiv('');\n panel.position(5, 40);\n panel.size(80, 50);\n panel.style('background', 'orchid');\n panel.style('font-size', '16px');\n panel.style('padding', '5px');\n panel.style('text-align', 'center');\n\n // Make the panel draggable.\n panel.draggable();\n\n // Create a text input and style it.\n textInput = createInput('Note');\n textInput.size(70);\n\n // Add the input to the panel.\n textInput.parent(panel);\n\n // Call handleInput() when text is input.\n textInput.input(handleInput);\n\n describe(\n 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'\n );\n}\n\n// Update stickyNote's HTML when text is input.\nfunction handleInput() {\n stickyNote.html(textInput.value());\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4055,"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4132,"description":"

            Path to the media element's source as a string.

            \n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n
            \n\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"https://p5js.org/reference/assets/beat.mp3\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n textWrap(CHAR);\n text(beat.src, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4189,"description":"

            Plays audio or video from a media element.

            \n","itemtype":"method","name":"play","chainable":1,"example":["\n
            \n\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display a message.\n text('Click to play', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks the square.');\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n beat.play();\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4255,"description":"

            Stops a media element and sets its current time to 0.

            \n

            Calling media.play() will restart playing audio/video from the beginning.

            \n","itemtype":"method","name":"stop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isStopped = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to start\" written in black on a gray background. The beat starts or stops when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isStopped === true) {\n text('Click to start', 50, 50);\n } else {\n text('Click to stop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isStopped === true) {\n // If the beat is stopped, play it.\n beat.play();\n isStopped = false;\n } else {\n // If the beat is playing, stop it.\n beat.stop();\n isStopped = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4314,"description":"

            Pauses a media element.

            \n

            Calling media.play() will resume playing audio/video from the moment it paused.

            \n","itemtype":"method","name":"pause","chainable":1,"example":["\n
            \n\nlet beat;\nlet isPaused = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. The beat plays or pauses when the user clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPaused === true) {\n text('Click to play', 50, 50);\n } else {\n text('Click to pause', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPaused === true) {\n // If the beat is paused,\n // play it.\n beat.play();\n isPaused = false;\n } else {\n // If the beat is playing,\n // pause it.\n beat.pause();\n isPaused = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4374,"description":"

            Plays the audio/video repeatedly in a loop.

            \n","itemtype":"method","name":"loop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isLooping = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to loop\" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isLooping === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to loop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isLooping === true) {\n // If the beat is looping, stop it.\n beat.stop();\n isLooping = false;\n } else {\n // If the beat is stopped, loop it.\n beat.loop();\n isLooping = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4432,"description":"

            Stops the audio/video from playing in a loop.

            \n

            The media will stop when it finishes playing.

            \n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPlaying === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to play', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === true) {\n // If the beat is playing, stop it.\n beat.stop();\n isPlaying = false;\n } else {\n // If the beat is stopped, play it.\n beat.play();\n isPlaying = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4512,"description":"

            Sets the audio/video to play once it's loaded.

            \n

            The parameter, shouldAutoplay, is optional. Calling\nmedia.autoplay() without an argument causes the media to play\nautomatically. If true is passed, as in media.autoplay(true), the\nmedia will automatically play. If false is passed, as in\nmedia.autoPlay(false), it won't play automatically.

            \n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"

            whether the element should autoplay.

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Call handleVideo() once the video loads.\n video = createVideo('assets/fingers.mov', handleVideo);\n\n describe('A video of fingers walking on a treadmill.');\n}\n\n// Set the video's size and play it.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay();\n}\n\n
            \n\n
            \n\nfunction setup() {\n noCanvas();\n\n // Load a video, but don't play it automatically.\n let video = createVideo('assets/fingers.mov', handleVideo);\n\n // Play the video when the user clicks on it.\n video.mousePressed(handlePress);\n\n describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');\n}\n\n
            \n\n// Set the video's size and playback mode.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay(false);\n}\n\n// Play the video.\nfunction handleClick() {\n video.play();\n}"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4597,"description":"

            Sets the audio/video volume.

            \n

            Calling media.volume() without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).

            \n

            The parameter, val, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling media.volume(0.5)\nsets the volume to half of its maximum.

            \n","itemtype":"method","name":"volume","return":{"description":"current volume.","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Volume: V\" on a gray square with media controls beneath it. The number \"V\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 1.\n let n = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Use n to set the volume.\n dragon.volume(n);\n\n // Get the current volume and display it.\n let v = dragon.volume();\n\n // Round v to 1 decimal place for display.\n v = round(v, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the volume.\n text(`Volume: ${v}`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4597,"params":[],"return":{"description":"current volume.","type":"Number"}},{"line":4652,"params":[{"name":"val","description":"

            volume between 0.0 and 1.0.

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4665,"description":"

            Sets the audio/video playback speed.

            \n

            The parameter, val, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.

            \n

            Calling media.speed() returns the current speed as a number.

            \n

            Note: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.

            \n","itemtype":"method","name":"speed","return":{"description":"current playback speed.","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Speed: S\" on a gray square with media controls beneath it. The number \"S\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 2.\n let n = sin(frameCount * 0.01) + 1;\n\n // Use n to set the playback speed.\n dragon.speed(n);\n\n // Get the current speed and display it.\n let s = dragon.speed();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the speed.\n text(`Speed: ${s}`, 50, 50);\n}\n"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4665,"params":[],"return":{"description":"current playback speed.","type":"Number"}},{"line":4723,"params":[{"name":"speed","description":"

            speed multiplier for playback.

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4740,"description":"

            Sets the media element's playback time.

            \n

            The parameter, time, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.

            \n

            Calling media.time() without an argument returns the number of seconds\nthe audio/video has played.

            \n

            Note: Time resets to 0 when looping media restarts.

            \n","itemtype":"method","name":"time","return":{"description":"current time (in seconds).","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n\n
            \n\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n // Jump to 2 seconds to start.\n dragon.time(2);\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4740,"params":[],"return":{"description":"current time (in seconds).","type":"Number"}},{"line":4828,"params":[{"name":"time","description":"

            time to jump to (in seconds).

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4842,"description":"

            Returns the audio/video's duration in seconds.

            \n","itemtype":"method","name":"duration","return":{"description":"duration (in seconds).","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds left\" on a gray square with media controls beneath it. The number \"S\" decreases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the time remaining.\n let s = dragon.duration() - dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the time remaining.\n text(`${s} seconds left`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4998,"description":"

            Calls a function when the audio/video reaches the end of its playback.

            \n

            The element is passed as an argument to the callback function.

            \n

            Note: The function won't be called if the media is looping.

            \n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"

            function to call when playback ends.\n The p5.MediaElement is passed as\n the argument.

            \n","type":"Function"}],"chainable":1,"example":["\n
            \n\nlet beat;\nlet isPlaying = false;\nlet isDone = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n // Call handleEnd() when the beat finishes.\n beat.onended(handleEnd);\n\n describe('The text \"Click to play\" written in black on a gray square. A beat plays when the user clicks. The text \"Done!\" appears when the beat finishes playing.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different messages based on playback.\n if (isDone === true) {\n text('Done!', 50, 50);\n } else if (isPlaying === false) {\n text('Click to play', 50, 50);\n } else {\n text('Playing...', 50, 50);\n }\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === false) {\n isPlaying = true;\n beat.play();\n }\n}\n\n// Set isDone when playback ends.\nfunction handleEnd() {\n isDone = false;\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5067,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5069,"description":"

            Sends the element's audio to an output.

            \n

            The parameter, audioNode, can be an AudioNode or an object from the\np5.sound library.

            \n

            If no element is provided, as in myElement.connect(), the element\nconnects to the main output. All connections are removed by the\n.disconnect() method.

            \n

            Note: This method is meant to be used with the p5.sound.js addon library.

            \n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"

            AudioNode from the Web Audio API,\nor an object from the p5.sound library

            \n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5122,"description":"

            Disconnect all Web Audio routing, including to the main output.

            \n

            This is useful if you want to re-route the output through audio effects,\nfor example.

            \n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5138,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5140,"description":"

            Show the default\nHTMLMediaElement\ncontrols.

            \n

            Note: The controls vary between web browsers.

            \n","itemtype":"method","name":"showControls","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('🐉', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5181,"description":"

            Hide the default\nHTMLMediaElement\ncontrols.

            \n","itemtype":"method","name":"hideControls","example":["\n
            \n\nlet dragon;\nlet isHidden = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Double-click to hide controls\" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n\n // Display a different message when controls are hidden or shown.\n if (isHidden === true) {\n text('Double-click to show controls', 10, 20, 80, 80);\n } else {\n text('Double-click to hide controls', 10, 20, 80, 80);\n }\n}\n\n// Show/hide controls based on a double-click.\nfunction doubleClicked() {\n if (isHidden === true) {\n dragon.showControls();\n isHidden = false;\n } else {\n dragon.hideControls();\n isHidden = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5237,"description":"

            Schedules a function to call when the audio/video reaches a specific time\nduring its playback.

            \n

            The first parameter, time, is the time, in seconds, when the function\nshould run. This value is passed to callback as its first argument.

            \n

            The second parameter, callback, is the function to call at the specified\ncue time.

            \n

            The third parameter, value, is optional and can be any type of value.\nvalue is passed to callback.

            \n

            Calling media.addCue() returns an ID as a string. This is useful for\nremoving the cue later.

            \n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"

            cue time to run the callback function.

            \n","type":"Number"},{"name":"callback","description":"

            function to call at the cue time.

            \n","type":"Function"},{"name":"value","description":"

            object to pass as the argument to\n callback.

            \n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n useful for `media.removeCue(id)`.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5302,"description":"

            Removes a callback based on its ID.

            \n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"

            ID of the cue, created by media.addCue().

            \n","type":"Number"}],"example":["\n
            \n\nlet lavenderID;\nlet isRemoved = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n\n // Record the ID of the \"lavender\" callback.\n lavenderID = beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to remove lavender.\" written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isRemoved === false) {\n text('Double-click to remove lavender.', 10, 10, 80, 80);\n } else {\n text('No more lavender.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove the lavender color-change cue when the user double-clicks.\nfunction doubleClicked() {\n if (isRemoved === false) {\n beat.removeCue(lavenderID);\n isRemoved = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5373,"description":"

            Removes all functions scheduled with media.addCue().

            \n","itemtype":"method","name":"clearCues","example":["\n
            \n\nlet isChanging = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to stop changing.\" written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isChanging === true) {\n text('Double-click to stop changing.', 10, 10, 80, 80);\n } else {\n text('No more changes.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove cued functions and stop changing colors when the user\n// double-clicks.\nfunction doubleClicked() {\n if (isChanging === true) {\n beat.clearCues();\n isChanging = false;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5547,"description":"

            Underlying\nFile\nobject. All File properties and methods are accessible.

            \n","itemtype":"property","name":"file","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Use the p5.File once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5596,"description":"

            The file\nMIME type\nas a string.

            \n

            For example, 'image' and 'text' are both MIME types.

            \n","itemtype":"property","name":"type","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayType() when the file loads.\n let input = createFileInput(displayType);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displayType(file) {\n background(200);\n\n // Display the p5.File's type.\n text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5634,"description":"

            The file subtype as a string.

            \n

            For example, a file with an 'image'\nMIME type\nmay have a subtype such as png or jpeg.

            \n","itemtype":"property","name":"subtype","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySubtype() when the file loads.\n let input = createFileInput(displaySubtype);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displaySubtype(file) {\n background(200);\n\n // Display the p5.File's subtype.\n text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5673,"description":"

            The file name as a string.

            \n","itemtype":"property","name":"name","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayName() when the file loads.\n let input = createFileInput(displayName);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');\n}\n\n// Display the p5.File's name once it loads.\nfunction displayName(file) {\n background(200);\n\n // Display the p5.File's name.\n text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5708,"description":"

            The number of bytes in the file.

            \n","itemtype":"property","name":"size","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySize() when the file loads.\n let input = createFileInput(displaySize);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');\n}\n\n// Display the p5.File's size in bytes once it loads.\nfunction displaySize(file) {\n background(200);\n\n // Display the p5.File's size.\n text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5743,"description":"

            A string containing the file's data.

            \n

            Data can be either image data, text contents, or a parsed object in the\ncase of JSON and p5.XML objects.

            \n","itemtype":"property","name":"data","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayData() when the file loads.\n let input = createFileInput(displayData);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');\n}\n\n// Display the p5.File's data once it loads.\nfunction displayData(file) {\n background(200);\n\n // Display the p5.File's data, which looks like a random string of characters.\n text(file.data, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"

            The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.

            \n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"

            The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n describe('Magnitude of device acceleration is displayed as ellipse size.');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":45,"description":"

            The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":67,"description":"

            The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":90,"description":"

            The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":100,"description":"

            The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":110,"description":"

            The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":131,"description":"

            The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch \nangleMode() is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":164,"description":"

            The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch \nangleMode() is set to DEGREES, the value will be -90 to 90. If\nit is set to RADIANS, the value will be -PI/2 to PI/2.

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":197,"description":"

            The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch \nangleMode() is set to DEGREES, the value will be 0 to 360. If\nit is set to RADIANS, the value will be 0 to 2*PI.

            \n

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

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":234,"description":"

            The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.

            \n

            pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":278,"description":"

            The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -90 to 90. If it is set to RADIANS, the value will\nbe -PI/2 to PI/2.

            \n

            pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":321,"description":"

            The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be 0 to 360. If it is set to RADIANS, the value will\nbe 0 to 2*PI.

            \n

            pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":378,"description":"

            When a device is rotated, the axis that triggers the deviceTurned()\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().

            \n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":417,"description":"

            The setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.

            \n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"

            The threshold value

            \n","type":"Number"}],"example":["\n
            \n\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square's color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":459,"description":"

            The setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.

            \n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"

            The threshold value

            \n","type":"Number"}],"example":["\n
            \n\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box's fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device is being shaked`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":501,"description":"

            The deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using setMoveThreshold().

            \n","itemtype":"method","name":"deviceMoved","example":["\n
            \n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":531,"description":"

            The deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.

            \n

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

            \n","itemtype":"method","name":"deviceTurned","example":["\n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n\n
            \n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":589,"description":"

            The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using setShakeThreshold().

            \n","itemtype":"method","name":"deviceShaken","example":["\n
            \n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device shakes`);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"

            The boolean system variable keyIsPressed is true if any key is pressed\nand false if no keys are pressed.

            \n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n
            \n\nfunction draw() {\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n rect(25, 25, 50, 50);\n describe('50-by-50 white rect that turns black on keypress.');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":34,"description":"

            The system variable key always contains the value of the most recent\nkey on the keyboard that was typed. To get the proper capitalization, it\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\nvariable.

            \n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n
            \n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n fill(245, 123, 158);\n textSize(50);\n}\n\nfunction draw() {\n background(200);\n text(key, 33, 65); // Display last key pressed.\n describe('canvas displays any key value that is pressed in pink font.');\n}\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":60,"description":"

            The variable keyCode is used to detect special keys such as BACKSPACE,\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\nYou can also check for custom keys by looking up the keyCode of any key\non a site like this: keycode.info.

            \n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n
            \nlet fillVal = 126;\nfunction draw() {\n fill(fillVal);\n rect(25, 25, 50, 50);\n describe(`Grey rect center. turns white when up arrow pressed and black when down.\n Display key pressed and its keyCode in a yellow box.`);\n}\n\nfunction keyPressed() {\n if (keyCode === UP_ARROW) {\n fillVal = 255;\n } else if (keyCode === DOWN_ARROW) {\n fillVal = 0;\n }\n}\n
            \n
            \nfunction draw() {}\nfunction keyPressed() {\n background('yellow');\n text(`${key} ${keyCode}`, 10, 40);\n print(key, ' ', keyCode);\n}\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":98,"description":"

            The keyPressed() function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the keyCode variable.

            \n

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

            \n

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

            \n

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

            \nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the method.

            \n","itemtype":"method","name":"keyPressed","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when key pressed and black\n when released.`);\n}\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when left arrow pressed and\n black when right.`);\n}\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n}\n\n
            \n
            \n\nfunction keyPressed() {\n // Do something\n return false; // prevent any default behaviour\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":185,"description":"

            The keyReleased() function is called once every time a key is released.\nSee key and keyCode for more information.

            \nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n","itemtype":"method","name":"keyReleased","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when key pressed and black\n when pressed again`);\n}\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n return false; // prevent any default behavior\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":237,"description":"

            The keyTyped() function is called once every time a key is pressed, but\naction keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect\na keyCode for one of these keys, use the keyPressed() function instead.\nThe most recent key typed will be stored in the key variable.

            \n

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

            \nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the function.

            \n","itemtype":"method","name":"keyTyped","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black rect center. turns white when 'a' key typed and\n black when 'b' pressed`);\n}\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // uncomment to prevent any default behavior\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":291,"description":"

            The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.

            \n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":301,"description":"

            The keyIsDown() function checks if the key is currently down, i.e. pressed.\nIt can be used if you have an object that moves, and you want several keys\nto be able to affect its behaviour simultaneously, such as moving a\nsprite diagonally. You can put in any number representing the keyCode of\nthe key, or use any of the variable keyCode names listed\nhere.

            \n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"

            The key to check for.

            \n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n
            \nlet x = 100;\nlet y = 100;\n\nfunction setup() {\n createCanvas(512, 512);\n fill(255, 0, 0);\n}\n\nfunction draw() {\n if (keyIsDown(LEFT_ARROW)) {\n x -= 5;\n }\n\n if (keyIsDown(RIGHT_ARROW)) {\n x += 5;\n }\n\n if (keyIsDown(UP_ARROW)) {\n y -= 5;\n }\n\n if (keyIsDown(DOWN_ARROW)) {\n y += 5;\n }\n\n clear();\n ellipse(x, y, 50, 50);\n describe(`50-by-50 red ellipse moves left, right, up, and\n down with arrow presses.`);\n}\n
            \n\n
            \nlet diameter = 50;\n\nfunction setup() {\n createCanvas(512, 512);\n}\n\nfunction draw() {\n // 107 and 187 are keyCodes for \"+\"\n if (keyIsDown(107) || keyIsDown(187)) {\n diameter += 1;\n }\n\n // 109 and 189 are keyCodes for \"-\"\n if (keyIsDown(109) || keyIsDown(189)) {\n diameter -= 1;\n }\n\n clear();\n fill(255, 0, 0);\n ellipse(50, 50, diameter, diameter);\n describe(`50-by-50 red ellipse gets bigger or smaller when\n + or - are pressed.`);\n}\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"

            The variable movedX contains the horizontal movement of the mouse since the last frame

            \n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n
            \n \n let x = 50;\n function setup() {\n rectMode(CENTER);\n }\nfunction draw() {\n if (x > 48) {\n x -= 2;\n } else if (x < 48) {\n x += 2;\n }\n x += floor(movedX / 5);\n background(237, 34, 93);\n fill(0);\n rect(x, 50, 50, 50);\n describe(`box moves left and right according to mouse movement\n then slowly back towards the center`);\n }\n \n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"

            The variable movedY contains the vertical movement of the mouse since the last frame

            \n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n
            \n\nlet y = 50;\nfunction setup() {\n rectMode(CENTER);\n}\n\nfunction draw() {\n if (y > 48) {\n y -= 2;\n } else if (y < 48) {\n y += 2;\n }\n y += floor(movedY / 5);\n background(237, 34, 93);\n fill(0);\n rect(50, y, 50, 50);\n describe(`box moves up and down according to mouse movement then\n slowly back towards the center`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"

            The system variable mouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseX will hold the x value\nof the most recent touch point.

            \n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n
            \n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, 0, mouseX, 100);\n describe('horizontal black line moves left and right with mouse x-position');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":104,"description":"

            The system variable mouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseY will hold the y value\nof the most recent touch point.

            \n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n
            \n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(0, mouseY, 100, mouseY);\n describe('vertical black line moves up and down with mouse y-position');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":128,"description":"

            The system variable pmouseX always contains the horizontal position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n
            \n\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n //slow down the frameRate to make it more visible\n frameRate(10);\n}\n\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, mouseY, pmouseX, pmouseY);\n print(pmouseX + ' -> ' + mouseX);\n describe(`line trail is created from cursor movements.\n faster movement make longer line.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":159,"description":"

            The system variable pmouseY always contains the vertical position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n //draw a square only if the mouse is not moving\n if (mouseY === pmouseY && mouseX === pmouseX) {\n rect(20, 20, 60, 60);\n }\n\n print(pmouseY + ' -> ' + mouseY);\n describe(`60-by-60 black rect center, fuchsia background.\n rect flickers on mouse movement`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":189,"description":"

            The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.

            \n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the horizontal mouse position\n //relative to the window\n myCanvas.position(winMouseX + 1, windowHeight / 2);\n\n //the y of the square is relative to the canvas\n rect(20, mouseY, 60, 60);\n describe(`60-by-60 black rect y moves with mouse y and fuchsia\n canvas moves with mouse x`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":226,"description":"

            The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.

            \n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the vertical mouse position\n //relative to the window\n myCanvas.position(windowWidth / 2, winMouseY + 1);\n\n //the x of the square is relative to the canvas\n rect(mouseX, 20, 60, 60);\n describe(`60-by-60 black rect x moves with mouse x and\n fuchsia canvas y moves with mouse y`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":263,"description":"

            The system variable pwinMouseX always contains the horizontal position\nof the mouse in the frame previous to the current frame, relative to\n(0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current x position is the horizontal mouse speed\n let speed = abs(winMouseX - pwinMouseX);\n //change the size of the circle\n //according to the horizontal speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n describe(`fuchsia ellipse moves with mouse x and y.\n Grows and shrinks with mouse speed`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":302,"description":"

            The system variable pwinMouseY always contains the vertical position of\nthe mouse in the frame previous to the current frame, relative to (0, 0)\nof the window. Note: pwinMouseY will be reset to the current winMouseY\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n
            \n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current y position is the vertical mouse speed\n let speed = abs(winMouseY - pwinMouseY);\n //change the size of the circle\n //according to the vertical speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n describe(`fuchsia ellipse moves with mouse x and y.\n Grows and shrinks with mouse speed`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":341,"description":"

            p5 automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.

            \n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed === true) {\n if (mouseButton === LEFT) {\n ellipse(50, 50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n rect(25, 25, 50, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n\n print(mouseButton);\n describe(`50-by-50 black ellipse appears on center of fuchsia\n canvas on mouse click/press.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":378,"description":"

            The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.

            \n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n
            \n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed === true) {\n ellipse(50, 50, 50, 50);\n } else {\n rect(25, 25, 50, 50);\n }\n\n print(mouseIsPressed);\n describe(`black 50-by-50 rect becomes ellipse with mouse click/press.\n fuchsia background.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":469,"description":"

            The mouseMoved() function is called every time the mouse moves and a mouse\nbutton is not pressed.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the method.

            \n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Move the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black 50-by-50 rect becomes lighter with mouse movements until\n white then resets no image displayed`);\n}\nfunction mouseMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":521,"description":"

            The mouseDragged() function is called once every time the mouse moves and\na mouse button is pressed. If no mouseDragged() function is defined, the\ntouchMoved() function will be called instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Drag the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`black 50-by-50 rect turns lighter with mouse click and\n drag until white, resets`);\n}\nfunction mouseDragged() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseDragged() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":599,"description":"

            The mousePressed() function is called once after every time a mouse button\nis pressed. The mouseButton variable (see the related reference entry)\ncan be used to determine which button has been pressed. If no\nmousePressed() function is defined, the touchStarted() function will be\ncalled instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Click anywhere in the webpage to change\n// the color value of the rectangle\n\nlet colorValue = 0;\nfunction draw() {\n fill(colorValue);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\nfunction mousePressed() {\n if (colorValue === 0) {\n colorValue = 255;\n } else {\n colorValue = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mousePressed() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":680,"description":"

            The mouseReleased() function is called every time a mouse button is\nreleased. If no mouseReleased() function is defined, the touchEnded()\nfunction will be called instead if it is defined.

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\nfunction mouseReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseReleased() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":760,"description":"

            The mouseClicked() function is called once after a mouse button has been\npressed and then released.

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

            \nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add \"return false\" to the end of the function.

            \n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse click/press.');\n}\n\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction mouseClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":826,"description":"

            The doubleClicked() function is executed every time a event\nlistener has detected a dblclick event which is a part of the\nDOM L3 specification. The doubleClicked event is fired when a\npointing device button (usually a mouse's primary button)\nis clicked twice on a single element. For more info on the\ndblclick event refer to mozilla's documentation here:\nhttps://developer.mozilla.org/en-US/docs/Web/Events/dblclick

            \n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"

            optional MouseEvent callback argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been double clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('black 50-by-50 rect turns white with mouse doubleClick/press.');\n}\n\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction doubleClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n
            \n\n
            \n\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n console.log(event);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":908,"description":"

            The function mouseWheel() is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.

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

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

            \nDue to the current support of the \"wheel\" event on Safari, the function\nmay only work as expected if \"return false\" is included while using Safari.

            \n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"

            optional WheelEvent callback argument.

            \n","type":"WheelEvent","optional":true}],"example":["\n
            \n\nlet pos = 25;\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n rect(25, pos, 50, 50);\n describe(`black 50-by-50 rect moves up and down with vertical scroll.\n fuchsia background`);\n}\n\nfunction mouseWheel(event) {\n print(event.delta);\n //move the square according to the vertical scroll amount\n pos += event.delta;\n //uncomment to block page scrolling\n //return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":960,"description":"

            The function requestPointerLock()\nlocks the pointer to its current position and makes it invisible.\nUse movedX and movedY to get the difference the mouse was moved since\nthe last call of draw.\nNote that not all browsers support this feature.\nThis enables you to create experiences that aren't limited by the mouse moving out of the screen\neven if it is repeatedly moved into one direction.\nFor example, a first person perspective experience.

            \n","itemtype":"method","name":"requestPointerLock","example":["\n
            \n\nlet cam;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n requestPointerLock();\n cam = createCamera();\n}\n\nfunction draw() {\n background(255);\n cam.pan(-movedX * 0.001);\n cam.tilt(movedY * 0.001);\n sphere(25);\n describe(`3D scene moves according to mouse mouse movement in a\n first person perspective`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1005,"description":"

            The function exitPointerLock()\nexits a previously triggered pointer Lock\nfor example to make ui elements usable etc

            \n","itemtype":"method","name":"exitPointerLock","example":["\n
            \n\n//click the canvas to lock the pointer\n//click again to exit (otherwise escape)\nlet locked = false;\nfunction draw() {\n background(237, 34, 93);\n describe('cursor gets locked / unlocked on mouse-click');\n}\nfunction mouseClicked() {\n if (!locked) {\n locked = true;\n requestPointerLock();\n } else {\n exitPointerLock();\n locked = false;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"

            The system variable touches[] contains an array of the positions of all\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\nunique touch as it moves. Each element in the array is an object with x, y,\nand id properties.

            \n

            The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).

            \n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n
            \n\n// On a touchscreen device, touch\n// the canvas using one or more fingers\n// at the same time\nfunction draw() {\n clear();\n let display = touches.length + ' touches';\n text(display, 5, 10);\n describe(`Number of touches currently registered are displayed\n on the canvas`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":70,"description":"

            The touchStarted() function is called once after every time a touch is\nregistered. If no touchStarted() function is defined, the mousePressed()\nfunction will be called instead if it is defined.

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

            \n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"

            optional TouchEvent callback argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// Touch within the image to change\n// the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns white with touch event.');\n}\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchStarted() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":141,"description":"

            The touchMoved() function is called every time a touch move is registered.\nIf no touchMoved() function is defined, the mouseDragged() function will\nbe called instead if it is defined.

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

            \n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"

            optional TouchEvent callback argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// Move your finger across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns lighter with touch until white. resets');\n}\nfunction touchMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":212,"description":"

            The touchEnded() function is called every time a touch ends. If no\ntouchEnded() function is defined, the mouseReleased() function will be\ncalled instead if it is defined.

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

            \n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"

            optional TouchEvent callback argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// Release touch within the image to\n// change the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe('50-by-50 black rect turns white with touch.');\n}\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\nfunction touchEnded() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\ndescribe('no image displayed');\n\n
            \n\n
            \n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n console.log(event);\n}\ndescribe('no image displayed');\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":1,"description":"

            This module defines the filters for use with image buffers.

            \n

            This module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.

            \n

            Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.

            \n

            A number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.

            \n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"

            This module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.

            \n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"

            Creates a new p5.Image object.

            \n

            createImage() uses the width and height parameters to set the new\np5.Image object's dimensions in pixels. The new\np5.Image can be modified by updating its\npixels array or by calling its\nget() and\nset() methods. The\nloadPixels() method must be called\nbefore reading or modifying pixel values. The\nupdatePixels() method must be called\nfor updates to take effect.

            \n

            Note: The new p5.Image object is transparent by\ndefault.

            \n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"

            width in pixels.

            \n","type":"Integer"},{"name":"height","description":"

            height in pixels.

            \n","type":"Integer"}],"return":{"description":"new p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Set all the image's pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image's pixel values.\n img.updatePixels();\n\n // Draw the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Create a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n // Calculate the transparency.\n let a = map(x, 0, img.width, 0, 255);\n\n // Create a p5.Color object.\n let c = color(0, a);\n\n // Set the pixel's color.\n img.set(x, y, c);\n }\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horizontal color gradient that transitions from gray to black.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the pixels into memory.\n img.loadPixels();\n // Get the current pixel density.\n let d = pixelDensity();\n\n // Calculate the pixel that is halfway through the image's pixel array.\n let halfImage = 4 * (d * img.width) * (d * img.height / 2);\n\n // Set half of the image's pixels to black.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":153,"description":"

            Saves the current canvas as an image.

            \n

            By default, saveCanvas() saves the canvas as a PNG image called\nuntitled.png.

            \n

            The first parameter, filename, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\nsaveCanvas('drawing.png'), then the image will be saved using that\nformat.

            \n

            The second parameter, extension, is also optional. It sets the files format.\nEither 'png' or 'jpg' can be used. For example, saveCanvas('drawing', 'jpg')\nsaves the canvas to a file called drawing.jpg.

            \n

            Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.

            \n","itemtype":"method","name":"saveCanvas","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas();\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas.jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas', 'jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas(cnv);\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas.jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas', 'jpg');\n\n describe('A white square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image","overloads":[{"line":153,"params":[{"name":"selectedCanvas","description":"

            reference to a\n specific HTML5 canvas element.

            \n","type":"p5.Framebuffer|p5.Element|HTMLCanvasElement"},{"name":"filename","description":"

            file name. Defaults to 'untitled'.

            \n","type":"String","optional":true},{"name":"extension","description":"

            file extension, either 'jpg' or 'png'. Defaults to 'png'.

            \n","type":"String","optional":true}]},{"line":267,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":558,"description":"

            Captures a sequence of frames from the canvas that can be saved as images.

            \n

            saveFrames() creates an array of frame objects. Each frame is stored as\nan object with its file type, file name, and image data as a string. For\nexample, the first saved frame might have the following properties:

            \n

            { ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }.

            \n

            The first parameter, filename, sets the prefix for the file names. For\nexample, setting the prefix to 'frame' would generate the image files\nframe0.png, frame1.png, and so on.

            \n

            The second parameter, extension, sets the file type to either 'png' or\n'jpg'.

            \n

            The third parameter, duration, sets the duration to record in seconds.\nThe maximum duration is 15 seconds.

            \n

            The fourth parameter, framerate, sets the number of frames to record per\nsecond. The maximum frame rate value is 22. Limits are placed on duration\nand framerate to avoid using too much memory. Recording large canvases\ncan easily crash sketches or even web browsers.

            \n

            The fifth parameter, callback, is optional. If a function is passed,\nimage files won't be saved by default. The callback function can be used\nto process an array containing the data for each captured frame. The array\nof image data contains a sequence of objects with three properties for each\nframe: imageData, filename, and extension.

            \n

            Note: Frames are downloaded as individual image files by default.

            \n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"

            prefix of file name.

            \n","type":"String"},{"name":"extension","description":"

            file extension, either 'jpg' or 'png'.

            \n","type":"String"},{"name":"duration","description":"

            duration in seconds to record. This parameter will be constrained to be less or equal to 15.

            \n","type":"Number"},{"name":"framerate","description":"

            number of frames to save per second. This parameter will be constrained to be less or equal to 22.

            \n","type":"Number"},{"name":"callback","description":"

            callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData, filename, and extension.

            \n","type":"Function(Array)","optional":true}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Save the frames when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveFrames('frame', 'png', 1, 5);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Print 5 frames when the user presses the mouse.\nfunction mousePressed() {\n saveFrames('frame', 'png', 1, 5, printFrames);\n}\n\n// Prints an array of objects containing raw image data, filenames, and extensions.\nfunction printFrames(frames) {\n for (let frame of frames) {\n print(frame);\n }\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"

            Loads an image to create a p5.Image object.

            \n

            loadImage() interprets the first parameter one of three ways. If the path\nto an image file is provided, loadImage() will load it. Paths to local\nfiles should be relative, such as 'assets/thundercat.jpg'. URLs such as\n'https://example.com/thundercat.jpg' may be blocked due to browser\nsecurity. Raw image data can also be passed as a base64 encoded image in\nthe form 'data:image/png;base64,arandomsequenceofcharacters'.

            \n

            The second parameter is optional. If a function is passed, it will be\ncalled once the image has loaded. The callback function can optionally use\nthe new p5.Image object.

            \n

            The third parameter is also optional. If a function is passed, it will be\ncalled if the image fails to load. The callback function can optionally use\nthe event error.

            \n

            Images can take time to load. Calling loadImage() in\npreload() ensures images load before they're\nused in setup() or draw().

            \n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"

            path of the image to be loaded or base64 encoded image.

            \n","type":"String"},{"name":"successCallback","description":"

            function called with\n p5.Image once it\n loads.

            \n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"

            function called with event\n error if the image fails to load.

            \n","type":"Function(Event)","optional":true}],"return":{"description":"the p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Call handleImage() once the image loads.\n loadImage('assets/laDefense.jpg', handleImage);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Call handleImage() once the image loads or\n // call handleError() if an error occurs.\n loadImage('assets/laDefense.jpg', handleImage, handleError);\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Log the error.\nfunction handleError(event) {\n console.error('Oops!', event);\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":204,"description":"

            Generates a gif from a sketch and saves it to a file.

            \n

            saveGif() may be called in setup() or at any\npoint while a sketch is running.

            \n

            The first parameter, fileName, sets the gif's file name.

            \n

            The second parameter, duration, sets the gif's duration in seconds.

            \n

            The third parameter, options, is optional. If an object is passed,\nsaveGif() will use its properties to customize the gif. saveGif()\nrecognizes the properties delay, units, silent,\nnotificationDuration, and notificationID.

            \n","itemtype":"method","name":"saveGif","params":[{"name":"filename","description":"

            file name of gif.

            \n","type":"String"},{"name":"duration","description":"

            duration in seconds to capture from the sketch.

            \n","type":"Number"},{"name":"options","description":"

            an object that can contain five more properties:\n delay, a Number specifying how much time to wait before recording;\n units, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;\n silent, a Boolean that defines presence of progress notifications. By default it’s false;\n notificationDuration, a Number that defines how long in seconds the final notification\n will live. By default it's 0, meaning the notification will never be removed;\n notificationID, a String that specifies the id of the notification's DOM element. By default it’s 'progressBar’.

            \n","type":"Object","optional":true}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\n// Wait 1 second after the key press before recording.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5, { delay: 1 });\n }\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":639,"description":"

            Helper function for loading GIF-based images

            \n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":888,"description":"

            Draws an image to the canvas.

            \n

            The first parameter, img, is the source image to be drawn. img can be\nany of the following objects:

            \n\n

            The second and third parameters, dx and dy, set the coordinates of the\ndestination image's top left corner. See\nimageMode() for other ways to position images.

            \n

            Here's a diagram that explains how optional parameters work in image():

            \n

            \n

            The fourth and fifth parameters, dw and dh, are optional. They set the\nthe width and height to draw the destination image. By default, image()\ndraws the full source image at its original size.

            \n

            The sixth and seventh parameters, sx and sy, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.

            \n

            The eighth and ninth parameters, sw and sh, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, image() draws the full subsection that begins at\n(sx, sy) and extends to the edges of the source image.

            \n

            The ninth parameter, fit, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\nCONTAIN is passed, the full subsection will appear within the destination\nrectangle. If COVER is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.

            \n

            The tenth and eleventh paremeters, xAlign and yAlign, are also\noptional. They determine how to align the fitted subsection. xAlign can\nbe set to either LEFT, RIGHT, or CENTER. yAlign can be set to\neither TOP, BOTTOM, or CENTER. By default, both xAlign and yAlign\nare set to CENTER.

            \n","itemtype":"method","name":"image","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 10, 10);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image 50x50.\n image(img, 0, 0, 50, 50);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the center of the image.\n image(img, 25, 25, 50, 50, 25, 25, 50, 50);\n\n describe('An image of a gridded ceiling drawn in the center of a dark gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/moonwalk.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to fit within the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);\n\n describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n // Image is 50 x 50 pixels.\n img = loadImage('assets/laDefense50.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to cover the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);\n\n describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":888,"params":[{"name":"img","description":"

            image to display.

            \n","type":"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"},{"name":"x","description":"

            x-coordinate of the top-left corner of the image.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the top-left corner of the image.

            \n","type":"Number"},{"name":"width","description":"

            width to draw the image.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height to draw the image.

            \n","type":"Number","optional":true}]},{"line":1074,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"},{"name":"dx","description":"

            the x-coordinate of the destination\n rectangle in which to draw the source image

            \n","type":"Number"},{"name":"dy","description":"

            the y-coordinate of the destination\n rectangle in which to draw the source image

            \n","type":"Number"},{"name":"dWidth","description":"

            the width of the destination rectangle

            \n","type":"Number"},{"name":"dHeight","description":"

            the height of the destination rectangle

            \n","type":"Number"},{"name":"sx","description":"

            the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle

            \n","type":"Number"},{"name":"sy","description":"

            the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle

            \n","type":"Number"},{"name":"sWidth","description":"

            the width of the subsection of the\n source image to draw into the destination\n rectangle

            \n","type":"Number","optional":true},{"name":"sHeight","description":"

            the height of the subsection of the\n source image to draw into the destination rectangle

            \n","type":"Number","optional":true},{"name":"fit","description":"

            either CONTAIN or COVER

            \n","type":"Constant","optional":true},{"name":"xAlign","description":"

            either LEFT, RIGHT or CENTER default is CENTER

            \n","type":"Constant","optional":true},{"name":"yAlign","description":"

            either TOP, BOTTOM or CENTER default is CENTER

            \n","type":"Constant","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":1192,"description":"

            Tints images using a color.

            \n

            The version of tint() with one parameter interprets it one of four ways.\nIf the parameter is a number, it's interpreted as a grayscale value. If the\nparameter is a string, it's interpreted as a CSS color string. An array of\n[R, G, B, A] values or a p5.Color object can\nalso be used to set the tint color.

            \n

            The version of tint() with two parameters uses the first one as a\ngrayscale value and the second as an alpha value. For example, calling\ntint(255, 128) will make an image 50% transparent.

            \n

            The version of tint() with three parameters interprets them as RGB or\nHSB values, depending on the current\ncolorMode(). The optional fourth parameter\nsets the alpha value. For example, tint(255, 0, 0, 100) will give images\na red tint and make them transparent.

            \n","itemtype":"method","name":"tint","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with a CSS color string.\n tint('red');\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with RGB values.\n tint(255, 0, 0);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with RGBA values.\n tint(255, 0, 0, 100);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with grayscale and alpha values.\n tint(255, 180);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":1192,"params":[{"name":"v1","description":"

            red or hue value.

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value.

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness.

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":1318,"params":[{"name":"value","description":"

            CSS color string.

            \n","type":"String"}]},{"line":1323,"params":[{"name":"gray","description":"

            grayscale value.

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":1329,"params":[{"name":"values","description":"

            array containing the red, green, blue &\n alpha components of the color.

            \n","type":"Number[]"}]},{"line":1335,"params":[{"name":"color","description":"

            the tint color

            \n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":1345,"description":"

            Removes the current tint set by tint().

            \n

            noTint() restores images to their original colors.

            \n","itemtype":"method","name":"noTint","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n // Tint with a CSS color string.\n tint('red');\n image(img, 0, 0);\n\n // Right.\n // Remove the tint.\n noTint();\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":1395,"description":"

            Changes the location from which images are drawn when\nimage() is called.

            \n

            By default, the first\ntwo parameters of image() are the x- and\ny-coordinates of the image's upper-left corner. The next parameters are\nits width and height. This is the same as calling imageMode(CORNER).

            \n

            imageMode(CORNERS) also uses the first two parameters of\nimage() as the x- and y-coordinates of the image's\ntop-left corner. The third and fourth parameters are the coordinates of its\nbottom-right corner.

            \n

            imageMode(CENTER) uses the first two parameters of\nimage() as the x- and y-coordinates of the image's\ncenter. The next parameters are its width and height.

            \n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"

            either CORNER, CORNERS, or CENTER.

            \n","type":"Constant"}],"example":["\n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNER mode.\n imageMode(CORNER);\n\n // Display the image.\n image(img, 10, 10, 50, 50);\n\n describe('A square image of a brick wall is drawn at the top left of a gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNERS mode.\n imageMode(CORNERS);\n\n // Display the image.\n image(img, 10, 10, 90, 40);\n\n describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CENTER mode.\n imageMode(CENTER);\n\n // Display the image.\n image(img, 50, 50, 80, 80);\n\n describe('A square image of a brick wall is drawn on a gray square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"

            This module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":114,"description":"

            The image's width in pixels.

            \n","type":"{Number}","itemtype":"property","name":"width","readonly":"","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":151,"description":"

            The image's height in pixels.

            \n","type":"{Number}","itemtype":"property","name":"height","readonly":"","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":198,"description":"

            An array containing the color of each pixel in the image.

            \n

            Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. img.pixels is a one-dimensional array for performance\nreasons.

            \n

            Each pixel occupies four elements in the pixels array, one for each\nRGBA value. For example, the pixel at coordinates (0, 0) stores its\nRGBA values at img.pixels[0], img.pixels[1], img.pixels[2],\nand img.pixels[3], respectively. The next pixel at coordinates (1, 0)\nstores its RGBA values at img.pixels[4], img.pixels[5],\nimg.pixels[6], and img.pixels[7]. And so on. The img.pixels array\nfor a 100×100 p5.Image object has\n100 × 100 × 4 = 40,000 elements.

            \n

            Accessing the RGBA values for a pixel in the image requires a little\nmath as shown in the examples below. The\nimg.loadPixels()\nmethod must be called before accessing the img.pixels array. The\nimg.updatePixels() method must be\ncalled after any changes are made.

            \n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to red.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 255;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A red square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":299,"description":"

            Gets or sets the pixel density for high pixel density displays.

            \n

            By default, the density will be set to 1.

            \n

            Call this method with no arguments to get the default density, or pass\nin a number to set the density. If a non-positive number is provided,\nit defaults to 1.

            \n","itemtype":"method","name":"pixelDensity","params":[{"name":"density","description":"

            A scaling factor for the number of pixels per\nside

            \n","type":"Number","optional":true}],"return":{"description":"The current density if called without arguments, or the instance for chaining if setting density.","type":"Number"},"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":342,"description":"

            Helper function for animating GIF-based images with time

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":373,"description":"

            Helper fxn for sharing pixel methods

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":381,"description":"

            Loads the current value of each pixel in the image into the img.pixels\narray.

            \n

            img.loadPixels() must be called before reading or modifying pixel\nvalues.

            \n","itemtype":"method","name":"loadPixels","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":462,"description":"

            Updates the canvas with the RGBA values in the\nimg.pixels array.

            \n

            img.updatePixels() only needs to be called after changing values in\nthe img.pixels array. Such changes can be\nmade directly after calling\nimg.loadPixels() or by calling\nimg.set().

            \n

            The optional parameters x, y, width, and height define a\nsubsection of the image to update. Doing so can improve performance in\nsome cases.

            \n

            If the image was loaded from a GIF, then calling img.updatePixels()\nwill update the pixels in current frame.

            \n","itemtype":"method","name":"updatePixels","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":462,"params":[{"name":"x","description":"

            x-coordinate of the upper-left corner\n of the subsection to update.

            \n","type":"Integer"},{"name":"y","description":"

            y-coordinate of the upper-left corner\n of the subsection to update.

            \n","type":"Integer"},{"name":"w","description":"

            width of the subsection to update.

            \n","type":"Integer"},{"name":"h","description":"

            height of the subsection to update.

            \n","type":"Integer"}]},{"line":555,"params":[]}]},{"file":"src/image/p5.Image.js","line":563,"description":"

            Gets a pixel or a region of pixels from the image.

            \n

            img.get() is easy to use but it's not as fast as\nimg.pixels. Use\nimg.pixels to read many pixel values.

            \n

            The version of img.get() with no parameters returns the entire image.

            \n

            The version of img.get() with two parameters, as in img.get(10, 20),\ninterprets them as coordinates. It returns an array with the\n[R, G, B, A] values of the pixel at the given point.

            \n

            The version of img.get() with four parameters, as in\nimg,get(10, 20, 50, 90), interprets them as\ncoordinates and dimensions. The first two parameters are the coordinates\nof the upper-left corner of the subsection. The last two parameters are\nthe width and height of the subsection. It returns a subsection of the\ncanvas in a new p5.Image object.

            \n

            Use img.get() instead of get() to work directly\nwith images.

            \n","itemtype":"method","name":"get","return":{"description":"subsection as a p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":563,"params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"w","description":"

            width of the subsection to be returned.

            \n","type":"Number"},{"name":"h","description":"

            height of the subsection to be returned.

            \n","type":"Number"}],"return":{"description":"subsection as a p5.Image object.","type":"p5.Image"}},{"line":678,"params":[],"return":{"description":"whole p5.Image","type":"p5.Image"}},{"line":682,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of the pixel at (x, y) in array format `[R, G, B, A]`.","type":"Number[]"}}]},{"file":"src/image/p5.Image.js","line":697,"description":"

            Sets the color of one or more pixels within an image.

            \n

            img.set() is easy to use but it's not as fast as\nimg.pixels. Use\nimg.pixels to set many pixel values.

            \n

            img.set() interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a [R, G, B, A] pixel\narray, a p5.Color object, or another\np5.Image object.

            \n

            img.updatePixels() must be called\nafter using img.set() for changes to appear.

            \n","itemtype":"method","name":"set","params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"a","description":"

            grayscale value | pixel array |\n p5.Color object |\n p5.Image to copy.

            \n","type":"Number|Number[]|Object"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":837,"description":"

            Resizes the image to a given width and height.

            \n

            The image's original aspect ratio can be kept by passing 0 for either\nwidth or height. For example, calling img.resize(50, 0) on an image\nthat was 500 × 300 pixels will resize it to 50 × 30 pixels.

            \n","itemtype":"method","name":"resize","params":[{"name":"width","description":"

            resized image width.

            \n","type":"Number"},{"name":"height","description":"

            resized image height.

            \n","type":"Number"}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1006,"description":"

            Copies pixels from a source image to this image.

            \n

            The first parameter, srcImage, is an optional\np5.Image object to copy. If a source image isn't\npassed, then img.copy() can copy a region of this image to another\nregion.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto copy from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the region's width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof this image to copy into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the region's width and height.

            \n

            Calling img.copy() will scale pixels from the source region if it isn't\nthe same size as the destination region.

            \n","itemtype":"method","name":"copy","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":1006,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image|p5.Element"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"}]},{"line":1094,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"}]}]},{"file":"src/image/p5.Image.js","line":1109,"description":"

            Masks part of the image with another.

            \n

            img.mask() uses another p5.Image object's\nalpha channel as the alpha channel for this image. Masks are cumulative\nand can't be removed once applied.

            \n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image"}],"example":["\n
            \n\nlet photo;\nlet maskImage;\n\n// Load the images.\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1197,"description":"

            Applies an image filter to the image.

            \n

            The preset options are:

            \n

            INVERT\nInverts the colors in the image. No parameter is used.

            \n

            GRAY\nConverts the image to grayscale. No parameter is used.

            \n

            THRESHOLD\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.

            \n

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

            \n

            POSTERIZE\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.

            \n

            BLUR\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin P2D mode. A box blur is used in WEBGL mode.

            \n

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

            \n

            DILATE\nIncreases the light areas. No parameter is used.

            \n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"

            either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, ERODE, DILATE or BLUR.

            \n","type":"Constant"},{"name":"filterParam","description":"

            parameter unique to each filter.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1428,"description":"

            Copies a region of pixels from another image into this one.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto blend from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the regions width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to blend into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the regions width and height.

            \n

            The tenth parameter, blendMode, sets the effect used to blend the images'\ncolors. The options are BLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD, or NORMAL.

            \n","itemtype":"method","name":"blend","example":["\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":1428,"params":[{"name":"srcImage","description":"

            source image

            \n","type":"p5.Image"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"},{"name":"blendMode","description":"

            the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.

            \n

            Available blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity

            \n

            http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/

            \n","type":"Constant"}]},{"line":1554,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"},{"name":"blendMode","description":"","type":"Constant"}]}]},{"file":"src/image/p5.Image.js","line":1598,"description":"

            Saves the image to a file.

            \n

            By default, img.save() saves the image as a PNG image called\nuntitled.png.

            \n

            The first parameter, filename, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\nimg.save('drawing.png'), then the image will be saved using that\nformat.

            \n

            The second parameter, extension, is also optional. It sets the files format.\nEither 'png' or 'jpg' can be used. For example, img.save('drawing', 'jpg')\nsaves the canvas to a file called drawing.jpg.

            \n

            Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.

            \n

            The image will only be downloaded as an animated GIF if it was loaded\nfrom a GIF file. See saveGif() to create new\nGIFs.

            \n","itemtype":"method","name":"save","params":[{"name":"filename","description":"

            filename. Defaults to 'untitled'.

            \n","type":"String"},{"name":"extension","description":"

            file extension, either 'png' or 'jpg'.\n Defaults to 'png'.

            \n","type":"String","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1666,"description":"

            Restarts an animated GIF at its first frame.

            \n","itemtype":"method","name":"reset","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1714,"description":"

            Gets the index of the current frame in an animated GIF.

            \n","itemtype":"method","name":"getCurrentFrame","return":{"description":"index of the GIF's current frame.","type":"Number"},"example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1756,"description":"

            Sets the current frame in an animated GIF.

            \n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"

            index of the frame to display.

            \n","type":"Number"}],"example":["\n
            \n\nlet gif;\nlet frameSlider;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1816,"description":"

            Returns the number of frames in an animated GIF.

            \n","itemtype":"method","name":"numFrames","return":{"description":"number of frames in the GIF.","type":"Number"},"example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1856,"description":"

            Plays an animated GIF that was paused with\nimg.pause().

            \n","itemtype":"method","name":"play","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1901,"description":"

            Pauses an animated GIF.

            \n

            The GIF can be resumed by calling\nimg.play().

            \n","itemtype":"method","name":"pause","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1950,"description":"

            Changes the delay between frames in an animated GIF.

            \n

            The first parameter, delay, is the length of the delay in milliseconds.

            \n

            The second parameter, index, is optional. If provided, only the frame\nat index will have its delay modified. All other frames will keep\ntheir default delay.

            \n","itemtype":"method","name":"delay","params":[{"name":"d","description":"

            delay in milliseconds between switching frames.

            \n","type":"Number"},{"name":"index","description":"

            index of the frame that will have its delay modified.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet gifFast;\nlet gifSlow;\n\n// Load the images.\nfunction preload() {\n gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n\n
            \n\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"

            An array containing the color of each pixel on the canvas.

            \n

            Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. pixels is a one-dimensional array for performance reasons.

            \n

            Each pixel occupies four elements in the pixels array, one for each RGBA\nvalue. For example, the pixel at coordinates (0, 0) stores its RGBA values\nat pixels[0], pixels[1], pixels[2], and pixels[3], respectively.\nThe next pixel at coordinates (1, 0) stores its RGBA values at pixels[4],\npixels[5], pixels[6], and pixels[7]. And so on. The pixels array\nfor a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.

            \n

            Some displays use several smaller pixels to set the color at a single\npoint. The pixelDensity() function returns\nthe pixel density of the canvas. High density displays often have a\npixelDensity() of 2. On such a display, the\npixels array for a 100×100 canvas has 200 × 200 × 4 =\n160,000 elements.

            \n

            Accessing the RGBA values for a point on the canvas requires a little math\nas shown below. The loadPixels() function\nmust be called before accessing the pixels array. The\nupdatePixels() function must be called\nafter any changes are made.

            \n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Set the dot's coordinates.\n let x = 50;\n let y = 50;\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Set the pixel(s) at the center of the canvas black.\n for (let i = 0; i < d; i += 1) {\n for (let j = 0; j < d; j += 1) {\n let index = 4 * ((y * d + j) * width * d + (x * d + i));\n // Red.\n pixels[index] = 0;\n // Green.\n pixels[index + 1] = 0;\n // Blue.\n pixels[index + 2] = 0;\n // Alpha.\n pixels[index + 3] = 255;\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A black dot in the middle of a gray rectangle.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n pixels[i] = 255;\n // Green.\n pixels[i + 1] = 0;\n // Blue.\n pixels[i + 2] = 0;\n // Alpha.\n pixels[i + 3] = 255;\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A red rectangle drawn above a gray rectangle.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let pink = color(255, 102, 204);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n pixels[i] = red(pink);\n pixels[i + 1] = green(pink);\n pixels[i + 2] = blue(pink);\n pixels[i + 3] = alpha(pink);\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A pink rectangle drawn above a gray rectangle.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":148,"description":"

            Copies a region of pixels from one image to another.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto blend from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the regions width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to blend into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the regions width and height.

            \n

            The tenth parameter, blendMode, sets the effect used to blend the images'\ncolors. The options are BLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD, or NORMAL

            \n","itemtype":"method","name":"blend","example":["\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks faded into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n\n
            \n\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks partially transparent.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n\n
            \n\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks washed out into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":148,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"},{"name":"blendMode","description":"

            the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.

            \n","type":"Constant"}]},{"line":267,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"},{"name":"blendMode","description":"","type":"Constant"}]}]},{"file":"src/image/pixels.js","line":288,"description":"

            Copies pixels from a source image to a region of the canvas.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend. The source image can be\nthe canvas itself or a\np5.Image object. copy() will scale pixels from\nthe source region if it isn't the same size as the destination region.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto copy from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the region's width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to copy into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the region's width and height.

            \n","itemtype":"method","name":"copy","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img);\n\n // Copy a region of pixels to another spot.\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":288,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image|p5.Element"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"}]},{"line":345,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"}]}]},{"file":"src/image/pixels.js","line":442,"description":"

            Applies an image filter to the canvas.

            \n

            The preset options are:

            \n

            INVERT\nInverts the colors in the image. No parameter is used.

            \n

            GRAY\nConverts the image to grayscale. No parameter is used.

            \n

            THRESHOLD\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.

            \n

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

            \n

            POSTERIZE\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.

            \n

            BLUR\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin P2D mode. A box blur is used in WEBGL mode.

            \n

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

            \n

            DILATE\nIncreases the light areas. No parameter is used.

            \n

            filter() uses WebGL in the background by default because it's faster.\nThis can be disabled in P2D mode by adding a false argument, as in\nfilter(BLUR, false). This may be useful to keep computation off the GPU\nor to work around a lack of WebGL support.

            \n

            In WebgL mode, filter() can also use custom shaders. See\ncreateFilterShader() for more\ninformation.

            \n","itemtype":"method","name":"filter","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the INVERT filter.\n filter(INVERT);\n\n describe('A blue brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the GRAY filter.\n filter(GRAY);\n\n describe('A brick wall drawn in grayscale.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the THRESHOLD filter.\n filter(THRESHOLD);\n\n describe('A brick wall drawn in black and white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the OPAQUE filter.\n filter(OPAQUE);\n\n describe('A red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the POSTERIZE filter.\n filter(POSTERIZE, 3);\n\n describe('An image of a red brick wall drawn with limited color palette.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n filter(BLUR, 3);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the DILATE filter.\n filter(DILATE);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the ERODE filter.\n filter(ERODE);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n // Don't use WebGL.\n filter(BLUR, 3, false);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":442,"params":[{"name":"filterType","description":"

            either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.

            \n","type":"Constant"},{"name":"filterParam","description":"

            parameter unique to each filter.

            \n","type":"Number","optional":true},{"name":"useWebGL","description":"

            flag to control whether to use fast\n WebGL filters (GPU) or original image\n filters (CPU); defaults to true.

            \n","type":"Boolean","optional":true}]},{"line":715,"params":[{"name":"filterType","description":"","type":"Constant"},{"name":"useWebGL","description":"","type":"Boolean","optional":true}]},{"line":720,"params":[{"name":"shaderFilter","description":"

            shader that's been loaded, with the\n frag shader using a tex0 uniform.

            \n","type":"p5.Shader"}]}]},{"file":"src/image/pixels.js","line":820,"description":"

            Gets a pixel or a region of pixels from the canvas.

            \n

            get() is easy to use but it's not as fast as\npixels. Use pixels\nto read many pixel values.

            \n

            The version of get() with no parameters returns the entire canvas.

            \n

            The version of get() with two parameters interprets them as\ncoordinates. It returns an array with the [R, G, B, A] values of the\npixel at the given point.

            \n

            The version of get() with four parameters interprets them as coordinates\nand dimensions. It returns a subsection of the canvas as a\np5.Image object. The first two parameters are the\ncoordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.

            \n

            Use p5.Image.get() to work directly with\np5.Image objects.

            \n","itemtype":"method","name":"get","return":{"description":"subsection as a p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the entire canvas.\n let c = get();\n\n // Display half the canvas.\n image(c, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the color of a pixel.\n let c = get(50, 90);\n\n // Style the square with the pixel's color.\n fill(c);\n noStroke();\n\n // Display the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a region of the image.\n let c = get(0, 0, 50, 50);\n\n // Display the region.\n image(c, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":820,"params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"w","description":"

            width of the subsection to be returned.

            \n","type":"Number"},{"name":"h","description":"

            height of the subsection to be returned.

            \n","type":"Number"}],"return":{"description":"subsection as a p5.Image object.","type":"p5.Image"}},{"line":931,"params":[],"return":{"description":"whole canvas as a p5.Image.","type":"p5.Image"}},{"line":935,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of the pixel at (x, y) in array format `[R, G, B, A]`.","type":"Number[]"}}]},{"file":"src/image/pixels.js","line":946,"description":"

            Loads the current value of each pixel on the canvas into the\npixels array.

            \n

            loadPixels() must be called before reading from or writing to\npixels.

            \n","itemtype":"method","name":"loadPixels","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":997,"description":"

            Sets the color of a pixel or draws an image to the canvas.

            \n

            set() is easy to use but it's not as fast as\npixels. Use pixels\nto set many pixel values.

            \n

            set() interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a [R, G, B, A] pixel\narray, a p5.Color object, or a\np5.Image object. If an image is passed, the first\ntwo parameters set the coordinates for the image's upper-left corner,\nregardless of the current imageMode().

            \n

            updatePixels() must be called after using\nset() for changes to appear.

            \n","itemtype":"method","name":"set","params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"c","description":"

            grayscale value | pixel array |\n p5.Color object | p5.Image to copy.

            \n","type":"Number|Number[]|Object"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set four pixels to black.\n set(30, 20, 0);\n set(85, 20, 0);\n set(85, 75, 0);\n set(30, 75, 0);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n set(30, 20, black);\n set(85, 20, black);\n set(85, 75, black);\n set(30, 75, black);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Draw a horizontal color gradient.\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n // Calculate the grayscale value.\n let c = map(x, 0, 100, 0, 255);\n\n // Set the pixel using the grayscale value.\n set(x, y, c);\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A horiztonal color gradient from black to white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the image to set all pixels.\n set(0, 0, img);\n\n // Update the canvas.\n updatePixels();\n\n describe('An image of a mountain landscape.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":1118,"description":"

            Updates the canvas with the RGBA values in the\npixels array.

            \n

            updatePixels() only needs to be called after changing values in the\npixels array. Such changes can be made directly\nafter calling loadPixels() or by calling\nset().

            \n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"

            x-coordinate of the upper-left corner of region\n to update.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y-coordinate of the upper-left corner of region\n to update.

            \n","type":"Number","optional":true},{"name":"w","description":"

            width of region to update.

            \n","type":"Number","optional":true},{"name":"h","description":"

            height of region to update.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":17,"description":"

            Loads a JSON file from a file or a URL, and returns an Object.\nNote that even if the JSON file contains an Array, an Object will be\nreturned with index numbers as keys.

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. JSONP is supported via a polyfill and you\ncan pass in as the second argument an object with definitions of the json\ncallback following the syntax specified here.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling loadJSON() inside preload() guarantees to complete the\noperation before setup() and draw() are called.\n\n
            \n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n 'summary/all_day.geojson';\n earthquakes = loadJSON(url);\n}\n\nfunction setup() {\n noLoop();\n}\n\nfunction draw() {\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n describe(`50×50 ellipse that changes from black to white\n depending on the current humidity`);\n}\n
            \n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n
            \nfunction setup() {\n noLoop();\n let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n 'summary/all_day.geojson';\n loadJSON(url, drawEarthquake);\n}\n\nfunction draw() {\n background(200);\n describe(`50×50 ellipse that changes from black to white\n depending on the current humidity`);\n}\n\nfunction drawEarthquake(earthquakes) {\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":17,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"jsonpOptions","description":"

            options object for jsonp related settings

            \n","type":"Object","optional":true},{"name":"datatype","description":"

            \"json\" or \"jsonp\"

            \n","type":"String","optional":true},{"name":"callback","description":"

            function to be executed after\n loadJSON() completes, data is passed\n in as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":101,"params":[{"name":"path","description":"","type":"String"},{"name":"datatype","description":"","type":"String"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Object|Array"}},{"line":109,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Object|Array"}}]},{"file":"src/io/files.js","line":180,"description":"

            Reads the contents of a file and creates a String array of its individual\nlines. If the name of the file is used as the parameter, as in the above\nexample, the file must be located in the sketch directory/folder.

            \n

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

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadStrings()\n completes, Array is passed in as first\n argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside preload() guarantees to complete the\noperation before setup() and draw() are called.\n\n
            \nlet result;\nfunction preload() {\n result = loadStrings('assets/test.txt');\n}\n\nfunction setup() {\n background(200);\n text(random(result), 10, 10, 80, 80);\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n
            \n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n
            \nfunction setup() {\n loadStrings('assets/test.txt', pickString);\n describe(`randomly generated text from a file,\n for example \"i have three feet\"`);\n}\n\nfunction pickString(result) {\n background(200);\n text(random(result), 10, 10, 80, 80);\n}\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":300,"description":"

            Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\nOutside of preload(), you may supply a callback function to handle the\nobject:

            \n

            All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"extension","description":"

            parse the table by comma-separated values \"csv\", semicolon-separated\n values \"ssv\", or tab-separated values \"tsv\"

            \n","type":"String","optional":true},{"name":"header","description":"

            \"header\" to indicate table has header row

            \n","type":"String","optional":true},{"name":"callback","description":"

            function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"Table object containing data","type":"Object"},"example":["\n
            \n\n// Given the following CSV file called \"mammals.csv\"\n// located in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n //the file can be remote\n //table = loadTable(\"http://p5js.org/reference/assets/mammals.csv\",\n // \"csv\", \"header\");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n\n print(table.getColumn('name'));\n //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n //cycle through the table\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":575,"description":"

            Reads the contents of a file and creates an XML object with its values.\nIf the name of the file is used as the parameter, as in the above example,\nthe file must be located in the sketch directory/folder.

            \n

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

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadXML() inside preload()\nguarantees to complete the operation before setup() and draw() are called.

            \n

            Outside of preload(), you may supply a callback function to handle the\nobject.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadXML()\n completes, XML object is passed in as\n first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum('id');\n let coloring = children[i].getString('species');\n let name = children[i].getContent();\n print(id + ', ' + coloring + ', ' + name);\n }\n describe('no image displayed');\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":683,"description":"

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadBytes()\n completes

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if there\n is an error

            \n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n
            \nlet data;\n\nfunction preload() {\n data = loadBytes('assets/mammals.xml');\n}\n\nfunction setup() {\n for (let i = 0; i < 5; i++) {\n console.log(data.bytes[i].toString(16));\n }\n describe('no image displayed');\n}\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":740,"description":"

            Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'GET'). The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).

            \n","itemtype":"method","name":"httpGet","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n httpGet(url, 'jsonp', false, function(response) {\n // when the HTTP request completes, populate the variable that holds the\n // earthquake data used in the visualization.\n earthquakes = response;\n });\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":740,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n \"xml\", or \"text\"

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object|Boolean","optional":true},{"name":"callback","description":"

            function to be executed after\n httpGet() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":794,"params":[{"name":"path","description":"","type":"String"},{"name":"data","description":"","type":"Object|Boolean"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}},{"line":802,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":816,"description":"

            Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'POST').

            \n","itemtype":"method","name":"httpPost","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n text(result.body, mouseX, mouseY);\n });\n}\n\n
            \n\n
            \nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":816,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"xml\", or \"text\".\n If omitted, httpPost() will guess.

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object|Boolean","optional":true},{"name":"callback","description":"

            function to be executed after\n httpPost() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":883,"params":[{"name":"path","description":"","type":"String"},{"name":"data","description":"","type":"Object|Boolean"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}},{"line":891,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":905,"description":"

            Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.

            \nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\nThis method is suitable for fetching files up to size of 64MB when \"GET\" is used.

            \n","itemtype":"method","name":"httpDo","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction preload() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":905,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"method","description":"

            either \"GET\", \"POST\", or \"PUT\",\n defaults to \"GET\"

            \n","type":"String","optional":true},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"xml\", or \"text\"

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object","optional":true},{"name":"callback","description":"

            function to be executed after\n httpGet() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":976,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"

            Request object options as documented in the\n \"fetch\" API\nreference

            \n","type":"Object"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":1141,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"

            name of the file to be created

            \n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n const writer = createWriter('squares.txt');\n for (let i = 0; i < 10; i++) {\n writer.print(i * i);\n }\n writer.close();\n writer.clear();\n }\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1196,"description":"

            Writes data to the PrintWriter stream

            \n","itemtype":"method","name":"write","params":[{"name":"data","description":"

            all data to be written by the PrintWriter

            \n","type":"Array"}],"example":["\n
            \n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// write 'Hello world!'' to the file\nwriter.write(['Hello world!']);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// creates a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write 'apples,bananas,123' to the file\nwriter.write(['apples', 'bananas', 123]);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// creates a file called 'newFile3.txt'\nlet writer = createWriter('newFile3.txt');\n// write 'My name is: Teddy' to the file\nwriter.write('My name is:');\nwriter.write(' Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\nfunction setup() {\n createCanvas(100, 100);\n button = createButton('SAVE FILE');\n button.position(21, 40);\n button.mousePressed(createFile);\n}\n\nfunction createFile() {\n // creates a file called 'newFile.txt'\n let writer = createWriter('newFile.txt');\n // write 'Hello world!'' to the file\n writer.write(['Hello world!']);\n // close the PrintWriter and save the file\n writer.close();\n}\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1255,"description":"

            Writes data to the PrintWriter stream, and adds a new line at the end

            \n","itemtype":"method","name":"print","params":[{"name":"data","description":"

            all data to be printed by the PrintWriter

            \n","type":"Array"}],"example":["\n
            \n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// creates a file containing\n// My name is:\n// Teddy\nwriter.print('My name is:');\nwriter.print('Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\nlet writer;\n\nfunction setup() {\n createCanvas(400, 400);\n // create a PrintWriter\n writer = createWriter('newFile.txt');\n}\n\nfunction draw() {\n writer.print([mouseX, mouseY]);\n}\n\nfunction mouseClicked() {\n writer.close();\n}\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1296,"description":"

            Clears the data already written to the PrintWriter object

            \n","itemtype":"method","name":"clear","example":["\n
            \n// create writer object\nlet writer = createWriter('newFile.txt');\nwriter.write(['clear me']);\n// clear writer object here\nwriter.clear();\n// close writer\nwriter.close();\n
            \n
            \n\nfunction setup() {\n button = createButton('CLEAR ME');\n button.position(21, 40);\n button.mousePressed(createFile);\n}\n\nfunction createFile() {\n let writer = createWriter('newFile.txt');\n writer.write(['clear me']);\n writer.clear();\n writer.close();\n}\n\n
            \n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1330,"description":"

            Closes the PrintWriter

            \n","itemtype":"method","name":"close","example":["\n
            \n\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// create a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write some data to the file\nwriter.write([100, 101, 102]);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1379,"description":"

            Saves a given element(image, text, json, csv, wav, or html) to the client's\ncomputer. The first parameter can be a pointer to element we want to save.\nThe element can be one of p5.Element,an Array of\nStrings, an Array of JSON, a JSON object, a p5.Table\n, a p5.Image, or a p5.SoundFile (requires\np5.sound). The second parameter is a filename (including extension).The\nthird parameter is for options specific to this type of object. This method\nwill save a file that fits the given parameters.\nIf it is called without specifying an element, by default it will save the\nwhole canvas as an image file. You can optionally specify a filename as\nthe first parameter in such a case.\nNote that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.

            \n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"

            If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).

            \n","type":"Object|String","optional":true},{"name":"filename","description":"

            If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).

            \n","type":"String","optional":true},{"name":"options","description":"

            Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.

            \n","type":"Boolean|String","optional":true}],"example":["\n
            \n // Saves the canvas as an image\n cnv = createCanvas(300, 300);\n save(cnv, 'myCanvas.jpg');\n\n // Saves the canvas as an image by default\n save('myCanvas.jpg');\n describe('An example for saving a canvas as an image.');\n
            \n\n
            \n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n describe('An example for saving a p5.Image element as an image.');\n
            \n\n
            \n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n describe('An example for saving a p5.Renderer element.');\n
            \n\n
            \n let myTable = new p5.Table();\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n describe(`An example showing how to save a table in formats of\n HTML, CSV and TSV.`);\n
            \n\n
            \n let myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n describe('An example for saving JSON to a txt file with some extra arguments.');\n
            \n\n
            \n // Saves array of strings to text file with line breaks after each item\n let arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n describe(`An example for saving an array of strings to text file\n with line breaks.`);\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1523,"description":"

            Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"

            If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).

            \n","type":"Boolean","optional":true}],"example":["\n
            \n let json = {}; // new JSON Object\n\n json.id = 0;\n json.species = 'Panthera leo';\n json.name = 'Lion';\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n describe('no image displayed');\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveJSON(json, 'lion.json');\n }\n }\n\n // saves the following to a file called \"lion.json\":\n // {\n // \"id\": 0,\n // \"species\": \"Panthera leo\",\n // \"name\": \"Lion\"\n // }\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1578,"description":"

            Writes an array of Strings to a text file, one line per String.\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"

            string array to be written

            \n","type":"String[]"},{"name":"filename","description":"

            filename for output

            \n","type":"String"},{"name":"extension","description":"

            the filename's extension

            \n","type":"String","optional":true},{"name":"isCRLF","description":"

            if true, change line-break to CRLF

            \n","type":"Boolean","optional":true}],"example":["\n
            \n let words = 'apple bear cat dog';\n\n // .split() outputs an Array\n let list = split(words, ' ');\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n describe('no image displayed');\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveStrings(list, 'nouns.txt');\n }\n }\n\n // Saves the following to a file called 'nouns.txt':\n //\n // apple\n // bear\n // cat\n // dog\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1640,"description":"

            Writes the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"

            the Table object to save to a file

            \n","type":"p5.Table"},{"name":"filename","description":"

            the filename to which the Table should be saved

            \n","type":"String"},{"name":"options","description":"

            can be one of \"tsv\", \"csv\", or \"html\"

            \n","type":"String","optional":true}],"example":["\n
            \n let table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n\n describe('no image displayed');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"

            Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\nhere.\nTo load files, use the loadTable method.\nTo save tables to your computer, use the save method\n or the saveTable method.

            \n

            Possible options include:

            \n
              \n
            • csv - parse the table as comma-separated values\n
            • tsv - parse the table as tab-separated values\n
            • header - this table has a header (title) row\n
            ","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"

            An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.

            \n","type":"{String[]}","itemtype":"property","name":"columns","example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //print the column names\n for (let c = 0; c < table.getColumnCount(); c++) {\n print('column ' + c + ' is named ' + table.columns[c]);\n }\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":80,"description":"

            An array containing the p5.TableRow objects that make up the\nrows of the table. The same result as calling getRows()

            \n","type":"{p5.TableRow[]}","itemtype":"property","name":"rows","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":90,"description":"

            Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().

            \n

            If a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.

            \n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"

            row to be added to the table

            \n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":152,"description":"

            Removes a row from the table object.

            \n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"

            ID number of the row to remove

            \n","type":"Integer"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //remove the first row\n table.removeRow(0);\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":198,"description":"

            Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.

            \n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"

            ID number of the row to get

            \n","type":"Integer"}],"return":{"description":"p5.TableRow object","type":"p5.TableRow"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(row.getString(c));\n }\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":242,"description":"

            Gets all rows from the table. Returns an array of p5.TableRows.

            \n","itemtype":"method","name":"getRows","return":{"description":"Array of p5.TableRows","type":"p5.TableRow[]"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n\n //warning: rows is an array of objects\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":289,"description":"

            Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"

            The value to match

            \n","type":"String"},{"name":"column","description":"

            ID number or title of the\n column to search

            \n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n let row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":351,"description":"

            Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.

            \n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"

            The value to match

            \n","type":"String"},{"name":"column","description":"

            ID number or title of the\n column to search

            \n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n let rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":417,"description":"

            Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.

            \n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"

            The regular expression to match

            \n","type":"String|RegExp"},{"name":"column","description":"

            The column ID (number) or\n title (string)

            \n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //Search using specified regex on a given column, return TableRow object\n let mammal = table.matchRow(new RegExp('ant'), 1);\n print(mammal.getString(1));\n //Output \"Panthera pardus\"\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":475,"description":"

            Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.

            \n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"

            The regular expression to match

            \n","type":"String"},{"name":"column","description":"

            The column ID (number) or\n title (string)

            \n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n
            \n\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n let rows = table.matchRows('R.*', 'type');\n for (let i = 0; i < rows.length; i++) {\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":542,"description":"

            Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.

            \n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"

            String or Number of the column to return

            \n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":592,"description":"

            Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.

            \n","itemtype":"method","name":"clearRows","example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":631,"description":"

            Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)

            \n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"

            title of the given column

            \n","type":"String","optional":true}],"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":680,"description":"

            Returns the total number of columns in a Table.

            \n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n
            \n \n // given the cvs file \"blobs.csv\" in /assets directory\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":716,"description":"

            Returns the total number of rows in a Table.

            \n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n
            \n \n // given the cvs file \"blobs.csv\" in /assets directory\n //\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":752,"description":"

            Removes any of the specified characters (or \"tokens\").

            \n

            If no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.

            \n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"

            String listing characters to be removed

            \n","type":"String"},{"name":"column","description":"

            Column ID (number)\n or name (string)

            \n","type":"String|Integer","optional":true}],"example":["\n
            \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":824,"description":"

            Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.

            \n","itemtype":"method","name":"trim","params":[{"name":"column","description":"

            Column ID (number)\n or name (string)

            \n","type":"String|Integer","optional":true}],"example":["\n
            \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":888,"description":"

            Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.

            \n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"

            columnName (string) or ID (number)

            \n","type":"String|Integer"}],"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":950,"description":"

            Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"set","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"String|Number"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":998,"description":"

            Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"Number"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.setNum(1, 'id', 1);\n\n print(table.getColumn(0));\n //[\"0\", 1, \"2\"]\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1043,"description":"

            Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"setString","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"String"}],"example":["\n
            \n// Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n print(table.getArray());\n\n describe('no image displayed');\n}\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1087,"description":"

            Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"get","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, 'species'));\n //Capra hircus\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1131,"description":"

            Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1173,"description":"

            Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"getString","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getString(0, 0)); // 0\n print(table.getString(0, 1)); // Capra hircus\n print(table.getString(0, 2)); // Goat\n print(table.getString(1, 0)); // 1\n print(table.getString(1, 1)); // Panthera pardus\n print(table.getString(1, 2)); // Leopard\n print(table.getString(2, 0)); // 2\n print(table.getString(2, 1)); // Equus zebra\n print(table.getString(2, 2)); // Zebra\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1223,"description":"

            Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.

            \n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"

            Name of the column which should be used to\n title each row object (optional)

            \n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1285,"description":"

            Retrieves all table data and returns it as a multidimensional array.

            \n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leoperd\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableArray = table.getArray();\n for (let i = 0; i < tableArray.length; i++) {\n print(tableArray[i]);\n }\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":36,"description":"

            Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"set","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored

            \n","type":"String|Number"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":97,"description":"

            Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored\n as a Float

            \n","type":"Number|String"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":140,"description":"

            Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"setString","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored\n as a String

            \n","type":"String|Number|Boolean|Object"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":184,"description":"

            Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"get","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n print(names);\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":231,"description":"

            Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.

            \n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = min(maxId, id);\n }\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":285,"description":"

            Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.

            \n","itemtype":"method","name":"getString","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n print('longest: ' + longest);\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"

            Gets a copy of the element's parent. Returns the parent as another\np5.XML object.

            \n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n let parent = children[1].getParent();\n print(parent.getName());\n}\n\n// Sketch prints:\n// mammals\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"

            Gets the element's full name, which is returned as a String.

            \n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["<animal\n
            \n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n print(xml.getName());\n }\n\n // Sketch prints:\n // mammals\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"

            Sets the element's name, which is specified as a String.

            \n","itemtype":"method","name":"setName","params":[{"name":"the","description":"

            new name of the node

            \n","type":"String"}],"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.getName());\n xml.setName('fish');\n print(xml.getName());\n}\n\n// Sketch prints:\n// mammals\n// fish\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"

            Checks whether or not the element has any children, and returns the result\nas a boolean.

            \n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.hasChildren());\n}\n\n// Sketch prints:\n// true\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"

            Get the names of all of the element's children, and returns the names as an\narray of Strings. This is the same as looping through and calling getName()\non each child element individually.

            \n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.listChildren());\n}\n\n// Sketch prints:\n// [\"animal\", \"animal\", \"animal\"]\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"

            Returns all of the element's children as an array of p5.XML objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.

            \n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"

            element name

            \n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let animals = xml.getChildren('animal');\n\n for (let i = 0; i < animals.length; i++) {\n print(animals[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Leopard\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":308,"description":"

            Returns the first of the element's children that matches the name parameter\nor the child of the given index.It returns undefined if no matching\nchild is found.

            \n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"

            element name or index

            \n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
            \n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let secondChild = xml.getChild(1);\n print(secondChild.getContent());\n}\n\n// Sketch prints:\n// \"Leopard\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":368,"description":"

            Appends a new child to the element. The child can be specified with\neither a String, which will be used as the new tag's name, or as a\nreference to an existing p5.XML object.\nA reference to the newly created child is returned as an p5.XML object.

            \n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"

            a p5.XML Object which will be the child to be added

            \n","type":"p5.XML"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let child = new p5.XML();\n child.setName('animal');\n child.setAttribute('id', '3');\n child.setAttribute('species', 'Ornithorhynchus anatinus');\n child.setContent('Platypus');\n xml.addChild(child);\n\n let animals = xml.getChildren('animal');\n print(animals[animals.length - 1].getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Leopard\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":420,"description":"

            Removes the element specified by name or index.

            \n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"

            element name or index

            \n","type":"String|Integer"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n xml.removeChild('animal');\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Leopard\"\n// \"Zebra\"\n
            \n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n xml.removeChild(1);\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":492,"description":"

            Counts the specified element's number of attributes, returned as an Number.

            \n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getAttributeCount());\n}\n\n// Sketch prints:\n// 2\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":528,"description":"

            Gets all of the specified element's attributes, and returns them as an\narray of Strings.

            \n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.listAttributes());\n}\n\n// Sketch prints:\n// [\"id\", \"species\"]\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":571,"description":"

            Checks whether or not an element has the specified attribute.

            \n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"

            attribute to be checked

            \n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n
            \n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.hasAttribute('species'));\n print(firstChild.hasAttribute('color'));\n }\n\n // Sketch prints:\n // true\n // false\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":616,"description":"

            Returns an attribute value of the element as an Number. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, the value 0 is returned.

            \n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"

            the non-null full name of the attribute

            \n","type":"String"},{"name":"defaultValue","description":"

            the default value of the attribute

            \n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getNum('id'));\n}\n\n// Sketch prints:\n// 0\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":663,"description":"

            Returns an attribute value of the element as an String. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, null is returned.

            \n","itemtype":"method","name":"getString","params":[{"name":"name","description":"

            the non-null full name of the attribute

            \n","type":"String"},{"name":"defaultValue","description":"

            the default value of the attribute

            \n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":710,"description":"

            Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.

            \n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"

            the full name of the attribute

            \n","type":"String"},{"name":"value","description":"

            the value of the attribute

            \n","type":"Number|String|Boolean"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getString('species'));\n firstChild.setAttribute('species', 'Jamides zebra');\n print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n// \"Jamides zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":751,"description":"

            Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.

            \n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"

            value returned if no content is found

            \n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":792,"description":"

            Sets the element's content.

            \n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"

            the new content

            \n","type":"String"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n firstChild.setContent('Mountain Goat');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Mountain Goat\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":833,"description":"

            Serializes the element into a string. This function is useful for preparing\nthe content to be sent over a http request or saved to file.

            \n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.serialize());\n}\n\n// Sketch prints:\n// \n// Goat\n// Leopard\n// Zebra\n// \n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"

            Calculates the absolute value of a number.

            \n

            A number's absolute value is its distance from zero on the number line.\n-5 and 5 are both five units away from zero, so calling abs(-5) and\nabs(5) both return 5. The absolute value of a number is always positive.

            \n","itemtype":"method","name":"abs","params":[{"name":"n","description":"

            number to compute.

            \n","type":"Number"}],"return":{"description":"absolute value of given number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas.\n line(50, 0, 50, 100);\n\n // Calculate the mouse's distance from the middle.\n let h = abs(mouseX - 50);\n\n // Draw a rectangle based on the mouse's distance\n // from the middle.\n rect(0, 100 - h, 100, h);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":48,"description":"

            Calculates the closest integer value that is greater than or equal to a\nnumber.

            \n

            For example, calling ceil(9.03) and ceil(9.97) both return the value\n10.

            \n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"

            number to round up.

            \n","type":"Number"}],"return":{"description":"rounded up number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.3;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r up to 1.\n r = ceil(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":91,"description":"

            Constrains a number between a minimum and maximum value.

            \n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"

            number to constrain.

            \n","type":"Number"},{"name":"low","description":"

            minimum limit.

            \n","type":"Number"},{"name":"high","description":"

            maximum limit.

            \n","type":"Number"}],"return":{"description":"constrained number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');\n}\n\nfunction draw() {\n background(200);\n\n let x = constrain(mouseX, 33, 67);\n let y = 50;\n\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');\n}\n\nfunction draw() {\n background(200);\n\n // Set boundaries and draw them.\n let leftWall = 25;\n let rightWall = 75;\n line(leftWall, 0, leftWall, 100);\n line(rightWall, 0, rightWall, 100);\n\n // Draw a circle that follows the mouse freely.\n fill(255);\n circle(mouseX, 33, 9);\n\n // Draw a circle that's constrained.\n let xc = constrain(mouseX, leftWall, rightWall);\n fill(0);\n circle(xc, 67, 9);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":155,"description":"

            Calculates the distance between two points.

            \n

            The version of dist() with four parameters calculates distance in two\ndimensions.

            \n

            The version of dist() with six parameters calculates distance in three\ndimensions.

            \n

            Use p5.Vector.dist() to calculate the\ndistance between two p5.Vector objects.

            \n","itemtype":"method","name":"dist","return":{"description":"distance between the two points.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates.\n let x1 = 10;\n let y1 = 50;\n let x2 = 90;\n let y2 = 50;\n\n // Draw the points and a line connecting them.\n line(x1, y1, x2, y2);\n strokeWeight(5);\n point(x1, y1);\n point(x2, y2);\n\n // Calculate the distance.\n let d = dist(x1, y1, x2, y2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the distance.\n text(d, 43, 40);\n\n describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":155,"params":[{"name":"x1","description":"

            x-coordinate of the first point.

            \n","type":"Number"},{"name":"y1","description":"

            y-coordinate of the first point.

            \n","type":"Number"},{"name":"x2","description":"

            x-coordinate of the second point.

            \n","type":"Number"},{"name":"y2","description":"

            y-coordinate of the second point.

            \n","type":"Number"}],"return":{"description":"distance between the two points.","type":"Number"}},{"line":209,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

            z-coordinate of the first point.

            \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

            z-coordinate of the second point.

            \n","type":"Number"}],"return":{"description":"distance between the two points.","type":"Number"}}]},{"file":"src/math/calculation.js","line":230,"description":"

            Calculates the value of Euler's number e (2.71828...) raised to the power\nof a number.

            \n","itemtype":"method","name":"exp","params":[{"name":"n","description":"

            exponent to raise.

            \n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = exp(1);\n circle(10, 10, d);\n\n // Left-center.\n d = exp(2);\n circle(20, 20, d);\n\n // Right-center.\n d = exp(3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = exp(4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that grow exponentially from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.005 * exp(x * 0.1);\n\n // Draw a point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":294,"description":"

            Calculates the closest integer value that is less than or equal to the\nvalue of a number.

            \n","itemtype":"method","name":"floor","params":[{"name":"n","description":"

            number to round down.

            \n","type":"Number"}],"return":{"description":"rounded down number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.8;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r down to 0.\n r = floor(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is bright red and the one on the right is black.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":332,"description":"

            Calculates a number between two numbers at a specific increment.

            \n

            The amt parameter is the amount to interpolate between the two numbers.\n0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is\nhalf-way in between, and 1.0 is equal to the second number. The lerp()\nfunction is convenient for creating motion along a straight path and for\ndrawing dotted lines.

            \n

            If the value of amt is less than 0 or more than 1, lerp() will return a\nnumber outside of the original interval. For example, calling\nlerp(0, 10, 1.5) will return 15.

            \n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"

            first value.

            \n","type":"Number"},{"name":"stop","description":"

            second value.

            \n","type":"Number"},{"name":"amt","description":"

            number.

            \n","type":"Number"}],"return":{"description":"lerped value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Declare variables for coordinates.\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n strokeWeight(5);\n\n // Draw the original points in black.\n stroke(0);\n point(a, 50);\n point(b, 50);\n\n // Draw the lerped points in gray.\n stroke(100);\n point(c, 50);\n point(d, 50);\n point(e, 50);\n\n describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');\n}\n\n
            \n\n
            \n\nlet x = 50;\nlet y = 50;\nlet targetX = 50;\nlet targetY = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');\n}\n\nfunction draw() {\n background(220);\n\n // Move x and y toward the target.\n x = lerp(x, targetX, 0.05);\n y = lerp(y, targetY, 0.05);\n\n // Draw the circle.\n circle(x, y, 20);\n}\n\n// Set x and y when the user clicks the mouse.\nfunction mouseClicked() {\n x = mouseX;\n y = mouseY;\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":423,"description":"

            Calculates the natural logarithm (the base-e logarithm) of a number.

            \n

            log() expects the n parameter to be a value greater than 0 because\nthe natural logarithm is defined that way.

            \n","itemtype":"method","name":"log","params":[{"name":"n","description":"

            number greater than 0.

            \n","type":"Number"}],"return":{"description":"natural logarithm of n.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = log(50);\n circle(33, 33, d);\n\n // Bottom-right.\n d = log(500000000);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate coordinates.\n let x = frameCount;\n let y = 15 * log(x);\n\n // Draw a point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":481,"description":"

            Calculates the magnitude, or length, of a vector.

            \n

            A vector can be thought of in different ways. In one view, a vector is a\npoint in space. The vector's components, x and y, are the point's\ncoordinates (x, y). A vector's magnitude is the distance from the origin\n(0, 0) to (x, y). mag(x, y) is a shortcut for calling\ndist(0, 0, x, y).

            \n

            A vector can also be thought of as an arrow pointing in space. This view is\nhelpful for programming motion. See p5.Vector for\nmore details.

            \n

            Use p5.Vector.mag() to calculate the\nmagnitude of a p5.Vector object.

            \n","itemtype":"method","name":"mag","params":[{"name":"x","description":"

            first component.

            \n","type":"Number"},{"name":"y","description":"

            second component.

            \n","type":"Number"}],"return":{"description":"magnitude of vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the vector's components.\n let x = 30;\n let y = 40;\n\n // Calculate the magnitude.\n let m = mag(x, y);\n\n // Style the text.\n textSize(16);\n\n // Display the vector and its magnitude.\n line(0, 0, x, y);\n text(m, x, y);\n\n describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":534,"description":"

            Re-maps a number from one range to another.

            \n

            For example, calling map(2, 0, 10, 0, 100) returns 20. The first three\narguments set the original value to 2 and the original range from 0 to 10.\nThe last two arguments set the target range from 0 to 100. 20's position\nin the target range [0, 100] is proportional to 2's position in the\noriginal range [0, 10].

            \n

            The sixth parameter, withinBounds, is optional. By default, map() can\nreturn values outside of the target range. For example,\nmap(11, 0, 10, 0, 100) returns 110. Passing true as the sixth parameter\nconstrains the remapped value to the target range. For example,\nmap(11, 0, 10, 0, 100, true) returns 100.

            \n","itemtype":"method","name":"map","params":[{"name":"value","description":"

            the value to be remapped.

            \n","type":"Number"},{"name":"start1","description":"

            lower bound of the value's current range.

            \n","type":"Number"},{"name":"stop1","description":"

            upper bound of the value's current range.

            \n","type":"Number"},{"name":"start2","description":"

            lower bound of the value's target range.

            \n","type":"Number"},{"name":"stop2","description":"

            upper bound of the value's target range.

            \n","type":"Number"},{"name":"withinBounds","description":"

            constrain the value to the newly mapped range.

            \n","type":"Boolean","optional":true}],"return":{"description":"remapped number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the top line.\n line(0, 25, mouseX, 25);\n\n // Remap mouseX from [0, 100] to [0, 50].\n let x = map(mouseX, 0, 100, 0, 50);\n\n // Draw the bottom line.\n line(0, 75, 0, x);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle changes color from black to white as the mouse moves from left to right.');\n}\n\nfunction draw() {\n background(200);\n\n // Remap mouseX from [0, 100] to [0, 255]\n let c = map(mouseX, 0, 100, 0, 255);\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":618,"description":"

            Returns the largest value in a sequence of numbers.

            \n

            The version of max() with one parameter interprets it as an array of\nnumbers and returns the largest number.

            \n

            The version of max() with two or more parameters interprets them as\nindividual numbers and returns the largest number.

            \n","itemtype":"method","name":"max","return":{"description":"maximum number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the maximum of 10, 5, and 20.\n let m = max(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the maximum of the array.\n let m = max(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":618,"params":[{"name":"n0","description":"

            first number to compare.

            \n","type":"Number"},{"name":"n1","description":"

            second number to compare.

            \n","type":"Number"}],"return":{"description":"maximum number.","type":"Number"}},{"line":680,"params":[{"name":"nums","description":"

            numbers to compare.

            \n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":695,"description":"

            Returns the smallest value in a sequence of numbers.

            \n

            The version of min() with one parameter interprets it as an array of\nnumbers and returns the smallest number.

            \n

            The version of min() with two or more parameters interprets them as\nindividual numbers and returns the smallest number.

            \n","itemtype":"method","name":"min","return":{"description":"minimum number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the minimum of 10, 5, and 20.\n let m = min(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the minimum of the array.\n let m = min(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":695,"params":[{"name":"n0","description":"

            first number to compare.

            \n","type":"Number"},{"name":"n1","description":"

            second number to compare.

            \n","type":"Number"}],"return":{"description":"minimum number.","type":"Number"}},{"line":757,"params":[{"name":"nums","description":"

            numbers to compare.

            \n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":772,"description":"

            Maps a number from one range to a value between 0 and 1.

            \n

            For example, norm(2, 0, 10) returns 0.2. 2's position in the original\nrange [0, 10] is proportional to 0.2's position in the range [0, 1]. This\nis the same as calling map(2, 0, 10, 0, 1).

            \n

            Numbers outside of the original range are not constrained between 0 and 1.\nOut-of-range values are often intentional and useful.

            \n","itemtype":"method","name":"norm","params":[{"name":"value","description":"

            incoming value to be normalized.

            \n","type":"Number"},{"name":"start","description":"

            lower bound of the value's current range.

            \n","type":"Number"},{"name":"stop","description":"

            upper bound of the value's current range.

            \n","type":"Number"}],"return":{"description":"normalized number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n describe('A square changes color from black to red as the mouse moves from left to right.');\n}\n\nfunction draw() {\n // Calculate the redValue.\n let redValue = norm(mouseX, 0, 100);\n\n // Paint the background.\n background(redValue, 0, 0);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":815,"description":"

            Calculates exponential expressions such as 23.

            \n

            For example, pow(2, 3) evaluates the expression\n2 × 2 × 2. pow(2, -3) evaluates 1 ÷\n(2 × 2 × 2).

            \n","itemtype":"method","name":"pow","params":[{"name":"n","description":"

            base of the exponential expression.

            \n","type":"Number"},{"name":"e","description":"

            power by which to raise the base.

            \n","type":"Number"}],"return":{"description":"n^e.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the base of the exponent.\n let base = 3;\n\n // Top-left.\n let d = pow(base, 1);\n circle(10, 10, d);\n\n // Left-center.\n d = pow(base, 2);\n circle(20, 20, d);\n\n // Right-center.\n d = pow(base, 3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = pow(base, 4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":861,"description":"

            Calculates the integer closest to a number.

            \n

            For example, round(133.8) returns the value 134.

            \n

            The second parameter, decimals, is optional. It sets the number of\ndecimal places to use when rounding. For example, round(12.34, 1) returns\n12.3. decimals is 0 by default.

            \n","itemtype":"method","name":"round","params":[{"name":"n","description":"

            number to round.

            \n","type":"Number"},{"name":"decimals","description":"

            number of decimal places to round to, default is 0.

            \n","type":"Number","optional":true}],"return":{"description":"rounded number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number.\n let x = round(4.2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 4 written in middle of the canvas.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number to 2 decimal places.\n let x = round(12.782383, 2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 12.78 written in middle of canvas.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":928,"description":"

            Calculates the square of a number.

            \n

            Squaring a number means multiplying the number by itself. For example,\nsq(3) evaluates 3 × 3 which is 9. sq(-3) evaluates -3 × -3\nwhich is also 9. Multiplying two negative numbers produces a positive\nnumber. The value returned by sq() is always positive.

            \n","itemtype":"method","name":"sq","params":[{"name":"n","description":"

            number to square.

            \n","type":"Number"}],"return":{"description":"squared number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sq(3);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sq(6);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher quickly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.01 * sq(x);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":988,"description":"

            Calculates the square root of a number.

            \n

            A number's square root can be multiplied by itself to produce the original\nnumber. For example, sqrt(9) returns 3 because 3 × 3 = 9. sqrt()\nalways returns a positive value. sqrt() doesn't work with negative arguments\nsuch as sqrt(-9).

            \n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"

            non-negative number to square root.

            \n","type":"Number"}],"return":{"description":"square root of number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sqrt(16);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sqrt(1600);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * sqrt(x);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":1048,"description":"

            Calculates the fractional part of a number.

            \n

            A number's fractional part includes its decimal values. For example,\nfract(12.34) returns 0.34.

            \n","itemtype":"method","name":"fract","params":[{"name":"n","description":"

            number whose fractional part will be found.

            \n","type":"Number"}],"return":{"description":"fractional part of n.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Original number.\n let n = 56.78;\n text(n, 50, 33);\n\n // Fractional part.\n let f = fract(n);\n text(f, 50, 67);\n\n describe('The number 56.78 written above the number 0.78.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"

            Creates a new p5.Vector object.

            \n

            A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection. This view is helpful for programming motion.

            \n

            A vector's components determine its magnitude and direction. For example,\ncalling createVector(3, 4) creates a new\np5.Vector object with an x-component of 3 and a\ny-component of 4. From the origin, this vector's tip is 3 units to the\nright and 4 units down.

            \n

            p5.Vector objects are often used to program\nmotion because they simplify the math. For example, a moving ball has a\nposition and a velocity. Position describes where the ball is in space. The\nball's position vector extends from the origin to the ball's center.\nVelocity describes the ball's speed and the direction it's moving. If the\nball is moving straight up, its velocity vector points straight up. Adding\nthe ball's velocity vector to its position vector moves it, as in\npos.add(vel). Vector math relies on methods inside the\np5.Vector class.

            \n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(50, 50);\n let p3 = createVector(75, 75);\n\n // Draw the dots.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots form a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"

            Returns random numbers that can be tuned to feel organic.

            \n

            Values returned by random() and\nrandomGaussian() can change by large\namounts between function calls. By contrast, values returned by noise()\ncan be made \"smooth\". Calls to noise() with similar inputs will produce\nsimilar outputs. noise() is used to create textures, motion, shapes,\nterrains, and so on. Ken Perlin invented noise() while animating the\noriginal Tron film in the 1980s.

            \n

            noise() always returns values between 0 and 1. It returns the same value\nfor a given input while a sketch is running. noise() produces different\nresults each time a sketch runs. The\nnoiseSeed() function can be used to generate\nthe same sequence of Perlin noise values each time a sketch runs.

            \n

            The character of the noise can be adjusted in two ways. The first way is to\nscale the inputs. noise() interprets inputs as coordinates. The sequence\nof noise values will be smoother when the input coordinates are closer. The\nsecond way is to use the noiseDetail()\nfunction.

            \n

            The version of noise() with one parameter computes noise values in one\ndimension. This dimension can be thought of as space, as in noise(x), or\ntime, as in noise(t).

            \n

            The version of noise() with two parameters computes noise values in two\ndimensions. These dimensions can be thought of as space, as in\nnoise(x, y), or space and time, as in noise(x, t).

            \n

            The version of noise() with three parameters computes noise values in\nthree dimensions. These dimensions can be thought of as space, as in\nnoise(x, y, z), or space and time, as in noise(x, y, t).

            \n","itemtype":"method","name":"noise","params":[{"name":"x","description":"

            x-coordinate in noise space.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate in noise space.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z-coordinate in noise space.

            \n","type":"Number","optional":true}],"return":{"description":"Perlin noise value at specified coordinates.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 100 * noise(0.005 * frameCount);\n let y = 100 * noise(0.005 * frameCount + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise values.\n let x = noiseLevel * noise(nt);\n let y = noiseLevel * noise(nt + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A hilly terrain drawn in gray against a black sky.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.02;\n\n // Scale the input coordinate.\n let x = frameCount;\n let nx = noiseScale * x;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx);\n\n // Draw the line.\n line(x, 0, x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A calm sea drawn in gray against a black sky.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.002;\n\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx, nt);\n\n // Draw the line.\n line(x, 0, x, y);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.01;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n\n describe('A gray cloudy pattern.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray cloudy pattern that changes.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.009;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny, nt);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":331,"description":"

            Adjusts the character of the noise produced by the\nnoise() function.

            \n

            Perlin noise values are created by adding layers of noise together. The\nnoise layers, called octaves, are similar to harmonics in music. Lower\noctaves contribute more to the output signal. They define the overall\nintensity of the noise. Higher octaves create finer-grained details.

            \n

            By default, noise values are created by combining four octaves. Each higher\noctave contributes half as much (50% less) compared to its predecessor.\nnoiseDetail() changes the number of octaves and the falloff amount. For\nexample, calling noiseDetail(6, 0.25) ensures that\nnoise() will use six octaves. Each higher octave\nwill contribute 25% as much (75% less) compared to its predecessor. Falloff\nvalues between 0 and 1 are valid. However, falloff values greater than 0.5\nmight result in noise values greater than 1.

            \n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"

            number of octaves to be used by the noise.

            \n","type":"Number"},{"name":"falloff","description":"

            falloff factor for each octave.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.02;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 50; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value with six octaves\n // and a low falloff factor.\n noiseDetail(6, 0.25);\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the left side.\n stroke(c);\n point(x, y);\n\n // Compute the noise value with four octaves\n // and a high falloff factor.\n noiseDetail(4, 0.5);\n c = noiseLevel * noise(nx, ny);\n\n // Draw the right side.\n stroke(c);\n point(x + 50, y);\n }\n }\n\n describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":405,"description":"

            Sets the seed value for the noise() function.

            \n

            By default, noise() produces different results\neach time a sketch is run. Calling noiseSeed() with a constant argument,\nsuch as noiseSeed(99), makes noise() produce the\nsame results each time a sketch is run.

            \n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"

            seed value.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise seed for consistent results.\n noiseSeed(99);\n\n describe('A black rectangle that grows randomly, first to the right and then to the left.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let x = noiseLevel * noise(nt);\n\n // Draw the line.\n line(x, 0, x, height);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":113,"description":"

            The x component of the vector

            \n","type":"{Number}","itemtype":"property","name":"x","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":120,"description":"

            The y component of the vector

            \n","type":"{Number}","itemtype":"property","name":"y","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":127,"description":"

            The z component of the vector

            \n","type":"{Number}","itemtype":"property","name":"z","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":136,"description":"

            Returns a string representation of a vector.

            \n

            Calling toString() is useful for printing vectors to the console while\ndebugging.

            \n","itemtype":"method","name":"toString","return":{"description":"string representation of the vector.","type":"String"},"example":["\n
            \n\nfunction setup() {\n let v = createVector(20, 30);\n\n // Prints 'p5.Vector Object : [20, 30, 0]'.\n print(v.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":161,"description":"

            Sets the vector's x, y, and z components.

            \n

            set() can use separate numbers, as in v.set(1, 2, 3), a\np5.Vector object, as in v.set(v2), or an\narray of numbers, as in v.set([1, 2, 3]).

            \n

            If a value isn't provided for a component, it will be set to 0. For\nexample, v.set(4, 5) sets v.x to 4, v.y to 5, and v.z to 0.\nCalling set() with no arguments, as in v.set(), sets all the vector's\ncomponents to 0.

            \n","itemtype":"method","name":"set","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // set() with numbers.\n pos.set(75, 25);\n point(pos);\n\n // Bottom right.\n // set() with a p5.Vector.\n let p2 = createVector(75, 75);\n pos.set(p2);\n point(pos);\n\n // Bottom left.\n // set() with an array.\n let arr = [25, 75];\n pos.set(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":161,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":215,"params":[{"name":"value","description":"

            vector to set.

            \n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":239,"description":"

            Returns a copy of the p5.Vector object.

            \n","itemtype":"method","name":"copy","return":{"description":"copy of the p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100 ,100);\n\n background(200);\n\n // Create a p5.Vector object.\n let pos = createVector(50, 50);\n\n // Make a copy.\n let pc = pos.copy();\n\n // Draw the point.\n strokeWeight(5);\n point(pc);\n\n describe('A black point drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":239,"params":[],"return":{"description":"copy of the p5.Vector object.","type":"p5.Vector"}},{"line":3351,"params":[{"name":"v","description":"

            the p5.Vector to create a copy of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the copy of the p5.Vector object","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":282,"description":"

            Adds to a vector's x, y, and z components.

            \n

            add() can use separate numbers, as in v.add(1, 2, 3),\nanother p5.Vector object, as in v.add(v2), or\nan array of numbers, as in v.add([1, 2, 3]).

            \n

            If a value isn't provided for a component, it won't change. For\nexample, v.add(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling add() with no arguments, as in v.add(), has no effect.

            \n

            The static version of add(), as in p5.Vector.add(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"add","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // Add numbers.\n pos.add(50, 0);\n point(pos);\n\n // Bottom right.\n // Add a p5.Vector.\n let p2 = createVector(0, 50);\n pos.add(p2);\n point(pos);\n\n // Bottom left.\n // Add an array.\n let arr = [-50, 0];\n pos.add(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top left.\n let p1 = createVector(25, 25);\n\n // Center.\n let p2 = createVector(50, 50);\n\n // Bottom right.\n // Add p1 and p2.\n let p3 = p5.Vector.add(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(origin, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":282,"params":[{"name":"x","description":"

            x component of the vector to be added.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector to be added.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector to be added.

            \n","type":"Number","optional":true}],"chainable":1},{"line":411,"params":[{"name":"value","description":"

            The vector to add

            \n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":3363,"params":[{"name":"v1","description":"

            A p5.Vector to add

            \n","type":"p5.Vector"},{"name":"v2","description":"

            A p5.Vector to add

            \n","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"resulting p5.Vector.","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":466,"description":"

            Performs modulo (remainder) division with a vector's x, y, and z\ncomponents.

            \n

            rem() can use separate numbers, as in v.rem(1, 2, 3),\nanother p5.Vector object, as in v.rem(v2), or\nan array of numbers, as in v.rem([1, 2, 3]).

            \n

            If only one value is provided, as in v.rem(2), then all the components\nwill be set to their values modulo 2. If two values are provided, as in\nv.rem(2, 3), then v.z won't change. Calling rem() with no\narguments, as in v.rem(), has no effect.

            \n

            The static version of rem(), as in p5.Vector.rem(v2, v1), returns a\nnew p5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"rem","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2);\n\n // Prints 'p5.Vector Object : [1, 0, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3);\n\n // Prints 'p5.Vector Object : [1, 1, 5]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3, 4);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide a p5.Vector.\n v1.rem(v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide an array.\n let arr = [2, 3, 4];\n v.rem(arr);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide without modifying the original vectors.\n let v3 = p5.Vector.rem(v1, v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v3.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":466,"params":[{"name":"x","description":"

            x component of divisor vector.

            \n","type":"Number"},{"name":"y","description":"

            y component of divisor vector.

            \n","type":"Number"},{"name":"z","description":"

            z component of divisor vector.

            \n","type":"Number"}],"chainable":1},{"line":583,"params":[{"name":"value","description":"

            divisor vector.

            \n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":3389,"params":[{"name":"v1","description":"

            The dividend p5.Vector

            \n","type":"p5.Vector"},{"name":"v2","description":"

            The divisor p5.Vector

            \n","type":"p5.Vector"}],"static":1},{"line":3395,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"The resulting p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":640,"description":"

            Subtracts from a vector's x, y, and z components.

            \n

            sub() can use separate numbers, as in v.sub(1, 2, 3), another\np5.Vector object, as in v.sub(v2), or an array\nof numbers, as in v.sub([1, 2, 3]).

            \n

            If a value isn't provided for a component, it won't change. For\nexample, v.sub(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling sub() with no arguments, as in v.sub(), has no effect.

            \n

            The static version of sub(), as in p5.Vector.sub(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"sub","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom right.\n let pos = createVector(75, 75);\n point(pos);\n\n // Top right.\n // Subtract numbers.\n pos.sub(0, 50);\n point(pos);\n\n // Top left.\n // Subtract a p5.Vector.\n let p2 = createVector(50, 0);\n pos.sub(p2);\n point(pos);\n\n // Bottom left.\n // Subtract an array.\n let arr = [0, -50];\n pos.sub(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(75, 75);\n let p2 = createVector(50, 50);\n\n // Subtract with modifying the original vectors.\n let p3 = p5.Vector.sub(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":640,"params":[{"name":"x","description":"

            x component of the vector to subtract.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector to subtract.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector to subtract.

            \n","type":"Number","optional":true}],"chainable":1},{"line":766,"params":[{"name":"value","description":"

            the vector to subtract

            \n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":3414,"params":[{"name":"v1","description":"

            A p5.Vector to subtract from

            \n","type":"p5.Vector"},{"name":"v2","description":"

            A p5.Vector to subtract

            \n","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":790,"description":"

            Multiplies a vector's x, y, and z components.

            \n

            mult() can use separate numbers, as in v.mult(1, 2, 3), another\np5.Vector object, as in v.mult(v2), or an array\nof numbers, as in v.mult([1, 2, 3]).

            \n

            If only one value is provided, as in v.mult(2), then all the components\nwill be multiplied by 2. If a value isn't provided for a component, it\nwon't change. For example, v.mult(4, 5) multiplies v.x by, v.y by 5,\nand v.z by 1. Calling mult() with no arguments, as in v.mult(), has\nno effect.

            \n

            The static version of mult(), as in p5.Vector.mult(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"mult","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Center.\n // Multiply all components by 2.\n p.mult(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n p.mult(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n let arr = [2, 3];\n p.mult(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * p2.x and p.y * p2.y\n let p2 = createVector(2, 3);\n p.mult(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Create a new p5.Vector with\n // p3.x = p.x * p2.x\n // p3.y = p.y * p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.mult(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');\n}\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(25, 25);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.mult(v1, 2);\n drawArrow(origin, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":790,"params":[{"name":"n","description":"

            The number to multiply with the vector

            \n","type":"Number"}],"chainable":1},{"line":970,"params":[{"name":"x","description":"

            number to multiply with the x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            number to multiply with the y component of the vector.

            \n","type":"Number"},{"name":"z","description":"

            number to multiply with the z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":978,"params":[{"name":"arr","description":"

            array to multiply with the components of the vector.

            \n","type":"Number[]"}],"chainable":1},{"line":984,"params":[{"name":"v","description":"

            vector to multiply with the components of the original vector.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3443,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true}],"static":1,"return":{"description":"resulting new p5.Vector.","type":"p5.Vector"}},{"line":3452,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1},{"line":3460,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":3468,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"arr","description":"","type":"Number[]"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":1069,"description":"

            Divides a vector's x, y, and z components.

            \n

            div() can use separate numbers, as in v.div(1, 2, 3), another\np5.Vector object, as in v.div(v2), or an array\nof numbers, as in v.div([1, 2, 3]).

            \n

            If only one value is provided, as in v.div(2), then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, v.div(4, 5) divides v.x by, v.y by 5,\nand v.z by 1. Calling div() with no arguments, as in v.div(), has\nno effect.

            \n

            The static version of div(), as in p5.Vector.div(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"div","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Center.\n let p = createVector(50, 50);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 2\n p.div(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n p.div(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let arr = [2, 3];\n p.div(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let p2 = createVector(2, 3);\n p.div(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Create a new p5.Vector with\n // p3.x = p.x / p2.x\n // p3.y = p.y / p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.div(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.div(v1, 2);\n drawArrow(origin, v2, 'blue');\n\n describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1069,"params":[{"name":"n","description":"

            The number to divide the vector by

            \n","type":"Number"}],"chainable":1},{"line":1251,"params":[{"name":"x","description":"

            number to divide with the x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            number to divide with the y component of the vector.

            \n","type":"Number"},{"name":"z","description":"

            number to divide with the z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":1259,"params":[{"name":"arr","description":"

            array to divide the components of the vector by.

            \n","type":"Number[]"}],"chainable":1},{"line":1265,"params":[{"name":"v","description":"

            vector to divide the components of the original vector by.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3522,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3531,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1},{"line":3539,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":3547,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"arr","description":"","type":"Number[]"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":1366,"description":"

            Calculates the magnitude (length) of the vector.

            \n

            Use mag() to calculate the magnitude of a 2D vector\nusing components as in mag(x, y).

            \n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude.\n let m = p.mag();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1366,"params":[],"return":{"description":"magnitude of the vector.","type":"Number"}},{"line":3678,"params":[{"name":"vecT","description":"

            The vector to return the magnitude of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"The magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1406,"description":"

            Calculates the magnitude (length) of the vector squared.

            \n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude squared.\n let m = p.magSq();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1406,"params":[],"return":{"description":"squared magnitude of the vector.","type":"Number"}},{"line":3694,"params":[{"name":"vecT","description":"

            the vector to return the squared magnitude of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the squared magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1445,"description":"

            Calculates the dot product of two vectors.

            \n

            The dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.

            \n

            The version of dot() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of dot() with multiple parameters interprets them as the\nx, y, and z components of another vector.

            \n

            The static version of dot(), as in p5.Vector.dot(v1, v2), is the same\nas calling v1.dot(v2).

            \n","itemtype":"method","name":"dot","return":{"description":"dot product.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4);\n let v2 = createVector(3, 0);\n\n // Calculate the dot product.\n let dp = v1.dot(v2);\n\n // Prints \"9\" to the console.\n print(dp);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the dot product.\n let dp = p5.Vector.dot(v1, v2);\n\n // Prints \"0\" to the console.\n print(dp);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text \"v1 • v2 = something\" changes as the mouse moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Draw the black arrow.\n let v1 = createVector(30, 0);\n drawArrow(v0, v1, 'black');\n\n // Draw the red arrow.\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'red');\n\n // Display the dot product.\n let dp = v2.dot(v1);\n text(`v2 • v1 = ${dp}`, 10, 20);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1445,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"dot product.","type":"Number"}},{"line":1546,"params":[{"name":"v","description":"

            p5.Vector to be dotted.

            \n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":3574,"params":[{"name":"v1","description":"

            first p5.Vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            second p5.Vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"dot product.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1558,"description":"

            Calculates the cross product of two vectors.

            \n

            The cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.

            \n

            The static version of cross(), as in p5.Vector.cross(v1, v2), is the same\nas calling v1.cross(v2).

            \n","itemtype":"method","name":"cross","return":{"description":"cross product as a p5.Vector.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = v1.cross(v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = p5.Vector.cross(v1, v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1558,"params":[{"name":"v","description":"

            p5.Vector to be crossed.

            \n","type":"p5.Vector"}],"return":{"description":"cross product as a p5.Vector.","type":"p5.Vector"}},{"line":3588,"params":[{"name":"v1","description":"

            first p5.Vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            second p5.Vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"cross product.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1616,"description":"

            Calculates the distance between two points represented by vectors.

            \n

            A point's coordinates can be represented by the components of a vector\nthat extends from the origin to the point.

            \n

            The static version of dist(), as in p5.Vector.dist(v1, v2), is the same\nas calling v1.dist(v2).

            \n

            Use dist() to calculate the distance between points\nusing coordinates as in dist(x1, y1, x2, y2).

            \n","itemtype":"method","name":"dist","return":{"description":"distance.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = v1.dist(v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = p5.Vector.dist(v1, v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n\n // Style the text.\n textAlign(CENTER);\n\n // Display the magnitude.\n let m = floor(v3.mag());\n text(m, 50, 75);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1616,"params":[{"name":"v","description":"

            x, y, and z coordinates of a p5.Vector.

            \n","type":"p5.Vector"}],"return":{"description":"distance.","type":"Number"}},{"line":3603,"params":[{"name":"v1","description":"

            The first p5.Vector

            \n","type":"p5.Vector"},{"name":"v2","description":"

            The second p5.Vector

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"The distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1730,"description":"

            Scales the components of a p5.Vector object so\nthat its magnitude is 1.

            \n

            The static version of normalize(), as in p5.Vector.normalize(v),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"normalize","return":{"description":"normalized p5.Vector.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v = createVector(10, 20, 2);\n\n // Normalize.\n v.normalize();\n\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v0 = createVector(10, 20, 2);\n\n // Create a normalized copy.\n let v1 = p5.Vector.normalize(v0);\n\n // Prints \"p5.Vector Object : [10, 20, 2]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.\");\n}\n\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n v1.normalize();\n drawArrow(v0, v1.mult(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1730,"params":[],"return":{"description":"normalized p5.Vector.","type":"p5.Vector"}},{"line":3707,"params":[{"name":"v","description":"

            The vector to normalize

            \n","type":"p5.Vector"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The vector v, normalized to a length of 1","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1839,"description":"

            Limits a vector's magnitude to a maximum value.

            \n

            The static version of limit(), as in p5.Vector.limit(v, 5), returns a\nnew p5.Vector object and doesn't change the\noriginal.

            \n","itemtype":"method","name":"limit","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(10, 20, 2);\n\n // Limit its magnitude.\n v.limit(5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(10, 20, 2);\n\n // Create a copy an limit its magintude.\n let v1 = p5.Vector.limit(v0, 5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.\");\n}\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v1.limit(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1839,"params":[{"name":"max","description":"

            maximum magnitude for the vector.

            \n","type":"Number"}],"chainable":1},{"line":3733,"params":[{"name":"v","description":"

            the vector to limit

            \n","type":"p5.Vector"},{"name":"max","description":"","type":"Number"},{"name":"target","description":"

            the vector to receive the result (Optional)

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v with a magnitude limited to max","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1937,"description":"

            Sets a vector's magnitude to a given value.

            \n

            The static version of setMag(), as in p5.Vector.setMag(v, 10), returns\na new p5.Vector object and doesn't change the\noriginal.

            \n","itemtype":"method","name":"setMag","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 0);\n\n // Prints \"5\" to the console.\n print(v.mag());\n\n // Set its magnitude to 10.\n v.setMag(10);\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 4, 0);\n\n // Create a copy with a magnitude of 10.\n let v1 = p5.Vector.setMag(v0, 10);\n\n // Prints \"5\" to the console.\n print(v0.mag());\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');\n}\n\nfunction draw() {\n background(240);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the red arrow.\n drawArrow(origin, v, 'red');\n\n // Set v's magnitude to 30.\n v.setMag(30);\n\n // Draw the blue arrow.\n drawArrow(origin, v, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1937,"params":[{"name":"len","description":"

            new length for this vector.

            \n","type":"Number"}],"chainable":1},{"line":3760,"params":[{"name":"v","description":"

            the vector to set the magnitude of

            \n","type":"p5.Vector"},{"name":"len","description":"","type":"Number"},{"name":"target","description":"

            the vector to receive the result (Optional)

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v with a magnitude set to len","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2030,"description":"

            Calculates the angle a 2D vector makes with the positive x-axis.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), heading() returns angles\nin the units of the current angleMode().

            \n

            The static version of heading(), as in p5.Vector.heading(v), works the\nsame way.

            \n","itemtype":"method","name":"heading","return":{"description":"angle of rotation.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(v.heading());\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(p5.Vector.heading(v));\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(p5.Vector.heading(v));\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the top left of a square to its center. The text \"Radians: 0.79\" and \"Degrees: 45\" is written near the tip of the arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the black arrow.\n drawArrow(origin, v, 'black');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the heading in radians.\n let h = round(v.heading(), 2);\n text(`Radians: ${h}`, 20, 70);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the heading in degrees.\n h = v.heading();\n text(`Degrees: ${h}`, 20, 85);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2030,"params":[],"return":{"description":"angle of rotation.","type":"Number"}},{"line":3789,"params":[{"name":"v","description":"

            the vector to find the angle of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the angle of rotation","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":2138,"description":"

            Rotates a 2D vector to a specific angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), setHeading() uses\nthe units of the current angleMode().

            \n","itemtype":"method","name":"setHeading","params":[{"name":"angle","description":"

            angle of rotation.

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(PI);\n\n // Prints \"3.141...\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(180);\n\n // Prints \"180\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Point down.\n v1.setHeading(HALF_PI);\n\n // Draw the blue arrow.\n drawArrow(v0, v1, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2242,"description":"

            Rotates a 2D vector by an angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), rotate() uses\nthe units of the current angleMode().

            \n

            The static version of rotate(), as in p5.Vector.rotate(v, PI),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"rotate","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(HALF_PI);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(90);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, HALF_PI);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, 90);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nlet v0;\nlet v1;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n v0 = createVector(50, 50);\n v1 = createVector(30, 0);\n\n describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');\n}\n\nfunction draw() {\n background(240);\n\n // Rotate v1.\n v1.rotate(0.01);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2242,"params":[{"name":"angle","description":"

            angle of rotation.

            \n","type":"Number"}],"chainable":1},{"line":3495,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":2388,"description":"

            Calculates the angle between two vectors.

            \n

            The angles returned are signed, which means that\nv1.angleBetween(v2) === -v2.angleBetween(v1).

            \n

            If the vector was created with\ncreateVector(), angleBetween() returns\nangles in the units of the current\nangleMode().

            \n","itemtype":"method","name":"angleBetween","return":{"description":"angle between the vectors.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-1.570...\" to the console.\n print(v1.angleBetween(v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-90\" to the console.\n print(v1.angleBetween(v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-1.570...\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-90\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text \"Radians: 1.57\" and \"Degrees: 90\" is written above the arrows.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the angle in radians.\n let angle = round(v1.angleBetween(v2), 2);\n text(`Radians: ${angle}`, 20, 20);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the angle in degrees.\n angle = round(v1.angleBetween(v2), 2);\n text(`Degrees: ${angle}`, 20, 35);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2388,"params":[{"name":"value","description":"

            x, y, and z components of a p5.Vector.

            \n","type":"p5.Vector"}],"return":{"description":"angle between the vectors.","type":"Number"}},{"line":3804,"params":[{"name":"v1","description":"

            the first vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            the second vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"angle between the two vectors.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":2542,"description":"

            Calculates new x, y, and z components that are proportionally the\nsame distance between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.

            \n

            The static version of lerp(), as in p5.Vector.lerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"lerp","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n v0.lerp(v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v0.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1, 1);\n\n // Interpolate.\n v.lerp(3, 3, 3, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n let v2 = p5.Vector.lerp(v0, v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v2.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Interpolate.\n let v3 = p5.Vector.lerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2542,"params":[{"name":"x","description":"

            x component.

            \n","type":"Number"},{"name":"y","description":"

            y component.

            \n","type":"Number"},{"name":"z","description":"

            z component.

            \n","type":"Number"},{"name":"amt","description":"

            amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.

            \n","type":"Number"}],"chainable":1},{"line":2655,"params":[{"name":"v","description":"

            p5.Vector to lerp toward.

            \n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":3618,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2671,"description":"

            Calculates a new heading and magnitude that are between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.

            \n

            slerp() differs from lerp() because\nit interpolates magnitude. Calling v0.slerp(v1, 0.5) sets v0's\nmagnitude to a value halfway between its original magnitude and v1's.\nCalling v0.lerp(v1, 0.5) makes no such guarantee.

            \n

            The static version of slerp(), as in p5.Vector.slerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"slerp","return":{"description":"","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Interpolate halfway between v0 and v1.\n v0.slerp(v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v0.mag());\n\n // Prints \"0.785...\" to the console.\n print(v0.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Create a p5.Vector that's halfway between v0 and v1.\n let v3 = p5.Vector.slerp(v0, v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v3.mag());\n\n // Prints \"0.785...\" to the console.\n print(v3.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(20, 0);\n let v2 = createVector(-40, 0);\n\n // Create a p5.Vector that's halfway between v1 and v2.\n let v3 = p5.Vector.slerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2671,"params":[{"name":"v","description":"

            p5.Vector to slerp toward.

            \n","type":"p5.Vector"},{"name":"amt","description":"

            amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.

            \n","type":"Number"}],"return":{"description":"","type":"p5.Vector"}},{"line":3649,"params":[{"name":"v1","description":"

            old vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            new vector.

            \n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"slerped vector between v1 and v2","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2873,"description":"

            Reflects a vector about a line in 2D or a plane in 3D.

            \n

            The orientation of the line or plane is described by a normal vector that\npoints away from the shape.

            \n

            The static version of reflect(), as in p5.Vector.reflect(v, n),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"reflect","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n // Create a vector to reflect.\n let v = createVector(4, 6);\n\n // Reflect v about n.\n v.reflect(n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n\n // Create a vector to reflect.\n let v0 = createVector(4, 6);\n\n // Create a reflected vector.\n let v1 = p5.Vector.reflect(v0, n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Draw a vertical line.\n line(50, 0, 50, 100);\n\n // Create a normal vector.\n let n = createVector(1, 0);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Create a vector to reflect.\n let v1 = createVector(30, 40);\n\n // Create a reflected vector.\n let v2 = p5.Vector.reflect(v1, n);\n\n // Scale the normal vector for drawing.\n n.setMag(30);\n\n // Draw the black arrow.\n drawArrow(v0, n, 'black');\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2873,"params":[{"name":"surfaceNormal","description":"

            p5.Vector\n to reflect about.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3819,"params":[{"name":"incidentVector","description":"

            vector to be reflected.

            \n","type":"p5.Vector"},{"name":"surfaceNormal","description":"","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the reflected vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2983,"description":"

            Returns the vector's components as an array of numbers.

            \n","itemtype":"method","name":"array","return":{"description":"array with the vector's components.","type":"Number[]"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(20, 30);\n\n // Prints \"[20, 30, 0]\" to the console.\n print(v.array());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2983,"params":[],"return":{"description":"array with the vector's components.","type":"Number[]"}},{"line":3848,"params":[{"name":"v","description":"

            the vector to convert to an array

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"an Array with the 3 values","type":"Number[]"}}]},{"file":"src/math/p5.Vector.js","line":3005,"description":"

            Checks whether all the vector's components are equal to another vector's.

            \n

            equals() returns true if the vector's components are all the same as another\nvector's and false if not.

            \n

            The version of equals() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of equals() with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.

            \n

            The static version of equals(), as in p5.Vector.equals(v0, v1),\ninterprets both parameters as p5.Vector objects.

            \n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equal.","type":"Boolean"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(5, 10, 20);\n let v1 = createVector(5, 10, 20);\n let v2 = createVector(13, 10, 19);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1.x, v1.y, v1.z));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2.x, v2.y, v2.z));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(p5.Vector.equals(v0, v1));\n\n // Prints \"false\" to the console.\n print(p5.Vector.equals(v0, v2));\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":3005,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equal.","type":"Boolean"}},{"line":3078,"params":[{"name":"value","description":"

            vector to compare.

            \n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}},{"line":3861,"params":[{"name":"v1","description":"

            the first vector to compare

            \n","type":"p5.Vector|Array"},{"name":"v2","description":"

            the second vector to compare

            \n","type":"p5.Vector|Array"}],"static":1,"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":3103,"description":"

            Creates a new 2D vector from an angle.

            \n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"

            desired angle, in radians. Unaffected by angleMode().

            \n","type":"Number"},{"name":"length","description":"

            length of the new vector (defaults to 1).

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0, 30);\n\n // Prints \"p5.Vector Object : [30, 0, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the center of a gray square. It points to the right.');\n}\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a p5.Vector with an angle 0 and magnitude 30.\n let v1 = p5.Vector.fromAngle(0, 30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3181,"description":"

            Creates a new 3D vector from a pair of ISO spherical angles.

            \n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"

            polar angle in radians (zero is up).

            \n","type":"Number"},{"name":"phi","description":"

            azimuthal angle in radians\n (zero is out of the screen).

            \n","type":"Number"},{"name":"length","description":"

            length of the new vector (defaults to 1).

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(0, 0);\n\n // Prints \"p5.Vector Object : [0, -1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A light shines on a pink sphere as it orbits.');\n}\n\nfunction draw() {\n background(0);\n\n // Calculate the ISO angles.\n let theta = frameCount * 0.05;\n let phi = 0;\n\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(theta, phi, 100);\n\n // Create a point light using the p5.Vector.\n let c = color('deeppink');\n pointLight(c, v);\n\n // Style the sphere.\n fill(255);\n noStroke();\n\n // Draw the sphere.\n sphere(35);\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3253,"description":"

            Creates a new 2D unit vector with a random heading.

            \n","itemtype":"method","name":"random2D","static":1,"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random2D();\n\n // Prints \"p5.Vector Object : [x, y, 0]\" to the console\n // where x and y are small random numbers.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a random p5.Vector.\n let v1 = p5.Vector.random2D();\n\n // Scale v1 for drawing.\n v1.mult(30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3321,"description":"

            Creates a new 3D unit vector with a random heading.

            \n","itemtype":"method","name":"random3D","static":1,"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random3D();\n\n // Prints \"p5.Vector Object : [x, y, z]\" to the console\n // where x, y, and z are small random numbers.\n print(v.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3439,"description":"

            Multiplies a vector by a scalar and returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3491,"description":"

            Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3518,"description":"

            Divides a vector by a scalar and returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3571,"description":"

            Calculates the dot product of two vectors.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3585,"description":"

            Calculates the cross product of two vectors.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3599,"description":"

            Calculates the Euclidean distance between two points (considering a\npoint as a vector object).

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3614,"description":"

            Linear interpolate a vector to another vector and return the result as a\nnew vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3643,"description":"

            Performs spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3674,"description":"

            Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(x*x + y*y + z*z).)

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3688,"description":"

            Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x*x + y*y + z*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3704,"description":"

            Normalize the vector to length 1 (make it a unit vector).

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3729,"description":"

            Limit the magnitude of the vector to the value used for the max\nparameter.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3756,"description":"

            Set the magnitude of the vector to the value used for the len\nparameter.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3783,"description":"

            Calculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3799,"description":"

            Calculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3815,"description":"

            Reflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3842,"description":"

            Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3858,"description":"

            Equality check against a p5.Vector

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"

            Sets the seed value for the random() and\nrandomGaussian() functions.

            \n

            By default, random() and\nrandomGaussian() produce different\nresults each time a sketch is run. Calling randomSeed() with a constant\nargument, such as randomSeed(99), makes these functions produce the same\nresults each time a sketch is run.

            \n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"

            seed value.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the white circle.\n circle(x, y, 10);\n\n // Set a random seed for consistency.\n randomSeed(99);\n\n // Get random coordinates.\n x = random(0, 100);\n y = random(0, 100);\n\n // Draw the black circle.\n fill(0);\n circle(x, y, 10);\n\n describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":86,"description":"

            Returns a random number or a random element from an array.

            \n

            random() follows uniform distribution, which means that all outcomes are\nequally likely. When random() is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\nrandom() is used to select elements from an array, all elements are\nequally likely to be chosen.

            \n

            By default, random() produces different results each time a sketch runs.\nThe randomSeed() function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.

            \n

            The version of random() with no parameters returns a random number from 0\nup to but not including 1.

            \n

            The version of random() with one parameter works one of two ways. If the\nargument passed is a number, random() returns a random number from 0 up\nto but not including the number. For example, calling random(5) returns\nvalues between 0 and 5. If the argument passed is an array, random()\nreturns a random element from that array. For example, calling\nrandom(['🦁', '🐯', '🐻']) returns either a lion, tiger, or bear emoji.

            \n

            The version of random() with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling random(-5, 10.2) returns values from -5 up to but\nnot including 10.2.

            \n","itemtype":"method","name":"random","return":{"description":"random number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw a point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of emoji strings.\n let animals = ['🦁', '🐯', '🐻'];\n\n // Choose a random element from the array.\n let choice = random(animals);\n\n // Style the text.\n textAlign(CENTER);\n textSize(20);\n\n // Display the emoji.\n text(choice, 50, 50);\n\n describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 45 and 55.\n let x = random(45, 55);\n let y = random(45, 55);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n // Update x and y randomly.\n x += random(-1, 1);\n y += random(-1, 1);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random","overloads":[{"line":86,"params":[{"name":"min","description":"

            lower bound (inclusive).

            \n","type":"Number","optional":true},{"name":"max","description":"

            upper bound (exclusive).

            \n","type":"Number","optional":true}],"return":{"description":"random number.","type":"Number"}},{"line":259,"params":[{"name":"choices","description":"

            array to choose from.

            \n","type":"Array"}],"return":{"description":"random element from the array.","type":"*"}}]},{"file":"src/math/random.js","line":293,"description":"

            Returns a random number fitting a Gaussian, or normal, distribution.

            \n

            Normal distributions look like bell curves when plotted. Values from a\nnormal distribution cluster around a central value called the mean. The\ncluster's standard deviation describes its spread.

            \n

            By default, randomGaussian() produces different results each time a\nsketch runs. The randomSeed() function can be\nused to generate the same sequence of numbers each time a sketch runs.

            \n

            There's no minimum or maximum value that randomGaussian() might return.\nValues far from the mean are very unlikely and values near the mean are\nvery likely.

            \n

            The version of randomGaussian() with no parameters returns values with a\nmean of 0 and standard deviation of 1.

            \n

            The version of randomGaussian() with one parameter interprets the\nargument passed as the mean. The standard deviation is 1.

            \n

            The version of randomGaussian() with two parameters interprets the first\nargument passed as the mean and the second as the standard deviation.

            \n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"

            mean.

            \n","type":"Number","optional":true},{"name":"sd","description":"

            standard deviation.

            \n","type":"Number","optional":true}],"return":{"description":"random number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');\n}\n\nfunction draw() {\n // Style the circles.\n noStroke();\n fill(0, 10);\n\n // Uniform distribution between 0 and 100.\n let x = random(100);\n let y = 25;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 1.\n x = randomGaussian(50);\n y = 50;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 10.\n x = randomGaussian(50, 10);\n y = 75;\n circle(x, y, 5);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"

            Calculates the arc cosine of a number.

            \n

            acos() is the inverse of cos(). It expects\narguments in the range -1 to 1. By default, acos() returns values in the\nrange 0 to π (about 3.14). If the\nangleMode() is DEGREES, then values are\nreturned in the range 0 to 180.

            \n","itemtype":"method","name":"acos","params":[{"name":"value","description":"

            value whose arc cosine is to be returned.

            \n","type":"Number"}],"return":{"description":"arc cosine of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.142, -1, and 3.142 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI + QUARTER_PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":80,"description":"

            Calculates the arc sine of a number.

            \n

            asin() is the inverse of sin(). It expects input\nvalues in the range of -1 to 1. By default, asin() returns values in the\nrange -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If\nthe angleMode() is DEGREES then values are\nreturned in the range -90 to 90.

            \n","itemtype":"method","name":"asin","params":[{"name":"value","description":"

            value whose arc sine is to be returned.

            \n","type":"Number"}],"return":{"description":"arc sine of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI + PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":142,"description":"

            Calculates the arc tangent of a number.

            \n

            atan() is the inverse of tan(). It expects input\nvalues in the range of -Infinity to Infinity. By default, atan() returns\nvalues in the range -π ÷ 2 (about -1.57) to π ÷ 2\n(about 1.57). If the angleMode() is DEGREES\nthen values are returned in the range -90 to 90.

            \n","itemtype":"method","name":"atan","params":[{"name":"value","description":"

            value whose arc tangent is to be returned.

            \n","type":"Number"}],"return":{"description":"arc tangent of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI + PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":204,"description":"

            Calculates the angle formed by a point, the origin, and the positive\nx-axis.

            \n

            atan2() is most often used for orienting geometry to the mouse's\nposition, as in atan2(mouseY, mouseX). The first parameter is the point's\ny-coordinate and the second parameter is its x-coordinate.

            \n

            By default, atan2() returns values in the range\n-π (about -3.14) to π (3.14). If the\nangleMode() is DEGREES, then values are\nreturned in the range -180 to 180.

            \n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"

            y-coordinate of the point.

            \n","type":"Number"},{"name":"x","description":"

            x-coordinate of the point.

            \n","type":"Number"}],"return":{"description":"arc tangent of the given point.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the top-left of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the angle between the mouse\n // and the origin.\n let a = atan2(mouseY, mouseX);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(0, 0, 60, 10);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the center of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Get the mouse's coordinates relative to the origin.\n let x = mouseX - 50;\n let y = mouseY - 50;\n\n // Calculate the angle between the mouse and the origin.\n let a = atan2(y, x);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(-30, -5, 60, 10);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":281,"description":"

            Calculates the cosine of an angle.

            \n

            cos() is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. cos()\ntakes into account the current angleMode().

            \n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"cosine of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * cos(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":361,"description":"

            Calculates the sine of an angle.

            \n

            sin() is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. sin()\ntakes into account the current angleMode().

            \n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"sine of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates up and down.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 50;\n let y = 30 * sin(frameCount * 0.05) + 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * sin(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":441,"description":"

            Calculates the tangent of an angle.

            \n

            tan() is useful for many geometric tasks in creative coding. The values\nreturned range from -Infinity to Infinity and repeat periodically as the\ninput angle increases. tan() takes into account the current\nangleMode().

            \n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"tangent of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * tan(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":479,"description":"

            Converts an angle measured in radians to its value in degrees.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.

            \n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"

            radians value to convert to degrees.

            \n","type":"Number"}],"return":{"description":"converted angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let rad = QUARTER_PI;\n let deg = degrees(rad);\n\n // Display the conversion.\n text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);\n\n describe('The text \"0.79 rad = 45˚\".');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":515,"description":"

            Converts an angle measured in degrees to its value in radians.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.

            \n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"

            degree value to convert to radians.

            \n","type":"Number"}],"return":{"description":"converted angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":551,"description":"

            Changes the unit system used to measure angles.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            Functions such as rotate() and\nsin() expect angles measured radians by default.\nCalling angleMode(DEGREES) switches to degrees. Calling\nangleMode(RADIANS) switches back to radians.

            \n

            Calling angleMode() with no arguments returns current angle mode, which\nis either RADIANS or DEGREES.

            \n","itemtype":"method","name":"angleMode","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Rotate 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Rotate 1/8 turn.\n rotate(45);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Calculate the angle to rotate.\n let angle = TWO_PI / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Calculate the angle to rotate.\n let angle = 360 / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 2.86) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the upper line.\n rotate(PI / 6);\n line(0, 0, 80, 0);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw the lower line.\n rotate(30);\n line(0, 0, 80, 0);\n\n describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry","overloads":[{"line":551,"params":[{"name":"mode","description":"

            either RADIANS or DEGREES.

            \n","type":"Constant"}]},{"line":737,"params":[],"return":{"description":"mode either RADIANS or DEGREES","type":"Constant"}}]},{"file":"src/typography/attributes.js","line":11,"description":"

            Sets the way text is aligned when text() is called.

            \n

            By default, calling text('hi', 10, 20) places the bottom-left corner of\nthe text's bounding box at (10, 20).

            \n

            The first parameter, horizAlign, changes the way\ntext() interprets x-coordinates. By default, the\nx-coordinate sets the left edge of the bounding box. textAlign() accepts\nthe following values for horizAlign: LEFT, CENTER, or RIGHT.

            \n

            The second parameter, vertAlign, is optional. It changes the way\ntext() interprets y-coordinates. By default, the\ny-coordinate sets the bottom edge of the bounding box. textAlign()\naccepts the following values for vertAlign: TOP, BOTTOM, CENTER,\nor BASELINE.

            \n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a vertical line.\n strokeWeight(0.5);\n line(50, 0, 50, 100);\n\n // Top line.\n textSize(16);\n textAlign(RIGHT);\n text('ABCD', 50, 30);\n\n // Middle line.\n textAlign(CENTER);\n text('EFGH', 50, 50);\n\n // Bottom line.\n textAlign(LEFT);\n text('IJKL', 50, 70);\n\n describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(0.5);\n\n // First line.\n line(0, 12, width, 12);\n textAlign(CENTER, TOP);\n text('TOP', 50, 12);\n\n // Second line.\n line(0, 37, width, 37);\n textAlign(CENTER, CENTER);\n text('CENTER', 50, 37);\n\n // Third line.\n line(0, 62, width, 62);\n textAlign(CENTER, BASELINE);\n text('BASELINE', 50, 62);\n\n // Fourth line.\n line(0, 97, width, 97);\n textAlign(CENTER, BOTTOM);\n text('BOTTOM', 50, 97);\n\n describe('The words \"TOP\", \"CENTER\", \"BASELINE\", and \"BOTTOM\" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"

            horizontal alignment, either LEFT,\n CENTER, or RIGHT.

            \n","type":"Constant"},{"name":"vertAlign","description":"

            vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE.

            \n","type":"Constant","optional":true}],"chainable":1},{"line":98,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":107,"description":"

            Sets the spacing between lines of text when\ntext() is called.

            \n

            Note: Spacing is measured in pixels.

            \n

            Calling textLeading() without an argument returns the current spacing.

            \n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // \"\\n\" starts a new line of text.\n let lines = 'one\\ntwo';\n\n // Left.\n text(lines, 10, 25);\n\n // Right.\n textLeading(30);\n text(lines, 70, 25);\n\n describe('The words \"one\" and \"two\" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":107,"params":[{"name":"leading","description":"

            spacing between lines of text in units of pixels.

            \n","type":"Number"}],"chainable":1},{"line":142,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":151,"description":"

            Sets the font size when\ntext() is called.

            \n

            Note: Font size is measured in pixels.

            \n

            Calling textSize() without an arugment returns the current size.

            \n","itemtype":"method","name":"textSize","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n textSize(12);\n text('Font Size 12', 10, 30);\n\n // Middle.\n textSize(14);\n text('Font Size 14', 10, 60);\n\n // Bottom.\n textSize(16);\n text('Font Size 16', 10, 90);\n\n describe('The text \"Font Size 12\" drawn small, \"Font Size 14\" drawn medium, and \"Font Size 16\" drawn large.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":151,"params":[{"name":"size","description":"

            size of the letters in units of pixels.

            \n","type":"Number"}],"chainable":1},{"line":188,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":197,"description":"

            Sets the style for system fonts when\ntext() is called.

            \n

            The parameter, style, can be either NORMAL, ITALIC, BOLD, or\nBOLDITALIC.

            \n

            textStyle() may be overridden by CSS styling. This function doesn't\naffect fonts loaded with loadFont().

            \n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(12);\n textAlign(CENTER);\n\n // First row.\n textStyle(NORMAL);\n text('Normal', 50, 15);\n\n // Second row.\n textStyle(ITALIC);\n text('Italic', 50, 40);\n\n // Third row.\n textStyle(BOLD);\n text('Bold', 50, 65);\n\n // Fourth row.\n textStyle(BOLDITALIC);\n text('Bold Italic', 50, 90);\n\n describe('The words \"Normal\" displayed normally, \"Italic\" in italic, \"Bold\" in bold, and \"Bold Italic\" in bold italics.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":197,"params":[{"name":"style","description":"

            styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC.

            \n","type":"Constant"}],"chainable":1},{"line":244,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":253,"description":"

            Calculates the maximum width of a string of text drawn when\ntext() is called.

            \n","itemtype":"method","name":"textWidth","params":[{"name":"str","description":"

            string of text to measure.

            \n","type":"String"}],"return":{"description":"width measured in units of pixels.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n let s = 'yoyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yoyo\" underlined.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n // \"\\n\" starts a new line.\n let s = 'yo\\nyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yo\" written twice, one copy beneath the other. The words are divided by a horizontal line.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":337,"description":"

            Calculates the ascent of the current font at its current size.

            \n

            The ascent represents the distance, in pixels, of the tallest character\nabove the baseline.

            \n","itemtype":"method","name":"textAscent","return":{"description":"ascent measured in units of pixels.","type":"Number"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.8;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and ascent.\n let a = textAscent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY - a, 23, baseY);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and ascent.\n a = textAscent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY - a, 91, baseY);\n\n describe('The letters \"dp\" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the \"d\".');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":396,"description":"

            Calculates the descent of the current font at its current size.

            \n

            The descent represents the distance, in pixels, of the character with the\nlongest descender below the baseline.

            \n","itemtype":"method","name":"textDescent","return":{"description":"descent measured in units of pixels.","type":"Number"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the font.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.9;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and descent.\n let d = textDescent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY, 23, baseY + d);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and descent.\n d = textDescent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY, 91, baseY + d);\n\n describe('The letters \"dp\" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the \"p\".');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":455,"description":"

            Helper function to measure ascent and descent.

            \n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":462,"description":"

            Sets the style for wrapping text when\ntext() is called.

            \n

            The parameter, style, can be one of the following values:

            \n

            WORD starts new lines of text at spaces. If a string of text doesn't\nhave spaces, it may overflow the text box and the canvas. This is the\ndefault style.

            \n

            CHAR starts new lines as needed to stay within the text box.

            \n

            textWrap() only works when the maximum width is set for a text box. For\nexample, calling text('Have a wonderful day', 0, 10, 100) sets the\nmaximum width to 100 pixels.

            \n

            Calling textWrap() without an argument returns the current style.

            \n","itemtype":"method","name":"textWrap","params":[{"name":"style","description":"

            text wrapping style, either WORD or CHAR.

            \n","type":"Constant"}],"return":{"description":"style","type":"String"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(WORD);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across three lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across two lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('祝你有美好的一天', 0, 10, 100);\n\n describe('The text \"祝你有美好的一天\" written across two lines.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"

            Loads a font and creates a p5.Font object.\nloadFont() can load fonts in either .otf or .ttf format. Loaded fonts can\nbe used to style text on the canvas and in HTML elements.

            \n

            The first parameter, path, is the path to a font file.\nPaths to local files should be relative. For example,\n'assets/inconsolata.otf'. The Inconsolata font used in the following\nexamples can be downloaded for free\nhere.\nPaths to remote files should be URLs. For example,\n'https://example.com/inconsolata.otf'. URLs may be blocked due to browser\nsecurity.

            \n

            The second parameter, successCallback, is optional. If a function is\npassed, it will be called once the font has loaded. The callback function\nmay use the new p5.Font object if needed.

            \n

            The third parameter, failureCallback, is also optional. If a function is\npassed, it will be called if the font fails to load. The callback function\nmay use the error\nEvent\nobject if needed.

            \n

            Fonts can take time to load. Calling loadFont() in\npreload() ensures fonts load before they're\nused in setup() or\ndraw().

            \n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"

            path of the font to be loaded.

            \n","type":"String"},{"name":"successCallback","description":"

            function called with the\n p5.Font object after it\n loads.

            \n","type":"Function","optional":true},{"name":"failureCallback","description":"

            function called with the error\n Event\n object if the font fails to load.

            \n","type":"Function","optional":true}],"return":{"description":"p5.Font object.","type":"p5.Font"},"example":["\n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n loadFont('assets/inconsolata.otf', font => {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n });\n}\n\n
            \n\n
            \n\nfunction setup() {\n loadFont('assets/inconsolata.otf', success, failure);\n}\n\nfunction success(font) {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\nfunction failure(event) {\n console.error('Oops!', event);\n}\n\n
            \n\n
            \n\nfunction preload() {\n loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n let p = createP('p5*js');\n p.style('color', 'deeppink');\n p.style('font-family', 'Inconsolata');\n p.style('font-size', '36px');\n p.position(10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":182,"description":"

            Draws text to the canvas.

            \n

            The first parameter, str, is the text to be drawn. The second and third\nparameters, x and y, set the coordinates of the text's bottom-left\ncorner. See textAlign() for other ways to\nalign text.

            \n

            The fourth and fifth parameters, maxWidth and maxHeight, are optional.\nThey set the dimensions of the invisible rectangle containing the text. By\ndefault, they set its maximum width and height. See\nrectMode() for other ways to define the\nrectangular text box. Text will wrap to fit within the text box. Text\noutside of the box won't be drawn.

            \n

            Text can be styled a few ways. Call the fill()\nfunction to set the text's fill color. Call\nstroke() and\nstrokeWeight() to set the text's outline.\nCall textSize() and\ntextFont() to set the text's size and font,\nrespectively.

            \n

            Note: WEBGL mode only supports fonts loaded with\nloadFont(). Calling\nstroke() has no effect in WEBGL mode.

            \n","itemtype":"method","name":"text","params":[{"name":"str","description":"

            text to be displayed.

            \n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"

            x-coordinate of the text box.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text box.

            \n","type":"Number"},{"name":"maxWidth","description":"

            maximum width of the text box. See\n rectMode() for\n other options.

            \n","type":"Number","optional":true},{"name":"maxHeight","description":"

            maximum height of the text box. See\n rectMode() for\n other options.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n background(200);\n text('hi', 50, 50);\n\n describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('skyblue');\n textSize(100);\n text('🌈', 0, 100);\n\n describe('A rainbow in a blue sky.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n textSize(32);\n fill(255);\n stroke(0);\n strokeWeight(4);\n text('hi', 50, 50);\n\n describe('The text \"hi\" written in white with a black outline.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('black');\n textSize(22);\n fill('yellow');\n text('rainbows', 6, 20);\n fill('cornflowerblue');\n text('rainbows', 6, 45);\n fill('tomato');\n text('rainbows', 6, 70);\n fill('limegreen');\n text('rainbows', 6, 95);\n\n describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n let s = 'The quick brown fox jumps over the lazy dog.';\n text(s, 10, 10, 70, 80);\n\n describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n rectMode(CENTER);\n let s = 'The quick brown fox jumps over the lazy dog.';\n text(s, 50, 50, 70, 80);\n\n describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textFont(font);\n textSize(32);\n textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n background(0);\n rotateY(frameCount / 30);\n text('p5*js', 0, 0);\n\n describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":335,"description":"

            Sets the font used by the text() function.

            \n

            The first parameter, font, sets the font. textFont() recognizes either\na p5.Font object or a string with the name of a\nsystem font. For example, 'Courier New'.

            \n

            The second parameter, size, is optional. It sets the font size in pixels.\nThis has the same effect as calling textSize().

            \n

            Note: WEBGL mode only supports fonts loaded with\nloadFont().

            \n","itemtype":"method","name":"textFont","return":{"description":"current font or p5 Object.","type":"Object"},"example":["\n
            \n\nfunction setup() {\n background(200);\n textFont('Courier New');\n textSize(24);\n text('hi', 35, 55);\n\n describe('The text \"hi\" written in a black, monospace font on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('black');\n fill('palegreen');\n textFont('Courier New', 10);\n text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);\n text('>', 5, 70);\n\n describe('A text prompt from a game is written in a green, monospace font on a black background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n textFont('Verdana');\n let currentFont = textFont();\n text(currentFont, 25, 50);\n\n describe('The text \"Verdana\" written in a black, sans-serif font on a gray background.');\n}\n\n
            \n\n
            \n\nlet fontRegular;\nlet fontItalic;\nlet fontBold;\n\nfunction preload() {\n fontRegular = loadFont('assets/Regular.otf');\n fontItalic = loadFont('assets/Italic.ttf');\n fontBold = loadFont('assets/Bold.ttf');\n}\n\nfunction setup() {\n background(200);\n textFont(fontRegular);\n text('I am Normal', 10, 30);\n textFont(fontItalic);\n text('I am Italic', 10, 50);\n textFont(fontBold);\n text('I am Bold', 10, 70);\n\n describe('The statements \"I am Normal\", \"I am Italic\", and \"I am Bold\" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":335,"params":[],"return":{"description":"current font or p5 Object.","type":"Object"}},{"line":418,"params":[{"name":"font","description":"

            font as a p5.Font object or a string.

            \n","type":"Object|String"},{"name":"size","description":"

            font size in pixels.

            \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":51,"description":"

            The font's underlying\nopentype.js\nfont object.

            \n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":62,"description":"

            Returns the bounding box for a string of text written using the font.

            \n

            The bounding box is the smallest rectangle that can contain a string of\ntext. font.textBounds() returns an object with the bounding box's\nlocation and size. For example, calling font.textBounds('p5*js', 5, 20)\nreturns an object in the format\n{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }. The x and y properties are\nalways the coordinates of the bounding box's top-left corner.

            \n

            The first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.

            \n

            The fourth parameter, fontSize, is optional. It sets the font size used to\ndetermine the bounding box. By default, font.textBounds() will use the\ncurrent textSize().

            \n","itemtype":"method","name":"textBounds","params":[{"name":"str","description":"

            string of text.

            \n","type":"String"},{"name":"x","description":"

            x-coordinate of the text.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text.

            \n","type":"Number"},{"name":"fontSize","description":"

            font size. Defaults to the current\n textSize().

            \n","type":"Number","optional":true}],"return":{"description":"object describing the bounding box with\n properties x, y, w, and h.","type":"Object"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 35, 53);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n\n // Display the text.\n text('p5*js', 35, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n textSize(15);\n textAlign(CENTER, CENTER);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 50, 50);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Display the text.\n text('p5*js', 50, 50);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 31, 53, 15);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n textSize(15);\n\n // Display the text.\n text('p5*js', 31, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            "],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":279,"description":"

            Returns an array of points outlining a string of text written using the\nfont.

            \n

            Each point object in the array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n{ x: 10, y: 20, alpha: 450 }.

            \n

            The first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.

            \n

            The fourth parameter, fontSize, is optional. It sets the text's font\nsize. By default, font.textToPoints() will use the current\ntextSize().

            \n

            The fifth parameter, options, is also optional. font.textToPoints()\nexpects an object with the following properties:

            \n

            sampleFactor is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.

            \n

            simplifyThreshold removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle to use when determining\nwhether two edges are collinear.

            \n","itemtype":"method","name":"textToPoints","params":[{"name":"str","description":"

            string of text.

            \n","type":"String"},{"name":"x","description":"

            x-coordinate of the text.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text.

            \n","type":"Number"},{"name":"fontSize","description":"

            font size. Defaults to the current\n textSize().

            \n","type":"Number","optional":true},{"name":"options","description":"

            object with sampleFactor and simplifyThreshold\n properties.

            \n","type":"Object","optional":true}],"return":{"description":"array of point objects, each with x, y, and alpha (path angle) properties.","type":"Array"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the point array.\n let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });\n\n // Draw a dot at each point.\n for (let p of points) {\n point(p.x, p.y);\n }\n\n describe('A set of black dots outlining the text \"p5*js\" on a gray background.');\n}\n\n
            "],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"

            Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().

            \n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use array.push(value) instead.","params":[{"name":"array","description":"

            Array to append

            \n","type":"Array"},{"name":"value","description":"

            to be added to the Array

            \n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['Mango', 'Apple', 'Papaya'];\n print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n append(myArray, 'Peach');\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"

            Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().

            \n

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

            \n

            Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.

            \n","itemtype":"method","name":"arrayCopy","deprecated":true,"deprecationMessage":"Use arr1.copyWithin(arr2) instead.","example":["\n
            \nlet src = ['A', 'B', 'C'];\nlet dst = [1, 2, 3];\nlet srcPosition = 1;\nlet dstPosition = 0;\nlet length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 , 2 , 3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n
            "],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"

            the source Array

            \n","type":"Array"},{"name":"srcPosition","description":"

            starting position in the source Array

            \n","type":"Integer"},{"name":"dst","description":"

            the destination Array

            \n","type":"Array"},{"name":"dstPosition","description":"

            starting position in the destination Array

            \n","type":"Integer"},{"name":"length","description":"

            number of Array elements to be copied

            \n","type":"Integer"}]},{"line":73,"params":[{"name":"src","description":"","type":"Array"},{"name":"dst","description":"","type":"Array"},{"name":"length","description":"","type":"Integer","optional":true}]}]},{"file":"src/utilities/array_functions.js","line":112,"description":"

            Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.

            \n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use arr1.concat(arr2) instead.","params":[{"name":"a","description":"

            first Array to concatenate

            \n","type":"Array"},{"name":"b","description":"

            second Array to concatenate

            \n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n
            \nfunction setup() {\n let arr1 = ['A', 'B', 'C'];\n let arr2 = [1, 2, 3];\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1,2,3]\n\n let arr3 = concat(arr1, arr2);\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1, 2, 3]\n print(arr3); // ['A','B','C', 1, 2, 3]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"

            Reverses the order of an array, maps to Array.reverse()

            \n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use array.reverse() instead.","params":[{"name":"list","description":"

            Array to reverse

            \n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A','B','C']\n\n reverse(myArray);\n print(myArray); // ['C','B','A']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"

            Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().

            \n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use array.pop() instead.","params":[{"name":"list","description":"

            Array to shorten

            \n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A', 'B', 'C']\n let newArray = shorten(myArray);\n print(myArray); // ['A','B','C']\n print(newArray); // ['A','B']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"

            Randomizes the order of the elements of an array. Implements\n\nFisher-Yates Shuffle Algorithm.

            \n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"

            Array to shuffle

            \n","type":"Array"},{"name":"bool","description":"

            modify passed array

            \n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n
            \nfunction setup() {\n let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n print(regularArr);\n shuffle(regularArr, true); // force modifications to passed array\n print(regularArr);\n\n // By default shuffle() returns a shuffled cloned array:\n let newArr = shuffle(regularArr);\n print(regularArr);\n print(newArr);\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"

            Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.

            \n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use array.sort() instead.","params":[{"name":"list","description":"

            Array to sort

            \n","type":"Array"},{"name":"count","description":"

            number of elements to sort, starting from 0

            \n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n
            \nfunction setup() {\n let words = ['banana', 'apple', 'pear', 'lime'];\n print(words); // ['banana', 'apple', 'pear', 'lime']\n let count = 4; // length of array\n\n words = sort(words, count);\n print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n
            \n
            \nfunction setup() {\n let numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n let count = 5; // Less than the length of the array\n\n numbers = sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"

            Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)

            \n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use array.splice() instead.","params":[{"name":"list","description":"

            Array to splice into

            \n","type":"Array"},{"name":"value","description":"

            value to be spliced in

            \n","type":"Any"},{"name":"position","description":"

            in the array from which to insert data

            \n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = [0, 1, 2, 3, 4];\n let insArray = ['A', 'B', 'C'];\n print(myArray); // [0, 1, 2, 3, 4]\n print(insArray); // ['A','B','C']\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"

            Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.

            \n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use array.slice() instead.","params":[{"name":"list","description":"

            Array to extract from

            \n","type":"Array"},{"name":"start","description":"

            position to begin

            \n","type":"Integer"},{"name":"count","description":"

            number of values to extract

            \n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = [1, 2, 3, 4, 5];\n print(myArray); // [1, 2, 3, 4, 5]\n\n let sub1 = subset(myArray, 0, 3);\n let sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"

            Converts a string to its floating point representation. The contents of a\nstring must resemble a number, or NaN (not a number) will be returned.\nFor example, float(\"1234.56\") evaluates to 1234.56, but float(\"giraffe\")\nwill return NaN.

            \n

            When an array of values is passed in, then an array of floats of the same\nlength is returned.

            \n","itemtype":"method","name":"float","params":[{"name":"str","description":"

            float string to parse

            \n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n
            \nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\ndescribe('20-by-20 white ellipse in the center of the canvas');\n
            \n
            \nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":42,"description":"

            Converts a boolean, string, or float to its integer representation.\nWhen an array of values is passed in, then an int array of the same length\nis returned.

            \n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n
            \nprint(int('10')); // 10\nprint(int(10.31)); // 10\nprint(int(-10)); // -10\nprint(int(true)); // 1\nprint(int(false)); // 0\nprint(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\nprint(int(Infinity)); // Infinity\nprint(int('-Infinity')); // -Infinity\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":42,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number"},{"name":"radix","description":"

            the radix to convert to (default: 10)

            \n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":64,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"},{"name":"radix","description":"","type":"Integer","optional":true}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":86,"description":"

            Converts a boolean, string or number to its string representation.\nWhen an array of values is passed in, then an array of strings of the same\nlength is returned.

            \n","itemtype":"method","name":"str","params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n
            \nprint(str('10')); // \"10\"\nprint(str(10.31)); // \"10.31\"\nprint(str(-10)); // \"-10\"\nprint(str(true)); // \"true\"\nprint(str(false)); // \"false\"\nprint(str([true, '10.3', 9.8])); // [ \"true\", \"10.3\", \"9.8\" ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":112,"description":"

            Converts a number or string to its boolean representation.\nFor a number, any non-zero value (positive or negative) evaluates to true,\nwhile zero evaluates to false. For a string, the value \"true\" evaluates to\ntrue, while any other value evaluates to false. When an array of number or\nstring values is passed in, then a array of booleans of the same length is\nreturned.

            \n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n
            \nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean('true')); // true\nprint(boolean('abcd')); // false\nprint(boolean([0, 12, 'true'])); // [false, true, true]\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":144,"description":"

            Converts a number, string representation of a number, or boolean to its byte\nrepresentation. A byte can be only a whole number between -128 and 127, so\nwhen a value outside of this range is converted, it wraps around to the\ncorresponding byte representation. When an array of number, string or boolean\nvalues is passed in, then an array of bytes the same length is returned.

            \n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n
            \nprint(byte(127)); // 127\nprint(byte(128)); // -128\nprint(byte(23.4)); // 23\nprint(byte('23.4')); // 23\nprint(byte('hello')); // NaN\nprint(byte(true)); // 1\nprint(byte([0, 255, '100'])); // [0, -1, 100]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":144,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":166,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":180,"description":"

            Converts a number or string to its corresponding single-character\nstring representation. If a string parameter is provided, it is first\nparsed as an integer and then translated into a single-character string.\nWhen an array of number or string values is passed in, then an array of\nsingle-character strings of the same length is returned.

            \n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n
            \nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":180,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":199,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":214,"description":"

            Converts a single-character string to its corresponding integer\nrepresentation. When an array of single-character string values is passed\nin, then an array of integers of the same length is returned.

            \n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n
            \nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":214,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":230,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":243,"description":"

            Converts a number to a string in its equivalent hexadecimal notation. If a\nsecond parameter is passed, it is used to set the number of characters to\ngenerate in the hexadecimal notation. When an array is passed in, an\narray of strings in hexadecimal notation of the same length is returned.

            \n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n
            \nprint(hex(255)); // \"000000FF\"\nprint(hex(255, 6)); // \"0000FF\"\nprint(hex([0, 127, 255], 6)); // [ \"000000\", \"00007F\", \"0000FF\" ]\nprint(Infinity); // \"FFFFFFFF\"\nprint(-Infinity); // \"00000000\"\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":243,"params":[{"name":"n","description":"

            value to parse

            \n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":263,"params":[{"name":"ns","description":"

            array of values to parse

            \n","type":"Number[]"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":293,"description":"

            Converts a string representation of a hexadecimal number to its equivalent\ninteger value. When an array of strings in hexadecimal notation is passed\nin, an array of integers of the same length is returned.

            \n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n
            \nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":293,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":309,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"

            Combines an array of Strings into one String, each separated by the\ncharacter(s) used for the separator parameter. To join arrays of ints or\nfloats, it's necessary to first convert them to Strings using nf() or\nnfs().

            \n","itemtype":"method","name":"join","params":[{"name":"list","description":"

            array of Strings to be joined

            \n","type":"Array"},{"name":"separator","description":"

            String to be placed between each item

            \n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n
            \n\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\ndescribe('“Hello world!” displayed middle left of canvas.');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":41,"description":"

            This function is used to apply a regular expression to a piece of text,\nand return matching groups (elements found inside parentheses) as a\nString array. If there are no matches, a null value will be returned.\nIf no groups are specified in the regular expression, but the sequence\nmatches, an array of length 1 (with the matched text as the first element\nof the array) will be returned.

            \n

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

            \n

            If there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nElement [0] of a regular expression match returns the entire matching\nstring, and the match groups start at element [1] (the first group is [1],\nthe second [2], and so on).

            \n","itemtype":"method","name":"match","params":[{"name":"str","description":"

            the String to be searched

            \n","type":"String"},{"name":"regexp","description":"

            the regexp to be used for matching

            \n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n
            \n\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\ndescribe('“p5js*” displayed middle left of canvas.');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":79,"description":"

            This function is used to apply a regular expression to a piece of text,\nand return a list of matching groups (elements found inside parentheses)\nas a two-dimensional String array. If there are no matches, a null value\nwill be returned. If no groups are specified in the regular expression,\nbut the sequence matches, a two dimensional array is still returned, but\nthe second dimension is only of length one.

            \n

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

            \n

            If there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nAssuming a loop with counter variable i, element [i][0] of a regular\nexpression match returns the entire matching string, and the match groups\nstart at element [i][1] (the first group is [i][1], the second [i][2],\nand so on).

            \n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"

            the String to be searched

            \n","type":"String"},{"name":"regexp","description":"

            the regexp to be used for matching

            \n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n
            \n\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":126,"description":"

            Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.

            \n

            The values for the digits, left, and right parameters should always\nbe positive integers.

            \n

            (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.

            \n

            For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.

            \n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textSize(16);\n\n text(nf(num1, 4, 2), 10, 30);\n text(nf(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“0321.00” middle top, “-1321.00” middle bottom canvas');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":126,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number|String"},{"name":"left","description":"

            number of digits to the left of the\n decimal point

            \n","type":"Integer|String","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":171,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"left","description":"","type":"Integer|String","optional":true},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":216,"description":"

            Utility function for formatting numbers into strings and placing\nappropriate commas to mark units of 1000. There are two versions: one\nfor formatting ints, and one for formatting an array of ints. The value\nfor the right parameter should always be a positive integer.

            \n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num = 11253106.115;\n let numArr = [1, 1, 2];\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfc(num, 4), 10, 30);\n text(nfc(numArr, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“11,253,106.115” top middle and “1.00,1.00,2.00” displayed bottom mid');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":216,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number|String"},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":253,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":289,"description":"

            Utility function for formatting numbers into strings. Similar to nf() but\nputs a \"+\" in front of positive numbers and a \"-\" in front of negative\nnumbers. There are two versions: one for formatting floats, and one for\nformatting ints. The values for left, and right parameters\nshould always be positive integers.

            \n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 11253106.115;\n let num2 = -11253106.115;\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfp(num1, 4, 2), 10, 30);\n text(nfp(num2, 4, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“+11253106.11” top middle and “-11253106.11” displayed bottom middle');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":289,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number"},{"name":"left","description":"

            number of digits to the left of the decimal\n point

            \n","type":"Integer","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":329,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":350,"description":"

            Utility function for formatting numbers into strings. Similar to nf() but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.

            \n

            The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative\nnumber with some negative number (See the example to get a clear picture).\nThere are two versions: one for formatting float, and one for formatting int.

            \n

            The values for the digits, left, and right parameters should always be positive integers.

            \n

            (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.

            \n

            (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.

            \n

            For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.

            \n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textSize(16);\n\n // nfs() aligns num1 (positive number) with num2 (negative number) by\n // adding a blank space in front of the num1 (positive number)\n // [left = 4] in num1 add one 0 in front, to align the digits with num2\n // [right = 2] in num1 and num2 adds two 0's after both numbers\n // To see the differences check the example of nf() too.\n text(nfs(num1, 4, 2), 10, 30);\n text(nfs(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“0321.00” top middle and “-1321.00” displayed bottom middle');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":350,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number"},{"name":"left","description":"

            number of digits to the left of the decimal\n point

            \n","type":"Integer","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":406,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":427,"description":"

            The split() function maps to String.split(), it breaks a String into\npieces using a character or string as the delimiter. The delim parameter\nspecifies the character or characters that mark the boundaries between\neach piece. A String[] array is returned that contains each of the pieces.

            \n

            The splitTokens() function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.

            \n","itemtype":"method","name":"split","params":[{"name":"value","description":"

            the String to be split

            \n","type":"String"},{"name":"delim","description":"

            the String used to separate the data

            \n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n
            \n\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\ndescribe('“Pat” top left, “Xio” mid left, and “Alex” displayed bottom left');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":458,"description":"

            The splitTokens() function splits a String at one or many character\ndelimiters or \"tokens.\" The delim parameter specifies the character or\ncharacters to be used as a boundary.

            \n

            If no delim characters are specified, any whitespace character is used to\nsplit. Whitespace characters include tab (\\t), line feed (\\n), carriage\nreturn (\\r), form feed (\\f), and space.

            \n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"

            the String to be split

            \n","type":"String"},{"name":"delim","description":"

            list of individual Strings that will be used as\n separators

            \n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n
            \n\nfunction setup() {\n let myStr = 'Mango, Banana, Lime';\n let myStrArr = splitTokens(myStr, ',');\n\n print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":511,"description":"

            Removes whitespace characters from the beginning and end of a String. In\naddition to standard whitespace characters such as space, carriage return,\nand tab, this function also removes the Unicode \"nbsp\" character.

            \n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n
            \n\nlet string = trim(' No new lines\\n ');\ntext(string + ' here', 2, 50);\ndescribe('“No new lines here” displayed center canvas');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":511,"params":[{"name":"str","description":"

            a String to be trimmed

            \n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":529,"params":[{"name":"strs","description":"

            an Array of Strings to be trimmed

            \n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"

            p5.js communicates with the clock on your computer. The day() function\nreturns the current day as a value from 1 - 31.

            \n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n
            \n\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\ndescribe('Current day is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":29,"description":"

            p5.js communicates with the clock on your computer. The hour() function\nreturns the current hour as a value from 0 - 23.

            \n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n
            \n\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\ndescribe('Current hour is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":48,"description":"

            p5.js communicates with the clock on your computer. The minute() function\nreturns the current minute as a value from 0 - 59.

            \n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n
            \n\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\ndescribe('Current minute is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":67,"description":"

            Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when setup() is called). This information is often\nused for timing events and animation sequences.

            \n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n
            \n\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\ndescribe('number of milliseconds since sketch has started displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":92,"description":"

            p5.js communicates with the clock on your computer. The month() function\nreturns the current month as a value from 1 - 12.

            \n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n
            \n\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\ndescribe('Current month is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":112,"description":"

            p5.js communicates with the clock on your computer. The second() function\nreturns the current second as a value from 0 - 59.

            \n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n
            \n\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\ndescribe('Current second is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":131,"description":"

            p5.js communicates with the clock on your computer. The year() function\nreturns the current year as an integer (2014, 2015, 2016, etc).

            \n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n
            \n\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\ndescribe('Current year is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"

            Starts creating a new p5.Geometry. Subsequent shapes drawn will be added\nto the geometry and then returned when\nendGeometry() is called. One can also use\nbuildGeometry() to pass a function that\ndraws shapes.

            \n

            If you need to draw complex shapes every frame which don't change over time,\ncombining them upfront with beginGeometry() and endGeometry() and then\ndrawing that will run faster than repeatedly drawing the individual pieces.

            \n","itemtype":"method","name":"beginGeometry","example":["\n
            \n\nlet shapes;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n makeShapes();\n}\n\nfunction makeShapes() {\n beginGeometry();\n scale(0.18);\n\n push();\n translate(100, -50);\n scale(0.5);\n rotateX(PI/4);\n cone();\n pop();\n cone();\n\n beginShape();\n vertex(-20, -50);\n quadraticVertex(\n -40, -70,\n 0, -60\n );\n endShape();\n\n beginShape(TRIANGLE_STRIP);\n for (let y = 20; y <= 60; y += 10) {\n for (let x of [20, 60]) {\n vertex(x, y);\n }\n }\n endShape();\n\n beginShape();\n vertex(-100, -120);\n vertex(-120, -110);\n vertex(-105, -100);\n endShape();\n\n shapes = endGeometry();\n}\n\nfunction draw() {\n background(255);\n lights();\n orbitControl();\n model(shapes);\n}\n\n
            "],"alt":"A series of different flat, curved, and 3D shapes floating in space.","class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":89,"description":"

            Finishes creating a new p5.Geometry that was\nstarted using beginGeometry(). One can also\nuse buildGeometry() to pass a function that\ndraws shapes.

            \n","itemtype":"method","name":"endGeometry","return":{"description":"The model that was built.","type":"p5.Geometry"},"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":102,"description":"

            Creates a new p5.Geometry that contains all\nthe shapes drawn in a provided callback function. The returned combined shape\ncan then be drawn all at once using model().

            \n

            If you need to draw complex shapes every frame which don't change over time,\ncombining them with buildGeometry() once and then drawing that will run\nfaster than repeatedly drawing the individual pieces.

            \n

            One can also draw shapes directly between\nbeginGeometry() and\nendGeometry() instead of using a callback\nfunction.

            \n","itemtype":"method","name":"buildGeometry","params":[{"name":"callback","description":"

            A function that draws shapes.

            \n","type":"Function"}],"return":{"description":"The model that was built from the callback function.","type":"p5.Geometry"},"example":["\n
            \n\nlet particles;\nlet button;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n button = createButton('New');\n button.mousePressed(makeParticles);\n makeParticles();\n}\n\nfunction makeParticles() {\n if (particles) freeGeometry(particles);\n\n particles = buildGeometry(() => {\n for (let i = 0; i < 60; i++) {\n push();\n translate(\n randomGaussian(0, 20),\n randomGaussian(0, 20),\n randomGaussian(0, 20)\n );\n sphere(5);\n pop();\n }\n });\n}\n\nfunction draw() {\n background(255);\n noStroke();\n lights();\n orbitControl();\n model(particles);\n}\n\n
            "],"alt":"A cluster of spheres.","class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":167,"description":"

            Clears the resources of a model to free up browser memory. A model whose\nresources have been cleared can still be drawn, but the first time it is\ndrawn again, it might take longer.

            \n

            This method works on models generated with\nbuildGeometry() as well as those loaded\nfrom loadModel().

            \n","itemtype":"method","name":"freeGeometry","params":[{"name":"geometry","description":"

            The geometry whose resources should be freed

            \n","type":"p5.Geometry"}],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":183,"description":"

            Draw a plane with given a width and height

            \n","itemtype":"method","name":"plane","params":[{"name":"width","description":"

            width of the plane

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the plane

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            Optional number of triangle\n subdivisions in x-dimension

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            Optional number of triangle\n subdivisions in y-dimension

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white plane with black wireframe lines');\n}\n\nfunction draw() {\n background(200);\n plane(50, 50);\n}\n\n
            "],"alt":"Nothing displayed on canvas\nRotating interior view of a box with sides that change color.\n3d red and green gradient.\nRotating interior view of a cylinder with sides that change color.\nRotating view of a cylinder with sides that change color.\n3d red and green gradient.\nrotating view of a multi-colored cylinder with concave sides.","class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":260,"description":"

            Draw a box with given width, height and depth

            \n","itemtype":"method","name":"box","params":[{"name":"width","description":"

            width of the box

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the box

            \n","type":"Number","optional":true},{"name":"depth","description":"

            depth of the box

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            Optional number of triangle\n subdivisions in x-dimension

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            Optional number of triangle\n subdivisions in y-dimension

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a white box rotating in 3D space');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(50);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":381,"description":"

            Draw a sphere with given radius.

            \n

            DetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a sphere. More subdivisions make the sphere seem\nsmoother. The recommended maximum values are both 24. Using a value greater\nthan 24 may cause a warning or slow down the browser.

            \n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"

            radius of circle

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            optional number of subdivisions in x-dimension

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            optional number of subdivisions in y-dimension

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a sphere with radius 40\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white sphere with black wireframe lines');\n}\n\nfunction draw() {\n background(205, 102, 94);\n sphere(40);\n}\n\n
            ","\n
            \n\nlet detailX;\n// slide to see how detailX works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a white sphere with low detail on the x-axis, including a slider to adjust detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, detailX.value(), 16);\n}\n\n
            ","\n
            \n\nlet detailY;\n// slide to see how detailY works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a white sphere with low detail on the y-axis, including a slider to adjust detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, 16, detailY.value());\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":583,"description":"

            Draw a cylinder with given radius and height

            \n

            DetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother.\nThe recommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.

            \n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"

            radius of the surface

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the cylinder

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of subdivisions in x-dimension;\n default is 24

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of subdivisions in y-dimension;\n default is 1

            \n","type":"Integer","optional":true},{"name":"bottomCap","description":"

            whether to draw the bottom of the cylinder

            \n","type":"Boolean","optional":true},{"name":"topCap","description":"

            whether to draw the top of the cylinder

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a rotating white cylinder');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cylinder(20, 50);\n}\n\n
            ","\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, detailX.value(), 1);\n}\n\n
            ","\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(1, 16, 1);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, 16, detailY.value());\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":707,"description":"

            Draw a cone with given radius and height

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the cone seem smoother. The\nrecommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.

            \n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"

            radius of the bottom surface

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the cone

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of segments,\n the more segments the smoother geometry\n default is 24

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of segments,\n the more segments the smoother geometry\n default is 1

            \n","type":"Integer","optional":true},{"name":"cap","description":"

            whether to draw the base of the cone

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a rotating white cone');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cone(40, 70);\n}\n\n
            ","\n
            \n\n// slide to see how detailx works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 16, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white cone with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, detailX.value(), 16);\n}\n\n
            ","\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white cone with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, 16, detailY.value());\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":820,"description":"

            Draw an ellipsoid with given radius

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother.\nAvoid detail number above 150, it may crash the browser.

            \n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"

            x-radius of ellipsoid

            \n","type":"Number","optional":true},{"name":"radiusy","description":"

            y-radius of ellipsoid

            \n","type":"Number","optional":true},{"name":"radiusz","description":"

            z-radius of ellipsoid

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('a white 3d ellipsoid');\n}\n\nfunction draw() {\n background(205, 105, 94);\n ellipsoid(30, 40, 40);\n}\n\n
            ","\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(2, 24, 12);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n\n
            ","\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(2, 24, 6);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 105, 9);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, 12, detailY.value());\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":952,"description":"

            Draw a torus with given radius and tube radius

            \n

            DetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a torus. More subdivisions make the torus appear to be smoother.\nThe default and maximum values for detailX and detailY are 24 and 16, respectively.\nSetting them to relatively small values like 4 and 6 allows you to create new\nshapes other than a torus.

            \n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"

            radius of the whole ring

            \n","type":"Number","optional":true},{"name":"tubeRadius","description":"

            radius of the tube

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a rotating white torus');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n torus(30, 15);\n}\n\n
            ","\n
            \n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n describe(\n 'a rotating white torus with limited X detail, with a slider that adjusts detailX'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, detailX.value(), 12);\n}\n\n
            ","\n
            \n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n describe(\n 'a rotating white torus with limited Y detail, with a slider that adjusts detailY'\n );\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, 16, detailY.value());\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/GeometryBuilder.js","line":80,"description":"

            Adds geometry from the renderer's immediate mode into the builder's\ncombined geometry.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":114,"description":"

            Adds geometry from the renderer's retained mode into the builder's\ncombined geometry.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":122,"description":"

            Cleans up the state of the renderer and returns the combined geometry that\nwas built.

            \n","return":{"description":"p5.Geometry The flattened, combined geometry"},"class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":133,"description":"

            Keeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/interaction.js","line":11,"description":"

            Allows movement around a 3D sketch using a mouse or trackpad or touch.\nLeft-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch, right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation, and using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse/touch movement along the X and Y axes.\nCalling this function without parameters is equivalent to calling\norbitControl(1,1). To reverse direction of movement in either axis,\nenter a negative number for sensitivity.

            \n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"

            sensitivity to mouse movement along X axis

            \n","type":"Number","optional":true},{"name":"sensitivityY","description":"

            sensitivity to mouse movement along Y axis

            \n","type":"Number","optional":true},{"name":"sensitivityZ","description":"

            sensitivity to scroll movement along Z axis

            \n","type":"Number","optional":true},{"name":"options","description":"

            An optional object that can contain additional settings,\ndisableTouchActions - Boolean, default value is true.\nSetting this to true makes mobile interactions smoother by preventing\naccidental interactions with the page while orbiting. But if you're already\ndoing it via css or want the default touch actions, consider setting it to false.\nfreeRotation - Boolean, default value is false.\nBy default, horizontal movement of the mouse or touch pointer rotates the camera\naround the y-axis, and vertical movement rotates the camera around the x-axis.\nBut if setting this option to true, the camera always rotates in the direction\nthe pointer is moving. For zoom and move, the behavior is the same regardless of\ntrue/false.

            \n","type":"Object","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n describe(\n 'Camera orbits around a box when mouse is hold-clicked & then moved.'\n );\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\nfunction draw() {\n background(200);\n\n // If you execute the line commented out instead of next line, the direction of rotation\n // will be the direction the mouse or touch pointer moves, not around the X or Y axis.\n orbitControl();\n // orbitControl(1, 1, 1, {freeRotation: true});\n\n rotateY(0.5);\n box(30, 50);\n}\n\n
            "],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"3D","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":378,"description":"

            debugMode() helps visualize 3D space by adding a grid to indicate where the\n‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z\ndirections. This function can be called without parameters to create a\ndefault grid and axes icon, or it can be called according to the examples\nabove to customize the size and position of the grid and/or axes icon. The\ngrid is drawn using the most recently set stroke color and weight. To\nspecify these parameters, add a call to stroke() and strokeWeight()\njust before the end of the draw() loop.

            \n

            By default, the grid will run through the origin (0,0,0) of the sketch\nalong the XZ plane\nand the axes icon will be offset from the origin. Both the grid and axes\nicon will be sized according to the current canvas size. Note that because the\ngrid runs parallel to the default camera view, it is often helpful to use\ndebugMode along with orbitControl to allow full view of the grid.

            \n","itemtype":"method","name":"debugMode","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode();\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(GRID);\n describe('a 3D box is centered on a grid in a 3D sketch.');\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(AXES);\n describe(\n 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(GRID, 100, 10, 0, 0, 0);\n describe('a 3D box is centered on a grid in a 3D sketch');\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'\n );\n}\n\nfunction draw() {\n noStroke();\n background(200);\n orbitControl();\n box(15, 30);\n // set the stroke color and weight for the grid!\n stroke(255, 0, 150);\n strokeWeight(0.8);\n}\n\n
            "],"alt":"a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z.","class":"p5","module":"3D","submodule":"Interaction","overloads":[{"line":378,"params":[]},{"line":527,"params":[{"name":"mode","description":"

            either GRID or AXES

            \n","type":"Constant"}]},{"line":532,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"

            size of one side of the grid

            \n","type":"Number","optional":true},{"name":"gridDivisions","description":"

            number of divisions in the grid

            \n","type":"Number","optional":true},{"name":"xOff","description":"

            X axis offset from origin (0,0,0)

            \n","type":"Number","optional":true},{"name":"yOff","description":"

            Y axis offset from origin (0,0,0)

            \n","type":"Number","optional":true},{"name":"zOff","description":"

            Z axis offset from origin (0,0,0)

            \n","type":"Number","optional":true}]},{"line":542,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"

            size of axes icon

            \n","type":"Number","optional":true},{"name":"xOff","description":"","type":"Number","optional":true},{"name":"yOff","description":"","type":"Number","optional":true},{"name":"zOff","description":"","type":"Number","optional":true}]},{"line":551,"params":[{"name":"gridSize","description":"","type":"Number","optional":true},{"name":"gridDivisions","description":"","type":"Number","optional":true},{"name":"gridXOff","description":"","type":"Number","optional":true},{"name":"gridYOff","description":"","type":"Number","optional":true},{"name":"gridZOff","description":"","type":"Number","optional":true},{"name":"axesSize","description":"","type":"Number","optional":true},{"name":"axesXOff","description":"","type":"Number","optional":true},{"name":"axesYOff","description":"","type":"Number","optional":true},{"name":"axesZOff","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/interaction.js","line":602,"description":"

            Turns off debugMode() in a 3D sketch.

            \n","itemtype":"method","name":"noDebugMode","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n normalMaterial();\n debugMode();\n describe(\n 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'\n );\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n
            "],"alt":"a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z. the grid and icon disappear when the\nspacebar is pressed.","class":"p5","module":"3D","submodule":"Interaction"},{"file":"src/webgl/light.js","line":10,"description":"

            Creates an ambient light with the given color.

            \n

            Ambient light does not come from a specific direction.\nObjects are evenly lit from all sides. Ambient lights are\nalmost always used in combination with other types of lights.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('sphere with coral color under black light');\n}\nfunction draw() {\n background(100);\n ambientLight(0); // black light (no light)\n ambientMaterial(255, 127, 80); // coral material\n sphere(40);\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('sphere with coral color under white light');\n}\nfunction draw() {\n background(100);\n ambientLight(255); // white light\n ambientMaterial(255, 127, 80); // coral material\n sphere(40);\n}\n\n
            ","\n
            \n\nfunction setup() {\n createCanvas(100,100,WEBGL);\n camera(0,-100,300);\n}\nfunction draw() {\n background(230);\n ambientMaterial(237,34,93); //Pink Material\n ambientLight(mouseY);\n //As you move the mouse up to down it changes from no ambient light to full ambient light.\n rotateY(millis()/2000);\n box(100);\n}\n\n
            "],"alt":"pink ambient material cube under the ambient light","class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":10,"params":[{"name":"v1","description":"

            red or hue value relative to\n the current color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value\n relative to the current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value\n relative to the current color range

            \n","type":"Number"},{"name":"alpha","description":"

            alpha value relative to current\n color range (default is 0-255)

            \n","type":"Number","optional":true}],"chainable":1},{"line":92,"params":[{"name":"gray","description":"

            number specifying value between\n white and black

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":100,"params":[{"name":"value","description":"

            a color string

            \n","type":"String"}],"chainable":1},{"line":106,"params":[{"name":"values","description":"

            an array containing the red,green,blue &\n and alpha components of the color

            \n","type":"Number[]"}],"chainable":1},{"line":113,"params":[{"name":"color","description":"

            color as a p5.Color

            \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":134,"description":"

            Sets the color of the specular highlight of a non-ambient light\n(i.e. all lights except ambientLight()).

            \n

            specularColor() affects only the lights which are created after\nit in the code.

            \n

            This function is used in combination with\nspecularMaterial().\nIf a geometry does not use specularMaterial(), this function\nwill have no effect.

            \n

            The default color is white (255, 255, 255), which is used if\nspecularColor() is not explicitly called.

            \n

            Note: specularColor is equivalent to the Processing function\nlightSpecular.

            \n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n
            \n\nlet setRedSpecularColor = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe(\n 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'\n );\n}\n\nfunction draw() {\n background(0);\n\n ambientLight(60);\n\n // add a point light to showcase specular color\n // -- use mouse location to position the light\n let lightPosX = mouseX - width / 2;\n let lightPosY = mouseY - height / 2;\n // -- set the light's specular color\n if (setRedSpecularColor) {\n specularColor(255, 0, 0); // red specular highlight\n }\n // -- create the light\n pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light\n\n // use specular material with high shininess\n specularMaterial(150);\n shininess(50);\n\n sphere(30, 64, 64);\n}\n\nfunction mouseClicked() {\n setRedSpecularColor = !setRedSpecularColor;\n}\n\n
            "],"alt":"Sphere with specular highlight. Clicking the mouse toggles the\nspecular highlight color between red and the default white.","class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":134,"params":[{"name":"v1","description":"

            red or hue value relative to\n the current color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value\n relative to the current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value\n relative to the current color range

            \n","type":"Number"}],"chainable":1},{"line":207,"params":[{"name":"gray","description":"

            number specifying value between\n white and black

            \n","type":"Number"}],"chainable":1},{"line":214,"params":[{"name":"value","description":"

            color as a CSS string

            \n","type":"String"}],"chainable":1},{"line":220,"params":[{"name":"values","description":"

            color as an array containing the\n red, green, and blue components

            \n","type":"Number[]"}],"chainable":1},{"line":227,"params":[{"name":"color","description":"

            color as a p5.Color

            \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":246,"description":"

            Creates a directional light with the given color and direction.

            \n

            Directional light comes from one direction.\nThe direction is specified as numbers inclusively between -1 and 1.\nFor example, setting the direction as (0, -1, 0) will cause the\ngeometry to be lit from below (since the light will be facing\ndirectly upwards). Similarly, setting the direction as (1, 0, 0)\nwill cause the geometry to be lit from the left (since the light\nwill be facing directly rightwards).

            \n

            Directional lights do not have a specific point of origin, and\ntherefore cannot be positioned closer or farther away from a geometry.

            \n

            A maximum of 5 directional lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n //move your mouse to change light direction\n let dirX = (mouseX / width - 0.5) * 2;\n let dirY = (mouseY / height - 0.5) * 2;\n directionalLight(250, 250, 250, -dirX, -dirY, -1);\n noStroke();\n sphere(40);\n}\n\n
            "],"alt":"scene with sphere and directional light. The direction of\nthe light is controlled with the mouse position.","class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":246,"params":[{"name":"v1","description":"

            red or hue value relative to the current\n color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value relative to the\n current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value relative to the\n current color range

            \n","type":"Number"},{"name":"x","description":"

            x component of direction (inclusive range of -1 to 1)

            \n","type":"Number"},{"name":"y","description":"

            y component of direction (inclusive range of -1 to 1)

            \n","type":"Number"},{"name":"z","description":"

            z component of direction (inclusive range of -1 to 1)

            \n","type":"Number"}],"chainable":1},{"line":304,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"direction","description":"

            direction of light as a\n p5.Vector

            \n","type":"p5.Vector"}],"chainable":1},{"line":314,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":324,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"direction","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":373,"description":"

            Creates a point light with the given color and position.

            \n

            A point light emits light from a single point in all directions.\nBecause the light is emitted from a specific point (position),\nit has a different effect when it is positioned farther vs. nearer\nan object.

            \n

            A maximum of 5 point lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and point light. The position of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n // move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 ----------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2 ----------- width/2,height/2\n pointLight(250, 250, 250, locX, locY, 50);\n noStroke();\n sphere(40);\n}\n\n
            "],"alt":"scene with sphere and point light. The position of\nthe light is controlled with the mouse position.","class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":373,"params":[{"name":"v1","description":"

            red or hue value relative to the current\n color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value relative to the\n current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value relative to the\n current color range

            \n","type":"Number"},{"name":"x","description":"

            x component of position

            \n","type":"Number"},{"name":"y","description":"

            y component of position

            \n","type":"Number"},{"name":"z","description":"

            z component of position

            \n","type":"Number"}],"chainable":1},{"line":432,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"

            of light as a p5.Vector

            \n","type":"p5.Vector"}],"chainable":1},{"line":441,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":451,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":497,"description":"

            Creates an image light with the given image.

            \n

            The image light simulates light from all the directions.\nThis is done by using the image as a texture for an infinitely\nlarge sphere light. This sphere contains\nor encapsulates the whole scene/drawing.\nIt will have different effect for varying shininess of the\nobject in the drawing.\nUnder the hood it is mainly doing 2 types of calculations,\nthe first one is creating an irradiance map the\nenvironment map of the input image.\nThe second one is managing reflections based on the shininess\nor roughness of the material used in the scene.

            \n

            Note: The image's diffuse light will be affected by fill()\nand the specular reflections will be affected by specularMaterial()\nand shininess().

            \n","itemtype":"method","name":"imageLight","params":[{"name":"img","description":"

            image for the background

            \n","type":"p5.image"}],"example":["\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/outdoor_image.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);\n perspective(PI/3, 1, 5, 500);\n}\nfunction draw() {\n background(220);\n\n push();\n camera(0, 0, 1, 0, 0, 0, 0, 1, 0);\n ortho(-1, 1, -1, 1, 0, 1);\n noLights();\n noStroke();\n texture(img);\n plane(2);\n pop();\n\n ambientLight(50);\n imageLight(img);\n specularMaterial(20);\n noStroke();\n rotateX(frameCount * 0.005);\n rotateY(frameCount * 0.005);\n box(50);\n}\n\n
            ","\n
            \n\nlet img;\nlet slider;\n\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 400, 100, 1);\n slider.position(0, height);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);\n perspective(PI/3, 1, 5, 500);\n}\nfunction draw() {\n background(220);\n\n push();\n camera(0, 0, 1, 0, 0, 0, 0, 1, 0);\n ortho(-1, 1, -1, 1, 0, 1);\n noLights();\n noStroke();\n texture(img);\n plane(2);\n pop();\n\n ambientLight(50);\n imageLight(img);\n specularMaterial(20);\n shininess(slider.value());\n noStroke();\n sphere(30);\n}\n\n
            "],"alt":"light with slider having a slider for varying roughness","class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":602,"description":"

            The panorama(img) method transforms images containing\n360-degree content, such as maps or HDRIs, into immersive\n3D backgrounds that surround your scene. This is similar to calling\nbackground(color); call panorama(img) before drawing your\nscene to create a 360-degree background from your image. It\noperates on the concept of sphere mapping, where the image is\nmapped onto an infinitely large sphere based on the angles of the\ncamera.

            \n

            To enable 360-degree viewing, either use orbitControl() or try changing\nthe orientation of the camera to see different parts of the background.

            \n","itemtype":"method","name":"panorama","params":[{"name":"img","description":"

            A 360-degree image to use as a background panorama

            \n","type":"p5.Image"}],"example":["\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n}\nfunction draw() {\n panorama(img);\n imageMode(CENTER);\n orbitControl();\n noStroke();\n push();\n imageLight(img);\n specularMaterial('green');\n shininess(200);\n metalness(100);\n sphere(25);\n pop();\n}\n\n
            "],"alt":"The image transformed into a panoramic scene.","class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":649,"description":"

            Places an ambient and directional light in the scene.\nThe lights are set to ambientLight(128, 128, 128) and\ndirectionalLight(128, 128, 128, 0, 0, -1).

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"lights","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('the light is partially ambient and partially directional');\n}\nfunction draw() {\n background(0);\n lights();\n rotateX(millis() / 1000);\n rotateY(millis() / 1000);\n rotateZ(millis() / 1000);\n box();\n}\n\n
            "],"alt":"the light is partially ambient and partially directional","class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":693,"description":"

            Sets the falloff rate for pointLight()\nand spotLight().

            \n

            lightFalloff() affects only the lights which are created after it\nin the code.

            \n

            The constant, linear, an quadratic parameters are used to calculate falloff as follows:

            \n

            d = distance from light position to vertex position

            \n

            falloff = 1 / (CONSTANT + d * LINEAR + (d * d) * QUADRATIC)

            \n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"

            CONSTANT value for determining falloff

            \n","type":"Number"},{"name":"linear","description":"

            LINEAR value for determining falloff

            \n","type":"Number"},{"name":"quadratic","description":"

            QUADRATIC value for determining falloff

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe(\n 'Two spheres with different falloff values show different intensity of light'\n );\n}\nfunction draw() {\n background(125);\n\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n locX /= 2; // half scale\n\n lightFalloff(1, 0, 0);\n push();\n translate(-25, 0, 0);\n pointLight(250, 250, 250, locX - 25, locY, 50);\n sphere(20);\n pop();\n\n lightFalloff(0.97, 0.03, 0);\n push();\n translate(25, 0, 0);\n pointLight(250, 250, 250, locX + 25, locY, 50);\n sphere(20);\n pop();\n}\n\n
            "],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":794,"description":"

            Creates a spot light with the given color, position,\nlight direction, angle, and concentration.

            \n

            Like a pointLight(), a spotLight()\nemits light from a specific point (position). It has a different effect\nwhen it is positioned farther vs. nearer an object.

            \n

            However, unlike a pointLight(), the light is emitted in one direction\nalong a conical shape. The shape of the cone can be controlled using\nthe angle and concentration parameters.

            \n

            The angle parameter is used to\ndetermine the radius of the cone. And the concentration\nparameter is used to focus the light towards the center of\nthe cone. Both parameters are optional, however if you want\nto specify concentration, you must also specify angle.\nThe minimum concentration value is 1.

            \n

            A maximum of 5 spot lights can be active at once.

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'scene with sphere and spot light. The position of the light is controlled with the mouse position.'\n );\n}\nfunction draw() {\n background(0);\n // move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 ----------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2 ----------- width/2,height/2\n ambientLight(50);\n spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);\n noStroke();\n sphere(40);\n}\n\n
            "],"alt":"scene with sphere and spot light. The position of\nthe light is controlled with the mouse position.","class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":794,"params":[{"name":"v1","description":"

            red or hue value relative to the current color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value relative to the current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value relative to the current color range

            \n","type":"Number"},{"name":"x","description":"

            x component of position

            \n","type":"Number"},{"name":"y","description":"

            y component of position

            \n","type":"Number"},{"name":"z","description":"

            z component of position

            \n","type":"Number"},{"name":"rx","description":"

            x component of light direction (inclusive range of -1 to 1)

            \n","type":"Number"},{"name":"ry","description":"

            y component of light direction (inclusive range of -1 to 1)

            \n","type":"Number"},{"name":"rz","description":"

            z component of light direction (inclusive range of -1 to 1)

            \n","type":"Number"},{"name":"angle","description":"

            angle of cone. Defaults to PI/3

            \n","type":"Number","optional":true},{"name":"concentration","description":"

            concentration of cone. Defaults to 100

            \n","type":"Number","optional":true}],"chainable":1},{"line":867,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"},{"name":"position","description":"

            position of light as a p5.Vector

            \n","type":"p5.Vector"},{"name":"direction","description":"

            direction of light as a p5.Vector

            \n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":876,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"","type":"p5.Vector"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":886,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":896,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"position","description":"","type":"p5.Vector"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":906,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":918,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"","type":"p5.Vector"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":930,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":1155,"description":"

            Removes all lights present in a sketch.

            \n

            All subsequent geometry is rendered without lighting (until a new\nlight is created with a call to one of the lighting functions\n(lights(),\nambientLight(),\ndirectionalLight(),\npointLight(),\nspotLight()).

            \n","itemtype":"method","name":"noLights","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe(\n 'Three white spheres. Each appears as a different color due to lighting.'\n );\n}\nfunction draw() {\n background(200);\n noStroke();\n\n ambientLight(255, 0, 0);\n translate(-30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n\n noLights();\n translate(30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n\n ambientLight(0, 255, 0);\n translate(30, 0, 0);\n ambientMaterial(255);\n sphere(13);\n}\n\n
            "],"alt":"Three white spheres. Each appears as a different\ncolor due to lighting.","class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"

            Load a 3d model from an OBJ or STL file.

            \n

            loadModel() should be placed inside of preload().\nThis allows the model to load fully before the rest of your code is run.

            \n

            One of the limitations of the OBJ and STL format is that it doesn't have a built-in\nsense of scale. This means that models exported from different programs might\nbe very different sizes. If your model isn't displaying, try calling\nloadModel() with the normalized parameter set to true. This will resize the\nmodel to a scale appropriate for p5. You can also make additional changes to\nthe final size of your model with the scale() function.

            \n

            Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.

            \n

            Options can include:

            \n
              \n
            • path: Specifies the location or path of the 3D model file for loading.
              • \n
            • normalize: Enables standardized size scaling during loading if set to true.
              • \n
            • successCallback: Callback for post-loading actions with the 3D model object.
              • \n
            • failureCallback: Handles errors if model loading fails, receiving an event error.
              • \n
            • fileType: Defines the file extension of the model.
              • \n
            • flipU: Flips the U texture coordinates of the model.
              • \n
            • flipV: Flips the V texture coordinates of the model.
              • \n
            \n","itemtype":"method","name":"loadModel","return":{"description":"the p5.Geometry object","type":"p5.Geometry"},"example":["\n
            \n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n
            ","\n
            \n\n//draw a spinning teapot\nlet teapot;\n\nfunction preload() {\n // Load model with normalise parameter set to true\n teapot = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d teapot with red, green and blue gradient.');\n}\n\nfunction draw() {\n background(200);\n scale(0.4); // Scaled to make model fit into canvas\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial(); // For effect\n model(teapot);\n}\n\n
            "],"alt":"Vertically rotating 3-d teapot with red, green and blue gradient.","class":"p5","module":"Shape","submodule":"3D Models","overloads":[{"line":12,"params":[{"name":"path","description":"

            Path of the model to be loaded

            \n","type":"String"},{"name":"normalize","description":"

            If true, scale the model to a\n standardized size when loading

            \n","type":"Boolean"},{"name":"successCallback","description":"

            Function to be called\n once the model is loaded. Will be passed\n the 3D model object.

            \n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"

            called with event error if\n the model fails to load.

            \n","type":"Function(Event)","optional":true},{"name":"fileType","description":"

            The file extension of the model\n (.stl, .obj).

            \n","type":"String","optional":true}],"return":{"description":"the p5.Geometry object","type":"p5.Geometry"}},{"line":107,"params":[{"name":"path","description":"","type":"String"},{"name":"successCallback","description":"","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"","type":"Function(Event)","optional":true},{"name":"fileType","description":"","type":"String","optional":true}],"return":{"description":"the p5.Geometry object","type":"p5.Geometry"}},{"line":115,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"","type":"Object","optional":true,"props":[{"name":"successCallback","description":"","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"","type":"Function(Event)","optional":true},{"name":"fileType","description":"","type":"String","optional":true},{"name":"normalize","description":"","type":"Boolean","optional":true},{"name":"flipU","description":"","type":"Boolean","optional":true},{"name":"flipV","description":"","type":"Boolean","optional":true}]}],"return":{"description":"the p5.Geometry object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":333,"description":"

            Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:

            \n

            v -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5

            \n

            f 4 3 2 1

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":477,"description":"

            STL files can be of two types, ASCII and Binary,

            \n

            We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":504,"description":"

            This function checks if the file is in ASCII format or in Binary format

            \n

            It is done by searching keyword solid at the start of the file.

            \n

            An ASCII STL data must begin with solid as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the d are known to be\nplentiful. So, check the first 5 bytes for solid.

            \n

            Several encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for solid to start anywhere after those prefixes.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":531,"description":"

            This function matches the query at the provided offset

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":543,"description":"

            This function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL

            \n

            Currently there is no support for the colors provided in STL files.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":631,"description":"

            ASCII STL file starts with solid 'nameOfFile'\nThen contain the normal of the face, starting with facet normal\nNext contain a keyword indicating the start of face vertex, outer loop\nNext comes the three vertex, starting with vertex x y z\nVertices ends with endloop\nFace ends with endfacet\nNext face starts with facet normal\nThe end of the file is indicated by endsolid

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":775,"description":"

            Render a 3d model to the screen.

            \n","itemtype":"method","name":"model","params":[{"name":"model","description":"

            Loaded 3d model to be rendered

            \n","type":"p5.Geometry"}],"example":["\n
            \n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Vertically rotating 3-d octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n
            "],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"

            Creates a new p5.Shader object\nfrom the provided vertex and fragment shader files.

            \n

            The shader files are loaded asynchronously in the\nbackground, so this method should be used in preload().

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.

            \n

            Note, shaders can only be used in WEBGL mode.

            \n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"

            path to file containing vertex shader\nsource code

            \n","type":"String"},{"name":"fragFilename","description":"

            path to file containing fragment shader\nsource code

            \n","type":"String"},{"name":"callback","description":"

            callback to be executed after loadShader\ncompletes. On success, the p5.Shader object is passed as the first argument.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.

            \n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n
            \n\nlet mandel;\nfunction preload() {\n // load the shader definitions from files\n mandel = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // use the shader\n shader(mandel);\n noStroke();\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');\n}\n\nfunction draw() {\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            "],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":115,"description":"

            Creates a new p5.Shader object\nfrom the provided vertex and fragment shader code.

            \n

            Note, shaders can only be used in WEBGL mode.

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader shown in the example below.

            \n","itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"

            source code for the vertex shader

            \n","type":"String"},{"name":"fragSrc","description":"

            source code for the fragment shader

            \n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n
            \n\n\n// the vertex shader is called for each vertex\nlet vs = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n`;\n\n\n// the fragment shader is called for each pixel\nlet fs = `\n precision highp float;\n uniform vec2 p;\n uniform float r;\n const int I = 500;\n varying vec2 vTexCoord;\n void main() {\n vec2 c = p + gl_FragCoord.xy * r, z = c;\n float n = 0.0;\n for (int i = I; i > 0; i --) {\n if(z.x*z.x+z.y*z.y > 4.0) {\n n = float(i)/float(I);\n break;\n }\n z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;\n }\n gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);\n }`;\n\nlet mandel;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // create and initialize the shader\n mandel = createShader(vs, fs);\n shader(mandel);\n noStroke();\n\n // 'p' is the center point of the Mandelbrot image\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');\n}\n\nfunction draw() {\n // 'r' is the size of the image in Mandelbrot-space\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n plane(width, height);\n}\n\n
            "],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":202,"description":"

            Creates a new p5.Shader using only a fragment shader, as a convenience method for creating image effects.\nIt's like createShader() but with a default vertex shader included.

            \n

            createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas.\nA filter shader will not be applied to any geometries.

            \n

            The fragment shader receives some uniforms:

            \n
              \n
            • sampler2D tex0, which contains the canvas contents as a texture
              • \n
            • vec2 canvasSize, which is the p5 width and height of the canvas (not including pixel density)
              • \n
            • vec2 texelSize, which is the size of a physical pixel including pixel density (1.0/(width*density), 1.0/(height*density))
              • \n
            \n

            For more info about filters and shaders, see Adam Ferriss' repo of shader examples\nor the introduction to shaders page.

            \n","itemtype":"method","name":"createFilterShader","params":[{"name":"fragSrc","description":"

            source code for the fragment shader

            \n","type":"String"}],"return":{"description":"a shader object created from the provided\n fragment shader.","type":"p5.Shader"},"example":["\n
            \n\nfunction setup() {\n let fragSrc = `precision highp float;\n void main() {\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n let s = createFilterShader(fragSrc);\n filter(s);\n describe('a yellow canvas');\n}\n\n
            \n\n
            \n\nlet img, s;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n let fragSrc = `precision highp float;\n\n // x,y coordinates, given from the vertex shader\n varying vec2 vTexCoord;\n\n // the canvas contents, given from filter()\n uniform sampler2D tex0;\n // other useful information from the canvas\n uniform vec2 texelSize;\n uniform vec2 canvasSize;\n // a custom variable from this sketch\n uniform float darkness;\n\n void main() {\n // get the color at current pixel\n vec4 color = texture2D(tex0, vTexCoord);\n // set the output color\n color.b = 1.0;\n color *= darkness;\n gl_FragColor = vec4(color.rgb, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n s = createFilterShader(fragSrc);\n}\nfunction draw() {\n image(img, -50, -50);\n s.setUniform('darkness', 0.5);\n filter(s);\n describe('a image of bricks tinted dark blue');\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":331,"description":"

            Sets the p5.Shader object to\nbe used to render subsequent shapes.

            \n

            Shaders can alter the positioning of shapes drawn with them.\nTo ensure consistency in rendering, it's recommended to use the vertex shader in the createShader example.

            \n

            Custom shaders can be created using the\ncreateShader() and\nloadShader() functions.

            \n

            Use resetShader() to\nrestore the default shaders.

            \n

            Additional Information:\nThe shader will be used for:

            \n
              \n
            • Fills when a texture is enabled if it includes a uniform sampler2D.
              • \n
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
              • \n
            • Fills whenever there are no lights or textures.
              • \n
            • Strokes if it includes the uniform uStrokeWeight.\nNote: This behavior is considered experimental, and changes are planned in future releases.
              • \n
            \n

            Note, shaders can only be used in WEBGL mode.

            \n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"

            the p5.Shader object\nto use for rendering shapes.

            \n","type":"p5.Shader"}],"example":["\n
            \n\n// Click within the image to toggle\n// the shader used by the quad shape\n// Note: for an alternative approach to the same example,\n// involving changing uniforms please refer to:\n// https://p5js.org/reference/#/p5.Shader/setUniform\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // initialize the colors for redGreen shader\n shader(redGreen);\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // initialize the colors for orangeBlue shader\n shader(orangeBlue);\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n noStroke();\n\n describe(\n 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'\n );\n}\n\nfunction draw() {\n // update the offset values for each shader,\n // moving orangeBlue in vertical and redGreen\n // in horizontal direction\n orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n redGreen.setUniform('offset', [sin(millis() / 2000), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            "],"alt":"canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":440,"description":"

            Restores the default shaders. Code that runs after resetShader()\nwill not be affected by the shader previously set by\nshader()

            \n","itemtype":"method","name":"resetShader","chainable":1,"example":["\n
            \n\n// This variable will hold our shader object\nlet shaderProgram;\n\n// This variable will hold our vertex shader source code\nlet vertSrc = `\n attribute vec3 aPosition;\n attribute vec2 aTexCoord;\n uniform mat4 uProjectionMatrix;\n uniform mat4 uModelViewMatrix;\n varying vec2 vTexCoord;\n\n void main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n }\n`;\n\n// This variable will hold our fragment shader source code\nlet fragSrc = `\n precision mediump float;\n\n varying vec2 vTexCoord;\n\n void main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n }\n`;\n\nfunction setup() {\n // Shaders require WEBGL mode to work\n createCanvas(100, 100, WEBGL);\n\n // Create our shader\n shaderProgram = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'\n );\n}\n\nfunction draw() {\n // Clear the scene\n background(200);\n\n // Draw a box using our shader\n // shader() sets the active shader with our shader\n shader(shaderProgram);\n push();\n translate(-width / 4, 0, 0);\n rotateX(millis() * 0.00025);\n rotateY(millis() * 0.0005);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader\n // resetShader() restores the default fill shader\n resetShader();\n fill(255, 0, 0);\n push();\n translate(width / 4, 0, 0);\n rotateX(millis() * 0.00025);\n rotateY(millis() * 0.0005);\n box(width / 4);\n pop();\n}\n\n
            "],"alt":"Two rotating cubes. The left one is painted using a custom (user-defined) shader,\nwhile the right one is painted using the default fill shader.","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":529,"description":"

            Sets the texture that will be used to render subsequent shapes.

            \n

            A texture is like a \"skin\" that wraps around a 3D geometry. Currently\nsupported textures are images, video, and offscreen renders.

            \n

            To texture a geometry created with beginShape(),\nyou will need to specify uv coordinates in vertex().

            \n

            Note, texture() can only be used in WEBGL mode.

            \n

            You can view more materials in this\nexample.

            \n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"

            image to use as texture

            \n","type":"p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"}],"chainable":1,"example":["\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('spinning cube with a texture from an image');\n}\n\nfunction draw() {\n background(0);\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n //pass image as texture\n texture(img);\n box(width / 2);\n}\n\n
            ","\n
            \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n pg = createGraphics(200, 200);\n pg.textSize(75);\n describe('plane with a texture from an image created by createGraphics()');\n}\n\nfunction draw() {\n background(0);\n pg.background(255);\n pg.text('hello!', 0, 100);\n //pass image as texture\n texture(pg);\n rotateX(0.5);\n noStroke();\n plane(50);\n}\n\n
            ","\n
            \n\nlet vid;\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n vid.hide();\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n //pass video frame as texture\n texture(vid);\n rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n vid.loop();\n}\n\n
            ","\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using normalized coordinates');\n}\n\nfunction draw() {\n background(0);\n texture(img);\n textureMode(NORMAL);\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n\n
            "],"alt":"quad with a texture, mapped using normalized coordinates","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":674,"description":"

            Sets the coordinate space for texture mapping. The default mode is IMAGE\nwhich refers to the actual coordinates of the image.\nNORMAL refers to a normalized space of values ranging from 0 to 1.

            \n

            With IMAGE, if an image is 100×200 pixels, mapping the image onto the entire\nsize of a quad would require the points (0,0) (100, 0) (100,200) (0,200).\nThe same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).

            \n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"

            either IMAGE or NORMAL

            \n","type":"Constant"}],"example":["\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using normalized coordinates');\n}\n\nfunction draw() {\n texture(img);\n textureMode(NORMAL);\n beginShape();\n vertex(-50, -50, 0, 0);\n vertex(50, -50, 1, 0);\n vertex(50, 50, 1, 1);\n vertex(-50, 50, 0, 1);\n endShape();\n}\n\n
            ","\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('quad with a texture, mapped using image coordinates');\n}\n\nfunction draw() {\n texture(img);\n textureMode(IMAGE);\n beginShape();\n vertex(-50, -50, 0, 0);\n vertex(50, -50, img.width, 0);\n vertex(50, 50, img.width, img.height);\n vertex(-50, 50, 0, img.height);\n endShape();\n}\n\n
            "],"alt":"quad with a texture, mapped using image coordinates","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":752,"description":"

            Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 to 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.

            \n

            CLAMP causes the pixels at the edge of the texture to extend to the bounds.\nREPEAT causes the texture to tile repeatedly until reaching the bounds.\nMIRROR works similarly to REPEAT but it flips the texture with every new tile.

            \n

            REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).

            \n

            This method will affect all textures in your sketch until a subsequent\ntextureWrap() call is made.

            \n

            If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.

            \n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"

            either CLAMP, REPEAT, or MIRROR

            \n","type":"Constant"},{"name":"wrapY","description":"

            either CLAMP, REPEAT, or MIRROR

            \n","type":"Constant","optional":true}],"example":["\n
            \n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textureWrap(MIRROR);\n describe('an image of the rocky mountains repeated in mirrored tiles');\n}\n\nfunction draw() {\n background(0);\n\n let dX = mouseX;\n let dY = mouseY;\n\n let u = lerp(1.0, 2.0, dX);\n let v = lerp(1.0, 2.0, dY);\n\n scale(width / 2);\n\n texture(img);\n\n beginShape(TRIANGLES);\n vertex(-1, -1, 0, 0, 0);\n vertex(1, -1, 0, u, 0);\n vertex(1, 1, 0, u, v);\n\n vertex(1, 1, 0, u, v);\n vertex(-1, 1, 0, 0, v);\n vertex(-1, -1, 0, 0, 0);\n endShape();\n}\n\n
            "],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":824,"description":"

            Sets the current material as a normal material.

            \n

            A normal material is not affected by light. It is often used as\na placeholder material when debugging.

            \n

            Surfaces facing the X-axis become red, those facing the Y-axis\nbecome green, and those facing the Z-axis become blue.

            \n

            You can view more materials in this\nexample.

            \n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('Sphere with normal material');\n}\n\nfunction draw() {\n background(200);\n normalMaterial();\n sphere(40);\n}\n\n
            "],"alt":"Sphere with normal material","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":869,"description":"

            Sets the ambient color of the material.

            \n

            The ambientMaterial() color represents the components\nof the ambientLight() color that the object reflects.

            \n

            Consider an ambientMaterial() with the color yellow (255, 255, 0).\nIf the ambientLight() emits the color white (255, 255, 255), then the object\nwill appear yellow as it will reflect the red and green components\nof the light. If the ambientLight() emits the color red (255, 0, 0), then\nthe object will appear red as it will reflect the red component\nof the light. If the ambientLight() emits the color blue (0, 0, 255),\nthen the object will appear black, as there is no component of\nthe light that it can reflect.

            \n

            You can view more materials in this\nexample.

            \n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('sphere reflecting red, blue, and green light');\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(255);\n ambientMaterial(70, 130, 230);\n sphere(40);\n}\n\n
            ","\n
            \n\n// ambientLight is both red and blue (magenta),\n// so object only reflects it's red and blue components\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('box reflecting only red and blue light');\n}\nfunction draw() {\n background(70);\n ambientLight(255, 0, 255); // magenta light\n ambientMaterial(255); // white material\n box(30);\n}\n\n
            ","\n
            \n\n// ambientLight is green. Since object does not contain\n// green, it does not reflect any light\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('box reflecting no light');\n}\nfunction draw() {\n background(70);\n ambientLight(0, 255, 0); // green light\n ambientMaterial(255, 0, 255); // magenta material\n box(30);\n}\n\n
            "],"alt":"box reflecting no light","class":"p5","module":"3D","submodule":"Material","overloads":[{"line":869,"params":[{"name":"v1","description":"

            red or hue value relative to the current\n color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value relative to the\n current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value relative to the\n current color range

            \n","type":"Number"}],"chainable":1},{"line":955,"params":[{"name":"gray","description":"

            number specifying value between\n white and black

            \n","type":"Number"}],"chainable":1},{"line":962,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":982,"description":"

            Sets the emissive color of the material.

            \n

            An emissive material will display the emissive color at\nfull strength regardless of lighting. This can give the\nappearance that the object is glowing.

            \n

            Note, \"emissive\" is a misnomer in the sense that the material\ndoes not actually emit light that will affect surrounding objects.

            \n

            You can view more materials in this\nexample.

            \n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('sphere with green emissive material');\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(0);\n emissiveMaterial(130, 230, 0);\n sphere(40);\n}\n\n
            "],"alt":"sphere with green emissive material","class":"p5","module":"3D","submodule":"Material","overloads":[{"line":982,"params":[{"name":"v1","description":"

            red or hue value relative to the current\n color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value relative to the\n current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value relative to the\n current color range

            \n","type":"Number"},{"name":"alpha","description":"

            alpha value relative to current color\n range (default is 0-255)

            \n","type":"Number","optional":true}],"chainable":1},{"line":1026,"params":[{"name":"gray","description":"

            number specifying value between\n white and black

            \n","type":"Number"}],"chainable":1},{"line":1033,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":1053,"description":"

            Sets the specular color of the material.

            \n

            A specular material is reflective (shiny). The shininess can be\ncontrolled by the shininess() function.

            \n

            Like ambientMaterial(),\nthe specularMaterial() color is the color the object will reflect\nunder ambientLight().\nHowever unlike ambientMaterial(), for all other types of lights\n(directionalLight(),\npointLight(),\nspotLight()),\na specular material will reflect the color of the light source.\nThis is what gives it its \"shiny\" appearance.

            \n

            You can view more materials in this\nexample.

            \n","itemtype":"method","name":"specularMaterial","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n describe('torus with specular material');\n}\n\nfunction draw() {\n background(0);\n\n ambientLight(60);\n\n // add point light to showcase specular material\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n pointLight(255, 255, 255, locX, locY, 50);\n\n specularMaterial(250);\n shininess(50);\n torus(30, 10, 64, 64);\n}\n\n
            "],"alt":"torus with specular material","class":"p5","module":"3D","submodule":"Material","overloads":[{"line":1053,"params":[{"name":"gray","description":"

            number specifying value between white and black.

            \n","type":"Number"},{"name":"alpha","description":"

            alpha value relative to current color range\n (default is 0-255)

            \n","type":"Number","optional":true}],"chainable":1},{"line":1107,"params":[{"name":"v1","description":"

            red or hue value relative to\n the current color range

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value\n relative to the current color range

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness value\n relative to the current color range

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1119,"params":[{"name":"color","description":"

            color as a p5.Color,\n as an array, or as a CSS string

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":1139,"description":"

            Sets the amount of gloss (\"shininess\") of a\nspecularMaterial().

            \n

            The default and minimum value is 1.

            \n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"

            degree of shininess

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('two spheres, one more shiny than the other');\n}\nfunction draw() {\n background(0);\n noStroke();\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n ambientLight(60, 60, 60);\n pointLight(255, 255, 255, locX, locY, 50);\n specularMaterial(250);\n translate(-25, 0, 0);\n shininess(1);\n sphere(20);\n translate(50, 0, 0);\n shininess(20);\n sphere(20);\n}\n\n
            "],"alt":"two spheres, one more shiny than the other","class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":1186,"description":"

            Sets the metalness property of a material used in 3D rendering.

            \n

            The metalness property controls the degree to which the material\nappears metallic. A higher metalness value makes the material look\nmore metallic, while a lower value makes it appear less metallic.

            \n

            The default and minimum value is 0, indicating a non-metallic appearance.

            \n

            Unlike other materials, metals exclusively rely on reflections, particularly\nthose produced by specular lights (mirrorLike lights). They don't incorporate\ndiffuse or ambient lighting. Metals use a fill color to influence the overall\ncolor of their reflections. Pick a fill color, and you can easily change the\nappearance of the metal surfaces. When no fill color is provided, it defaults\nto using white.

            \n","itemtype":"method","name":"metalness","params":[{"name":"metallic","description":"
              \n
            • The degree of metalness.
              • \n
            \n","type":"Number"}],"example":["\n
            \n\nlet img;\nlet slider;\nlet slider2;\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 300, 100, 1);\n let sliderLabel = createP('Metalness');\n sliderLabel.position(100, height - 25);\n slider2 = createSlider(0, 350, 100);\n slider2.position(0, height + 20);\n slider2Label = createP('Shininess');\n slider2Label.position(100, height);\n}\nfunction draw() {\n background(220);\n imageMode(CENTER);\n push();\n image(img, 0, 0, width, height);\n clearDepth();\n pop();\n imageLight(img);\n fill('gray');\n specularMaterial('gray');\n shininess(slider2.value());\n metalness(slider.value());\n noStroke();\n sphere(30);\n}\n\n
            ","\n
            \n\nlet slider;\nlet slider2;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n slider = createSlider(0, 200, 100);\n let sliderLabel = createP('Metalness');\n sliderLabel.position(100, height - 25);\n slider2 = createSlider(0, 200, 2);\n slider2.position(0, height + 25);\n let slider2Label = createP('Shininess');\n slider2Label.position(100, height);\n}\nfunction draw() {\n noStroke();\n background(100);\n fill(255, 215, 0);\n pointLight(255, 255, 255, 5000, 5000, 75);\n specularMaterial('gray');\n ambientLight(100);\n shininess(slider2.value());\n metalness(slider.value());\n rotateY(frameCount * 0.01);\n torus(20, 10);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"

            Sets the position of the current camera in a 3D sketch.\nParameters for this function define the camera's position,\nthe center of the sketch (where the camera is pointing),\nand an up direction (the orientation of the camera).

            \n

            This function simulates the movements of the camera, allowing objects to be\nviewed from various angles. Remember, it does not move the objects themselves\nbut the camera instead. For example when the centerX value is positive,\nand the camera is rotating to the right side of the sketch,\nthe object will seem like it's moving to the left.

            \n

            See this example\nto view the position of your camera.

            \n

            If no parameters are given, the following default is used:\ncamera(0, 0, 800, 0, 0, 0, 0, 1, 0)

            \n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"

            camera position value on x axis

            \n","type":"Number","optional":true},{"name":"y","description":"

            camera position value on y axis

            \n","type":"Number","optional":true},{"name":"z","description":"

            camera position value on z axis

            \n","type":"Number","optional":true},{"name":"centerX","description":"

            x coordinate representing center of the sketch

            \n","type":"Number","optional":true},{"name":"centerY","description":"

            y coordinate representing center of the sketch

            \n","type":"Number","optional":true},{"name":"centerZ","description":"

            z coordinate representing center of the sketch

            \n","type":"Number","optional":true},{"name":"upX","description":"

            x component of direction 'up' from camera

            \n","type":"Number","optional":true},{"name":"upY","description":"

            y component of direction 'up' from camera

            \n","type":"Number","optional":true},{"name":"upZ","description":"

            z component of direction 'up' from camera

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('a square moving closer and then away from the camera.');\n}\nfunction draw() {\n background(204);\n //move the camera away from the plane by a sin wave\n camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n plane(10, 10);\n}\n\n
            ","\n
            \n\n//move slider to see changes!\n//sliders control the first 6 parameters of camera()\nlet sliderGroup = [];\nlet X;\nlet Y;\nlet Z;\nlet centerX;\nlet centerY;\nlet centerZ;\nlet h = 20;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n //create sliders\n for (var i = 0; i < 6; i++) {\n if (i === 2) {\n sliderGroup[i] = createSlider(10, 400, 200);\n } else {\n sliderGroup[i] = createSlider(-400, 400, 0);\n }\n h = map(i, 0, 6, 5, 85);\n sliderGroup[i].position(10, height + h);\n sliderGroup[i].style('width', '80px');\n }\n describe(\n 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.'\n );\n}\n\nfunction draw() {\n background(60);\n // assigning sliders' value to each parameters\n X = sliderGroup[0].value();\n Y = sliderGroup[1].value();\n Z = sliderGroup[2].value();\n centerX = sliderGroup[3].value();\n centerY = sliderGroup[4].value();\n centerZ = sliderGroup[5].value();\n camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n stroke(255);\n fill(255, 102, 94);\n box(85);\n}\n\n
            "],"alt":"White square repeatedly grows to fill canvas and then shrinks.\nAn interactive example of a red cube with 3 sliders for moving it across x, y,\nz axis and 3 sliders for shifting its center.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":121,"description":"

            Sets a perspective projection for the current camera in a 3D sketch.\nThis projection represents depth through foreshortening: objects\nthat are close to the camera appear their actual size while those\nthat are further away from the camera appear smaller.

            \n

            The parameters to this function define the viewing frustum\n(the truncated pyramid within which objects are seen by the camera) through\nvertical field of view, aspect ratio (usually width/height), and near and far\nclipping planes.

            \n

            If no parameters are given, the default values are used as:

            \n
              \n
            • fov : The default field of view for the camera is such that the full height of renderer is visible when it is positioned at a default distance of 800 units from the camera.
              • \n
            • aspect : The default aspect ratio is the ratio of renderer's width to renderer's height.
              • \n
            • near : The default value for the near clipping plane is 80, which is 0.1 times the default distance from the camera to its subject.
              • \n
            • far : The default value for the far clipping plane is 8000, which is 10 times the default distance from the camera to its subject.
              • \n
            \n

            If you prefer a fixed field of view, follow these steps:

            \n
              \n
            1. Choose your desired field of view angle (fovy). This is how wide the camera can see.
              2. \n
            2. To ensure that you can see the entire width across horizontally and height across vertically, place the camera a distance of (height / 2) / tan(fovy / 2) back from its subject.
              3. \n
            3. Call perspective with the chosen field of view, canvas aspect ratio, and near/far values:\nperspective(fovy, width / height, cameraDistance / 10, cameraDistance * 10);
              4. \n
            \n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"

            camera frustum vertical field of view,\n from bottom to top of view, in angleMode units

            \n","type":"Number","optional":true},{"name":"aspect","description":"

            camera frustum aspect ratio

            \n","type":"Number","optional":true},{"name":"near","description":"

            frustum near plane length

            \n","type":"Number","optional":true},{"name":"far","description":"

            frustum far plane length

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\n//drag the mouse to look around!\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n perspective(PI / 3.0, width / height, 0.1, 500);\n describe(\n 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(-0.3);\n rotateY(-0.2);\n translate(0, 0, -50);\n\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            "],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":197,"description":"

            Enable or disable perspective for lines in the WebGL renderer.\n The behavior of linePerspective() is associated with the type of camera projection being used.

            \n
              \n
            • When using perspective(), which simulates realistic perspective, linePerspective\n is set to true by default. This means that lines will be affected by the current\n camera's perspective, resulting in a more natural appearance.
              • \n
            • When using ortho() or frustum(), which do not simulate realistic perspective,\n linePerspective is set to false by default. In this case, lines will have a uniform\n scale regardless of the camera's perspective, providing a more predictable and\n consistent appearance.
              • \n
            • You can override the default behavior by explicitly calling linePerspective() after\n using perspective(), ortho(), or frustum(). This allows you to customize the line\n perspective based on your specific requirements.
              • \n
            \n","itemtype":"method","name":"linePerspective","example":["\n
            \n \n function setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes({ antialias: true });\n strokeWeight(3);\n describe(\n 'rotated 3D boxes have their stroke weights affected if toggled back and forth with mouse clicks.'\n );\n }\nfunction draw() {\n background(220);\n rotateY(PI/24);\n rotateZ(PI/8);\n translate(0, 0, 350);\n for (let i = 0; i < 12; i++) {\n translate(0, 0, -70);\n box(30);\n }\n }\nfunction mousePressed() {\n linePerspective(!linePerspective());\n }\n \n
            \n
            \n \n function setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(4);\n }\nfunction draw() {\n background(220);\n // Using orthographic projection\n ortho();\n // Enable line perspective explicitly\n linePerspective(true);\n // Draw a rotating cube\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(25);\n // Move to a new position\n translate(0, -60, 0);\n // Using perspective projection\n perspective();\n // Disable line perspective explicitly\n linePerspective(false);\n // Draw another rotating cube with perspective\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(25);\n }\n \n
            "],"alt":"Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes.","class":"p5","module":"3D","submodule":"Camera","overloads":[{"line":197,"params":[{"name":"enable","description":"
              \n
            • Set to true to enable line perspective, false to disable.
              • \n
            \n","type":"Boolean"}]},{"line":286,"params":[],"return":{"description":"The boolean value representing the current state of linePerspective().","type":"Boolean"}}]},{"file":"src/webgl/p5.Camera.js","line":306,"description":"

            Sets an orthographic projection for the current camera in a 3D sketch\nand defines a box-shaped viewing frustum within which objects are seen.\nIn this projection, all objects with the same dimension appear the same\nsize, regardless of whether they are near or far from the camera.

            \n

            The parameters to this function specify the viewing frustum where\nleft and right are the minimum and maximum x values, top and bottom are\nthe minimum and maximum y values, and near and far are the minimum and\nmaximum z values.

            \n

            If no parameters are given, the following default is used:\northo(-width/2, width/2, -height/2, height/2, 0, max(width, height) + 800).

            \n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"

            camera frustum left plane

            \n","type":"Number","optional":true},{"name":"right","description":"

            camera frustum right plane

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            camera frustum bottom plane

            \n","type":"Number","optional":true},{"name":"top","description":"

            camera frustum top plane

            \n","type":"Number","optional":true},{"name":"near","description":"

            camera frustum near plane

            \n","type":"Number","optional":true},{"name":"far","description":"

            camera frustum far plane

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n ortho();\n describe(\n 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(0.2);\n rotateY(-0.2);\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            "],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":369,"description":"

            Sets the frustum of the current camera as defined by\nthe parameters.

            \n

            A frustum is a geometric form: a pyramid with its top\ncut off. With the viewer's eye at the imaginary top of\nthe pyramid, the six planes of the frustum act as clipping\nplanes when rendering a 3D view. Thus, any form inside the\nclipping planes is visible; anything outside\nthose planes is not visible.

            \n

            Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\nperspective().

            \n

            If no parameters are given, the following default is used:\nfrustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10),\nwhere eyeZ is equal to 800.

            \n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"

            camera frustum left plane

            \n","type":"Number","optional":true},{"name":"right","description":"

            camera frustum right plane

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            camera frustum bottom plane

            \n","type":"Number","optional":true},{"name":"top","description":"

            camera frustum top plane

            \n","type":"Number","optional":true},{"name":"near","description":"

            camera frustum near plane

            \n","type":"Number","optional":true},{"name":"far","description":"

            camera frustum far plane

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n describe(\n 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'\n );\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateY(-0.2);\n rotateX(-0.3);\n push();\n translate(-15, 0, sin(frameCount / 30) * 25);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 25);\n box(30);\n pop();\n}\n\n
            "],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":441,"description":"

            Creates a new p5.Camera object and sets it\nas the current (active) camera.

            \n

            The new camera is initialized with a default position\n(see camera())\nand a default perspective projection\n(see perspective()).\nIts properties can be controlled with the p5.Camera\nmethods.

            \n

            Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the global methods\ncamera(),\nperspective(), ortho(),\nand frustum() if it is the only camera\nin the scene.

            \n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n
            \n// Creates a camera object and animates it around a box.\nlet camera;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n camera = createCamera();\n camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n describe('An example that creates a camera and moves it around the box.');\n}\n\nfunction draw() {\n background(0);\n // The camera will automatically\n // rotate to look at [0, 0, 0].\n camera.lookAt(0, 0, 0);\n\n // The camera will move on the\n // x axis.\n camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n box(20);\n\n // A 'ground' box to give the viewer\n // a better idea of where the camera\n // is looking.\n translate(0, 50, 0);\n rotateX(HALF_PI);\n box(150, 150, 20);\n}\n
            "],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":605,"description":"

            camera position value on x axis. default value is 0

            \n","itemtype":"property","name":"eyeX","type":"Number","readonly":"","example":["\n\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeX = ' + cam.eyeX);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":634,"description":"

            camera position value on y axis. default value is 0

            \n","itemtype":"property","name":"eyeY","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeY = ' + cam.eyeY);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":662,"description":"

            camera position value on z axis. default value is 800

            \n","itemtype":"property","name":"eyeZ","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(0);\n cam = createCamera();\n div = createDiv();\n div.position(0, 0);\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n div.html('eyeZ = ' + cam.eyeZ);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":690,"description":"

            x coordinate representing center of the sketch

            \n","itemtype":"property","name":"centerX","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(1, 0, 0);\n div = createDiv('centerX = ' + cam.centerX);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":719,"description":"

            y coordinate representing center of the sketch

            \n","itemtype":"property","name":"centerY","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(0, 1, 0);\n div = createDiv('centerY = ' + cam.centerY);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":748,"description":"

            z coordinate representing center of the sketch

            \n","itemtype":"property","name":"centerZ","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n cam.lookAt(0, 0, 1);\n div = createDiv('centerZ = ' + cam.centerZ);\n div.position(0, 0);\n div.style('color', 'white');\n describe('An example showing the use of camera object properties');\n}\n\nfunction draw() {\n orbitControl();\n box(10);\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":777,"description":"

            x component of direction 'up' from camera

            \n","itemtype":"property","name":"upX","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upX = ' + cam.upX);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":801,"description":"

            y component of direction 'up' from camera

            \n","itemtype":"property","name":"upY","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upY = ' + cam.upY);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":825,"description":"

            z component of direction 'up' from camera

            \n","itemtype":"property","name":"upZ","type":"Number","readonly":"","example":["\n
            \nlet cam, div;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n background(255);\n cam = createCamera();\n div = createDiv('upZ = ' + cam.upZ);\n div.position(0, 0);\n div.style('color', 'blue');\n div.style('font-size', '18px');\n describe('An example showing the use of camera object properties');\n}\n
            "],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":853,"description":"

            Sets a perspective projection.\nAccepts the same parameters as the global\nperspective().\nMore information on this function can be found there.

            \n","itemtype":"method","name":"perspective","example":["\n
            \n\n// drag the mouse to look around!\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // give it a perspective projection\n cam.perspective(PI / 3.0, width / height, 0.1, 500);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(-0.3);\n rotateY(-0.2);\n translate(0, 0, -50);\n\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            "],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":956,"description":"

            Sets an orthographic projection.\nAccepts the same parameters as the global\northo().\nMore information on this function can be found there.

            \n","itemtype":"method","name":"ortho","example":["\n
            \n\n// drag the mouse to look around!\n// there's no vanishing point\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // give it an orthographic projection\n cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(0.2);\n rotateY(-0.2);\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n
            "],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1040,"description":"

            Sets the camera's frustum.\nAccepts the same parameters as the global\nfrustum().\nMore information on this function can be found there.

            \n","itemtype":"method","name":"frustum","example":["\n
            \n\nlet cam;\n\nfunction setup() {\n x = createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n // create a camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n // set its frustum\n cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateY(-0.2);\n rotateX(-0.3);\n push();\n translate(-15, 0, sin(frameCount / 30) * 25);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 25);\n box(30);\n pop();\n}\n\n
            "],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1171,"description":"

            Panning rotates the camera view to the left and right.

            \n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"

            amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial pan angle\n cam.pan(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            "],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1231,"description":"

            Tilting rotates the camera view up and down.

            \n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"

            amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // set initial tilt\n cam.tilt(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.tilt(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateY(frameCount * 0.01);\n translate(0, -100, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n}\n\n
            "],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1291,"description":"

            Reorients the camera to look at a position in world space.

            \n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"

            x position of a point in world space

            \n","type":"Number"},{"name":"y","description":"

            y position of a point in world space

            \n","type":"Number"},{"name":"z","description":"

            z position of a point in world space

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // look at a new random point every 60 frames\n if (frameCount % 60 === 0) {\n cam.lookAt(random(-100, 100), random(-50, 50), 0);\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            "],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1360,"description":"

            Sets the camera's position and orientation.\nAccepts the same parameters as the global\ncamera().\nMore information on this function can be found there.

            \n","itemtype":"method","name":"camera","example":["\n
            \n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // Create a camera.\n // createCamera() sets the newly created camera as\n // the current (active) camera.\n cam = createCamera();\n}\n\nfunction draw() {\n background(204);\n // Move the camera away from the plane by a sin wave\n cam.camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n plane(10, 10);\n}\n\n
            ","\n
            \n\n// move slider to see changes!\n// sliders control the first 6 parameters of camera()\n\nlet sliderGroup = [];\nlet X;\nlet Y;\nlet Z;\nlet centerX;\nlet centerY;\nlet centerZ;\nlet h = 20;\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // create a camera\n cam = createCamera();\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // create sliders\n for (var i = 0; i < 6; i++) {\n if (i === 2) {\n sliderGroup[i] = createSlider(10, 400, 200);\n } else {\n sliderGroup[i] = createSlider(-400, 400, 0);\n }\n h = map(i, 0, 6, 5, 85);\n sliderGroup[i].position(10, height + h);\n sliderGroup[i].style('width', '80px');\n }\n}\n\nfunction draw() {\n background(60);\n // assigning sliders' value to each parameters\n X = sliderGroup[0].value();\n Y = sliderGroup[1].value();\n Z = sliderGroup[2].value();\n centerX = sliderGroup[3].value();\n centerY = sliderGroup[4].value();\n centerZ = sliderGroup[5].value();\n cam.camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n stroke(255);\n fill(255, 102, 94);\n box(85);\n}\n\n
            "],"alt":"An interactive example of a red cube with 3 sliders for moving it across x, y,\nz axis and 3 sliders for shifting its center.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1508,"description":"

            Move camera along its local axes while maintaining current camera orientation.

            \n","itemtype":"method","name":"move","params":[{"name":"x","description":"

            amount to move along camera's left-right axis

            \n","type":"Number"},{"name":"y","description":"

            amount to move along camera's up-down axis

            \n","type":"Number"},{"name":"z","description":"

            amount to move along camera's forward-backward axis

            \n","type":"Number"}],"example":["\n
            \n\n// see the camera move along its own axes while maintaining its orientation\nlet cam;\nlet delta = 0.5;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // move the camera along its local axes\n cam.move(delta, delta, 0);\n\n // every 100 frames, switch direction\n if (frameCount % 150 === 0) {\n delta *= -1;\n }\n\n translate(-10, -10, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n}\n\n
            "],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1582,"description":"

            Set camera position in world-space while maintaining current camera\norientation.

            \n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"

            x position of a point in world space

            \n","type":"Number"},{"name":"y","description":"

            y position of a point in world space

            \n","type":"Number"},{"name":"z","description":"

            z position of a point in world space

            \n","type":"Number"}],"example":["\n
            \n\n// press '1' '2' or '3' keys to set camera position\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n}\n\nfunction draw() {\n background(200);\n\n // '1' key\n if (keyIsDown(49)) {\n cam.setPosition(30, 0, 80);\n }\n // '2' key\n if (keyIsDown(50)) {\n cam.setPosition(0, 0, 80);\n }\n // '3' key\n if (keyIsDown(51)) {\n cam.setPosition(-30, 0, 80);\n }\n\n box(20);\n}\n\n
            "],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1646,"description":"

            Copies information about the argument camera's view and projection to\nthe target camera. If the target camera is active, it will be reflected\non the screen.

            \n","itemtype":"method","name":"set","params":[{"name":"cam","description":"

            source camera

            \n","type":"p5.Camera"}],"example":["\n
            \n\nlet cam, initialCam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // Set the initial state to initialCamera and set it to the camera\n // used for drawing. Then set cam to be the active camera.\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n initialCam = createCamera();\n initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);\n initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam.set(initialCam);\n\n setCamera(cam);\n}\n\nfunction draw() {\n orbitControl();\n background(255);\n box(50);\n translate(0, 0, -25);\n plane(100);\n}\n\nfunction doubleClicked(){\n // Double-click to return the camera to its initial position.\n cam.set(initialCam);\n}\n\n
            "],"alt":"Prepare two cameras. One is the camera that sets the initial state,\nand the other is the camera that moves with interaction.\nDraw a plane and a box on top of it, operate the camera using orbitControl().\nDouble-click to set the camera in the initial state and return to\nthe initial state.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1719,"description":"

            For the cameras cam0 and cam1 with the given arguments, their view are combined\nwith the parameter amt that represents the quantity, and the obtained view is applied.\nFor example, if cam0 is looking straight ahead and cam1 is looking straight\nto the right and amt is 0.5, the applied camera will look to the halfway\nbetween front and right.\nIf the applied camera is active, the applied result will be reflected on the screen.\nWhen applying this function, all cameras involved must have exactly the same projection\nsettings. For example, if one is perspective, ortho, frustum, the other two must also be\nperspective, ortho, frustum respectively. However, if all cameras have ortho settings,\ninterpolation is possible if the ratios of left, right, top and bottom are equal to each other.\nFor example, when it is changed by orbitControl().

            \n","itemtype":"method","name":"slerp","params":[{"name":"cam0","description":"

            first p5.Camera

            \n","type":"p5.Camera"},{"name":"cam1","description":"

            second p5.Camera

            \n","type":"p5.Camera"},{"name":"amt","description":"

            amount to use for interpolation during slerp

            \n","type":"Number"}],"example":["\n
            \n\nlet cam0, cam1, cam;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // camera for slerp.\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // cam0 is looking at the cube from the front.\n cam0 = createCamera();\n cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // cam1 is pointing straight to the right in the cube\n // at the same position as cam0 by doing a pan(-PI/2).\n cam1 = createCamera();\n cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam1.pan(-PI/2);\n\n // we only use cam.\n setCamera(cam);\n}\n\nfunction draw() {\n // calculate amount.\n const amt = 0.5 - 0.5 * cos(frameCount * TAU / 120);\n // slerp cam0 and cam1 with amt, set to cam.\n // When amt moves from 0 to 1, cam moves from cam0 to cam1,\n // shaking the camera to the right.\n cam.slerp(cam0, cam1, amt);\n\n background(255);\n // Every time the camera turns right, the cube drifts left.\n box(40);\n}\n\n
            ","\n
            \n\nlet cam, lastCam, initialCam;\nlet countForReset = 30;\n// This sample uses orbitControl() to move the camera.\n// Double-clicking the canvas restores the camera to its initial state.\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n strokeWeight(3);\n\n // main camera\n cam = createCamera();\n cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // Camera for recording loc info before reset\n lastCam = createCamera();\n lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n // Camera for recording the initial state\n initialCam = createCamera();\n initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n\n setCamera(cam); // set main camera\n}\n\nfunction draw() {\n if (countForReset < 30) {\n // if the reset count is less than 30,\n // it will move closer to the original camera as it increases.\n countForReset++;\n cam.slerp(lastCam, initialCam, countForReset / 30);\n } else {\n // if the count is 30,\n // you can freely move the main camera with orbitControl().\n orbitControl();\n }\n\n background(255);\n box(40);\n}\n// A double-click sets countForReset to 0 and initiates a reset.\nfunction doubleClicked() {\n if (countForReset === 30) {\n countForReset = 0;\n lastCam.set(cam);\n }\n}\n\n
            "],"alt":"There is a camera, drawing a cube. The camera can be moved freely with\norbitControl(). Double-click to smoothly return the camera to its initial state.\nThe camera cannot be moved during that time.","class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2332,"description":"

            Sets the current (active) camera of a 3D sketch.\nAllows for switching between multiple cameras.

            \n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"

            p5.Camera object

            \n","type":"p5.Camera"}],"example":["\n
            \n\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n\n cam1 = createCamera();\n cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);\n cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));\n cam2 = createCamera();\n cam2.setPosition(30, 0, 50);\n cam2.lookAt(0, 0, 0);\n cam2.ortho(-50, 50, -50, 50, 0, 200);\n\n // set variable for previously active camera:\n currentCamera = 1;\n\n describe(\n 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // every 100 frames, switch between the two cameras\n if (frameCount % 100 === 0) {\n if (currentCamera === 1) {\n setCamera(cam1);\n currentCamera = 0;\n } else {\n setCamera(cam2);\n currentCamera = 1;\n }\n }\n\n // camera 1:\n cam1.lookAt(0, 0, 0);\n cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\n\n drawBoxes();\n}\n\nfunction drawBoxes() {\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n
            "],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Framebuffer.js","line":93,"description":"

            A Uint8ClampedArray\ncontaining the values for all the pixels in the Framebuffer.

            \n

            Like the main canvas pixels property, call\nloadPixels() before reading\nit, and call updatePixels()\nafterwards to update its data.

            \n

            Note that updating pixels via this property will be slower than\ndrawing to the framebuffer directly.\nConsider using a shader instead of looping over pixels.

            \n","itemtype":"property","name":"pixels","type":"Number[]","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":184,"description":"

            Resizes the framebuffer to the given width and height.

            \n","itemtype":"method","name":"resize","params":[{"name":"width","description":"","type":"Number"},{"name":"height","description":"","type":"Number"}],"example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction mouseMoved() {\n framebuffer.resize(\n max(20, mouseX),\n max(20, mouseY)\n );\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n framebuffer.end();\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -width/2, -height/2);\n}\n\n
            "],"alt":"A red, green, and blue sphere is drawn in the middle of a white rectangle\nwhich starts in the top left of the canvas and whose bottom right is at\nthe user's mouse","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":239,"description":"

            Gets or sets the pixel scaling for high pixel density displays. By\ndefault, the density will match that of the canvas the framebuffer was\ncreated on, which will match the display density.

            \n

            Call this method with no arguments to get the current density, or pass\nin a number to set the density.

            \n","itemtype":"method","name":"pixelDensity","params":[{"name":"density","description":"

            A scaling factor for the number of pixels per\nside of the framebuffer

            \n","type":"Number","optional":true}],"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":261,"description":"

            Gets or sets whether or not this framebuffer will automatically resize\nalong with the canvas it's attached to in order to match its size.

            \n

            Call this method with no arguments to see if it is currently auto-sized,\nor pass in a boolean to set this property.

            \n","itemtype":"method","name":"autoSized","params":[{"name":"autoSized","description":"

            Whether or not the framebuffer should resize\nalong with the canvas it's attached to

            \n","type":"Boolean","optional":true}],"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":702,"description":"

            Creates and returns a new\np5.FramebufferCamera to be used\nwhile drawing to this framebuffer. The camera will be set as the\ncurrently active camera.

            \n","itemtype":"method","name":"createCamera","return":{"description":"A new camera","type":"p5.Camera"},"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":733,"description":"

            Removes the framebuffer and frees its resources.

            \n","itemtype":"method","name":"remove","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n const useFramebuffer = (frameCount % 120) > 60;\n if (useFramebuffer && !framebuffer) {\n // Create a new framebuffer for us to use\n framebuffer = createFramebuffer();\n } else if (!useFramebuffer && framebuffer) {\n // Free the old framebuffer's resources\n framebuffer.remove();\n framebuffer = undefined;\n }\n\n background(255);\n if (useFramebuffer) {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(30);\n framebuffer.end();\n\n image(framebuffer, -width/2, -height/2);\n }\n}\n\n
            "],"alt":"A rotating red cube blinks on and off every second.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":794,"description":"

            Begin drawing to this framebuffer. Subsequent drawing functions to the\ncanvas the framebuffer is attached to will not be immediately visible, and\nwill instead be drawn to the framebuffer's texture. Call\nend() when finished to make draw\nfunctions go right to the canvas again and to be able to read the\ncontents of the framebuffer's texture.

            \n","itemtype":"method","name":"begin","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n translate(0, 10*sin(frameCount * 0.01), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(50);\n framebuffer.end();\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -50, -50, 25, 25);\n image(framebuffer, 0, 0, 35, 35);\n}\n\n
            "],"alt":"A video of a floating and rotating red cube is pasted twice on the\ncanvas: once in the top left, and again, larger, in the bottom right.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":922,"description":"

            After having previously called\nbegin(), this method stops drawing\nfunctions from going to the framebuffer's texture, allowing them to go\nright to the canvas again. After this, one can read from the framebuffer's\ntexture.

            \n","itemtype":"method","name":"end","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":951,"description":"

            Run a function while drawing to the framebuffer rather than to its canvas.\nThis is equivalent to calling framebuffer.begin(), running the function,\nand then calling framebuffer.end(), but ensures that one never\naccidentally forgets begin or end.

            \n","itemtype":"method","name":"draw","params":[{"name":"callback","description":"

            A function to run that draws to the canvas. The\nfunction will immediately be run, but it will draw to the framebuffer\ninstead of the canvas.

            \n","type":"Function"}],"example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.draw(function() {\n background(255);\n translate(0, 10*sin(frameCount * 0.01), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(50);\n });\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -50, -50, 25, 25);\n image(framebuffer, 0, 0, 35, 35);\n}\n\n
            "],"alt":"A video of a floating and rotating red cube is pasted twice on the\ncanvas: once in the top left, and again, larger, in the bottom right.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1001,"description":"

            Call this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1030,"description":"

            Get a region of pixels from the canvas in the form of a\np5.Image, or a single pixel as an array of\nnumbers.

            \n

            Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If the Framebuffer has been set up to not store alpha values, then\nonly [R,G,B] will be returned. If no parameters are specified, the entire\nimage is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().

            \n","itemtype":"method","name":"get","return":{"description":"the rectangle p5.Image","type":"p5.Image"},"class":"p5.Framebuffer","module":"Rendering","overloads":[{"line":1030,"params":[{"name":"x","description":"

            x-coordinate of the pixel

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel

            \n","type":"Number"},{"name":"w","description":"

            width of the section to be returned

            \n","type":"Number"},{"name":"h","description":"

            height of the section to be returned

            \n","type":"Number"}],"return":{"description":"the rectangle p5.Image","type":"p5.Image"}},{"line":1051,"params":[],"return":{"description":"the whole p5.Image","type":"p5.Image"}},{"line":1055,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of pixel at x,y in array format [R, G, B, A]","type":"Number[]"}}]},{"file":"src/webgl/p5.Framebuffer.js","line":1149,"description":"

            Call this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n

            This will also clear the depth buffer so that any future drawing done\nafterwards will go on top.

            \n","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n}\n\nfunction draw() {\n noStroke();\n lights();\n\n // Draw a sphere to the framebuffer\n framebuffer.begin();\n background(0);\n sphere(25);\n framebuffer.end();\n\n // Load its pixels and draw a gradient over the lower half of the canvas\n framebuffer.loadPixels();\n for (let y = height/2; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = (y * width + x) * 4;\n framebuffer.pixels[idx] = (x / width) * 255;\n framebuffer.pixels[idx + 1] = (y / height) * 255;\n framebuffer.pixels[idx + 2] = 255;\n framebuffer.pixels[idx + 3] = 255;\n }\n }\n framebuffer.updatePixels();\n\n // Draw a cube on top of the pixels we just wrote\n framebuffer.begin();\n push();\n translate(20, 20);\n rotateX(0.5);\n rotateY(0.5);\n box(20);\n pop();\n framebuffer.end();\n\n image(framebuffer, -width/2, -height/2);\n noLoop();\n}\n\n
            "],"alt":"A sphere partly occluded by a gradient from cyan to white to magenta on\nthe lower half of the canvas, with a 3D cube drawn on top of that in the\nlower right corner.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1283,"description":"

            A texture with the color information of the framebuffer. Pass this (or the\nframebuffer itself) to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n","itemtype":"property","name":"color","type":"p5.FramebufferTexture","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n framebuffer.end();\n\n // Draw the framebuffer to the main canvas\n image(framebuffer.color, -width/2, -height/2);\n}\n\n
            "],"alt":"A red, green, and blue sphere in the middle of the canvas","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1325,"description":"

            A texture with the depth information of the framebuffer. If the framebuffer\nwas created with { depth: false } in its settings, then this property will\nbe undefined. Pass this to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n","itemtype":"property","name":"depth","type":"p5.FramebufferTexture|undefined","example":["\n
            \n\nlet framebuffer;\nlet depthShader;\n\nconst vert = `\nprecision highp float;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec2 vTexCoord;\nvoid main() {\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n vTexCoord = aTexCoord;\n}\n`;\n\nconst frag = `\nprecision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D depth;\nvoid main() {\n float depthVal = texture2D(depth, vTexCoord).r;\n gl_FragColor = mix(\n vec4(1., 1., 0., 1.), // yellow\n vec4(0., 0., 1., 1.), // blue\n pow(depthVal, 6.)\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n depthShader = createShader(vert, frag);\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n box(20, 20, 100);\n framebuffer.end();\n\n push();\n shader(depthShader);\n depthShader.setUniform('depth', framebuffer.depth);\n plane(framebuffer.width, framebuffer.height);\n pop();\n}\n\n
            "],"alt":"A video of a rectangular prism rotating, with parts closest to the camera\nappearing yellow and colors getting progressively more blue the farther\nfrom the camera they go","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Geometry.js","line":80,"description":"

            Custom bounding box calculation based on the object's vertices.\nThe bounding box is a rectangular prism that encompasses the entire object.\nIt is defined by the minimum and maximum coordinates along each axis, as well\nas the size and offset of the box.

            \n

            It returns an object containing the bounding box properties:

            \n
              \n
            • min: The minimum coordinates of the bounding box as a p5.Vector.
              • \n
            • max: The maximum coordinates of the bounding box as a p5.Vector.
              • \n
            • size: The size of the bounding box as a p5.Vector.
              • \n
            • offset: The offset of the bounding box as a p5.Vector.
              • \n
            \n","itemtype":"method","name":"calculateBoundingBox","memberof":"p5.Geometry.prototype","return":{"description":"","type":"Object"},"example":["\n\n
            \n\nlet particles;\nlet button;\nlet resultParagraph;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n button = createButton('New');\n button.mousePressed(makeParticles);\n\n resultParagraph = createElement('pre').style('width', '200px' );\n resultParagraph.style('font-family', 'monospace');\n resultParagraph.style('font-size', '12px');\n makeParticles();\n}\n\nfunction makeParticles() {\n if (particles) freeGeometry(particles);\n\n particles = buildGeometry(() => {\n for (let i = 0; i < 60; i++) {\n push();\n translate(\n randomGaussian(0, 200),\n randomGaussian(0, 100),\n randomGaussian(0, 150)\n );\n sphere(10);\n pop();\n }\n });\n\n const boundingBox = particles.calculateBoundingBox();\n resultParagraph.html('Bounding Box: \\n' + JSON.stringify(boundingBox, null, 2));\n}\n\nfunction draw() {\n background(255);\n noStroke();\n lights();\n orbitControl();\n model(particles);\n}\n\n\n
            \n"],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":231,"description":"

            Removes the internal colors of p5.Geometry.\nUsing clearColors(), you can use fill() to supply new colors before drawing each shape.\nIf clearColors() is not used, the shapes will use their internal colors by ignoring fill().

            \n","itemtype":"method","name":"clearColors","example":["\n
            \n\nlet shape01;\nlet shape02;\nlet points = [];\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n points.push(new p5.Vector(-1, -1, 0), new p5.Vector(-1, 1, 0),\n new p5.Vector(1, -1, 0), new p5.Vector(-1, -1, 0));\n buildShape01();\n buildShape02();\n}\nfunction draw() {\n background(0);\n fill('pink'); // shape01 retains its internal blue color, so it won't turn pink.\n model(shape01);\n fill('yellow'); // Now, shape02 is yellow.\n model(shape02);\n}\n\nfunction buildShape01() {\n beginGeometry();\n fill('blue'); // shape01's color is blue because its internal colors remain.\n beginShape();\n for (let vec of points) vertex(vec.x * 100, vec.y * 100, vec.z * 100);\n endShape(CLOSE);\n shape01 = endGeometry();\n}\n\nfunction buildShape02() {\n beginGeometry();\n fill('red'); // shape02.clearColors() removes its internal colors. Now, shape02 is red.\n beginShape();\n for (let vec of points) vertex(vec.x * 200, vec.y * 200, vec.z * 200);\n endShape(CLOSE);\n shape02 = endGeometry();\n shape02.clearColors(); // Resets shape02's colors.\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":285,"description":"

            Flips the U texture coordinates of the model.

            \n","itemtype":"method","name":"flipU","return":{"description":"","type":"p5.Geometry"},"example":["\n
            \n\nlet img;\nlet model1;\nlet model2;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(150, 150, WEBGL);\n background(200);\n\n model1 = createShape(50, 50);\n model2 = createShape(50, 50);\n model2.flipU();\n}\n\nfunction draw() {\n background(0);\n\n // original\n push();\n translate(-40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model1);\n pop();\n\n // flipped\n push();\n translate(40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model2);\n pop();\n}\n\nfunction createShape(w, h) {\n return buildGeometry(() => {\n textureMode(NORMAL);\n beginShape();\n vertex(-w / 2, -h / 2, 0, 0);\n vertex(w / 2, -h / 2, 1, 0);\n vertex(w / 2, h / 2, 1, 1);\n vertex(-w / 2, h / 2, 0, 1);\n endShape(CLOSE);\n });\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":357,"description":"

            Flips the V texture coordinates of the model.

            \n","itemtype":"method","name":"flipV","return":{"description":"","type":"p5.Geometry"},"example":["\n
            \n\nlet img;\nlet model1;\nlet model2;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(150, 150, WEBGL);\n background(200);\n\n model1 = createShape(50, 50);\n model2 = createShape(50, 50);\n model2.flipV();\n}\n\nfunction draw() {\n background(0);\n\n // original\n push();\n translate(-40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model1);\n pop();\n\n // flipped\n push();\n translate(40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model2);\n pop();\n}\n\nfunction createShape(w, h) {\n return buildGeometry(() => {\n textureMode(NORMAL);\n beginShape();\n vertex(-w / 2, -h / 2, 0, 0);\n vertex(w / 2, -h / 2, 1, 0);\n vertex(w / 2, h / 2, 1, 1);\n vertex(-w / 2, h / 2, 0, 1);\n endShape(CLOSE);\n });\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":429,"description":"

            computes faces for geometry objects based on the vertices.

            \n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":472,"description":"

            This function calculates normals for each face, where each vertex's normal is the average of the normals of all faces it's connected to.\ni.e computes smooth normals per vertex as an average of each face.

            \n

            When using FLAT shading, vertices are disconnected/duplicated i.e each face has its own copy of vertices.\nWhen using SMOOTH shading, vertices are connected/deduplicated i.e each face has its vertices shared with other faces.

            \n

            Options can include:

            \n
              \n
            • roundToPrecision: Precision value for rounding computations. Defaults to 3.
              • \n
            \n","itemtype":"method","name":"computeNormals","params":[{"name":"shadingType","description":"

            shading type (FLAT for flat shading or SMOOTH for smooth shading) for buildGeometry() outputs. Defaults to FLAT.

            \n","type":"String","optional":true},{"name":"options","description":"

            An optional object with configuration.

            \n","type":"Object","optional":true}],"chainable":1,"example":["\n
            \n\nlet helix;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n helix = buildGeometry(() => {\n beginShape();\n\n for (let i = 0; i < TWO_PI * 3; i += 0.6) {\n let radius = 20;\n let x = cos(i) * radius;\n let y = sin(i) * radius;\n let z = map(i, 0, TWO_PI * 3, -30, 30);\n vertex(x, y, z);\n }\n endShape();\n });\n helix.computeNormals();\n}\nfunction draw() {\n background(255);\n stroke(0);\n fill(150, 200, 250);\n lights();\n rotateX(PI*0.2);\n orbitControl();\n model(helix);\n}\n\n
            ","\n
            \n\nlet star;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n star = buildGeometry(() => {\n beginShape();\n for (let i = 0; i < TWO_PI; i += PI / 5) {\n let outerRadius = 60;\n let innerRadius = 30;\n let xOuter = cos(i) * outerRadius;\n let yOuter = sin(i) * outerRadius;\n let zOuter = random(-20, 20);\n vertex(xOuter, yOuter, zOuter);\n\n let nextI = i + PI / 5 / 2;\n let xInner = cos(nextI) * innerRadius;\n let yInner = sin(nextI) * innerRadius;\n let zInner = random(-20, 20);\n vertex(xInner, yInner, zInner);\n }\n endShape(CLOSE);\n });\n star.computeNormals(SMOOTH);\n}\nfunction draw() {\n background(255);\n stroke(0);\n fill(150, 200, 250);\n lights();\n rotateX(PI*0.2);\n orbitControl();\n model(star);\n}\n\n
            "],"alt":"A star-like geometry, here the computeNormals(SMOOTH) is applied for a smooth shading effect.\nThis helps to avoid the faceted appearance that can occur with flat shading.","class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":643,"description":"

            Averages the vertex normals. Used in curved\nsurfaces

            \n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":664,"description":"

            Averages pole normals. Used in spherical primitives

            \n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":974,"description":"

            Modifies all vertices to be centered within the range -100 to 100.

            \n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.RendererGL.Immediate.js","line":1,"description":"

            Welcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.Immediate.js","line":191,"description":"

            End shape drawing and render vertices to screen.

            \n","chainable":1,"class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.Retained.js","line":8,"params":[{"name":"geometry","description":"

            The model whose resources will be freed

            \n","type":"p5.Geometry"}],"class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.js","line":118,"description":"

            Set attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.

            \n

            Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.

            \n

            If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.

            \n

            The available attributes are:\n
            \nalpha - indicates if the canvas contains an alpha buffer\ndefault is true

            \n

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

            \n

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

            \n

            antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)

            \n

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

            \n

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

            \n

            perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.

            \n

            version - either 1 or 2, to specify which WebGL version to ask for. By\ndefault, WebGL 2 will be requested. If WebGL2 is not available, it will\nfall back to WebGL 1. You can check what version is used with by looking at\nthe global webglVersion property.

            \n","itemtype":"method","name":"setAttributes","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n
            \n
            \nNow with the antialias attribute set to true.\n
            \n
            \n\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n
            \n\n
            \n\n// press the mouse button to disable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\n\n
            "],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":118,"params":[{"name":"key","description":"

            Name of attribute

            \n","type":"String"},{"name":"value","description":"

            New value of named attribute

            \n","type":"Boolean"}]},{"line":262,"params":[{"name":"obj","description":"

            object with key-value pairs

            \n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":106,"description":"

            Shaders belong to the main canvas or a p5.Graphics. Once they are compiled,\nthey can only be used in the context they were compiled on.

            \n

            Use this method to make a new copy of a shader that gets compiled on a\ndifferent context.

            \n","itemtype":"method","name":"copyToContext","params":[{"name":"context","description":"

            The graphic or instance to copy this shader to.\nPass window if you need to copy to the main canvas.

            \n","type":"p5|p5.Graphics"}],"return":{"description":"A new shader on the target context.","type":"p5.Shader"},"example":["\n
            \n\nlet graphic = createGraphics(200, 200, WEBGL);\nlet graphicShader = graphic.createShader(vert, frag);\ngraphic.shader(graphicShader); // Use graphicShader on the graphic\n\nlet mainShader = graphicShader.copyToContext(window);\nshader(mainShader); // Use `mainShader` on the main canvas\n\n
            "],"class":"p5.Shader","module":"3D","submodule":"Material"},{"file":"src/webgl/p5.Shader.js","line":361,"description":"

            Used to set the uniforms of a\np5.Shader object.

            \n

            Uniforms are used as a way to provide shader programs\n(which run on the GPU) with values from a sketch\n(which runs on the CPU).

            \n

            Here are some examples of uniforms you can make:

            \n
              \n
            • booleans
                \n
              • Example: setUniform('x', true) becomes uniform float x with the value 1.0
                • \n
              \n
              • \n
            • numbers
                \n
              • Example: setUniform('x', -2) becomes uniform float x with the value -2.0
                • \n
              \n
              • \n
            • arrays of numbers
                \n
              • Example: setUniform('x', [0, 0.5, 1]) becomes uniform vec3 x with the value vec3(0.0, 0.5, 1.0)
                • \n
              \n
              • \n
            • a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture
                \n
              • Example: setUniform('x', img) becomes uniform sampler2D x
                • \n
              \n
              • \n
            \n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"

            the name of the uniform.\nMust correspond to the name used in the vertex and fragment shaders

            \n","type":"String"},{"name":"data","description":"

            The value to assign to the uniform. This can be\na boolean (true/false), a number, an array of numbers, or\nan image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)

            \n","type":"Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"}],"example":["\n
            \n\n// Click within the image to toggle the value of uniforms\n// Note: for an alternative approach to the same example,\n// involving toggling between shaders please refer to:\n// https://p5js.org/reference/#/p5/shader\n\nlet grad;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n shader(grad);\n noStroke();\n\n describe(\n 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'\n );\n}\n\nfunction draw() {\n // update the offset values for each scenario,\n // moving the \"grad\" shader in either vertical or\n // horizontal direction each with differing colors\n\n if (showRedGreen === true) {\n grad.setUniform('colorCenter', [1, 0, 0]);\n grad.setUniform('colorBackground', [0, 1, 0]);\n grad.setUniform('offset', [sin(millis() / 2000), 1]);\n } else {\n grad.setUniform('colorCenter', [1, 0.5, 0]);\n grad.setUniform('colorBackground', [0.226, 0, 0.615]);\n grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            "],"alt":"canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.","class":"p5.Shader","module":"3D","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"3D"},{"file":"lib/addons/p5.sound.js","line":52,"description":"

            p5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound

            \n

            From the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors

            \n

            MIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE

            \n

            Some of the many audio libraries & resources that inspire p5.sound:

            \n\n

            Web Audio API: http://w3.org/TR/webaudio/

            \n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":159,"description":"

            Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the Web Audio API\n.

            \n\n

            Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.

            ","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n
            \n function draw() {\n background(255);\n textAlign(CENTER);\n\n if (getAudioContext().state !== 'running') {\n text('click to start audio', width/2, height/2);\n } else {\n text('audio is enabled', width/2, height/2);\n }\n }\n\n function touchStarted() {\n if (getAudioContext().state !== 'running') {\n getAudioContext().resume();\n }\n var synth = new p5.MonoSynth();\n synth.play('A4', 0.5, 0, 0.2);\n }\n\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":198,"description":"

            It is not only a good practice to give users control over starting\naudio. This policy is enforced by many web browsers, including iOS and\nGoogle Chrome, which create the Web Audio API's\nAudio Context\nin a suspended state.

            \n\n

            In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. mousePressed()) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling start() on a p5.Oscillator,\n play() on a p5.SoundFile, or simply\nuserStartAudio().

            \n\n

            userStartAudio() starts the AudioContext on a user\ngesture. The default behavior will enable audio on any\nmouseUp or touchEnd event. It can also be placed in a specific\ninteraction function, such as mousePressed() as in the\nexample below. This method utilizes\nStartAudioContext\n, a library by Yotam Mann (MIT Licence, 2016).

            ","params":[{"name":"elements","description":"

            This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.

            \n","type":"Element|Array","optional":true},{"name":"callback","description":"

            Callback to invoke when the AudioContext\n has started

            \n","type":"Function","optional":true}],"return":{"description":"Returns a Promise that resolves when\n the AudioContext state is 'running'","type":"Promise"},"itemtype":"method","name":"userStartAudio","example":["\n
            \nfunction setup() {\n // mimics the autoplay policy\n getAudioContext().suspend();\n\n let mySynth = new p5.MonoSynth();\n\n // This won't play until the context has resumed\n mySynth.play('A6');\n}\nfunction draw() {\n background(220);\n textAlign(CENTER, CENTER);\n text(getAudioContext().state, width/2, height/2);\n}\nfunction mousePressed() {\n userStartAudio();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":401,"description":"

            This module has shims

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":536,"description":"

            Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":726,"description":"

            Returns a number representing the output volume for sound\nin this sketch.

            \n","itemtype":"method","name":"getOutputVolume","return":{"description":"Output volume for sound in this sketch.\n Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":738,"description":"

            Scale the output of all sound in this sketch

            \nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.\n\n

            Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.

            \n

            How This Works: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.

            \n\n

            If no value is provided, returns a Web Audio API Gain Node

            ","itemtype":"method","name":"outputVolume","params":[{"name":"volume","description":"

            Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Fade for t seconds

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen at\n t seconds in the future

            \n","type":"Number","optional":true}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":782,"description":"

            p5.soundOut is the p5.sound final output bus. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (.limiter),\nand Gain Nodes for .input and .output.

            \n","itemtype":"property","name":"soundOut","type":"Object","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":807,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":811,"description":"

            Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.

            \n","itemtype":"method","name":"sampleRate","return":{"description":"samplerate samples per second","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":825,"description":"

            Returns the closest MIDI note value for\na given frequency.

            \n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"

            A freqeuncy, for example, the \"A\"\n above Middle C is 440Hz

            \n","type":"Number"}],"return":{"description":"MIDI note value","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":841,"description":"

            Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.

            \n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"

            The number of a MIDI note

            \n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n
            \nlet midiNotes = [60, 64, 67, 72];\nlet noteIndex = 0;\nlet midiVal, freq;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n osc = new p5.TriOsc();\n env = new p5.Envelope();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 10, 20);\n if (midiVal) {\n text('MIDI: ' + midiVal, 10, 40);\n text('Freq: ' + freq, 10, 60);\n }\n}\n\nfunction startSound() {\n // see also: userStartAudio();\n osc.start();\n\n midiVal = midiNotes[noteIndex % midiNotes.length];\n freq = midiToFreq(midiVal);\n osc.freq(freq);\n env.ramp(osc, 0, 1.0, 0);\n\n noteIndex++;\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":925,"description":"

            List the SoundFile formats that you will include. LoadSound\nwill search your directory for these extensions, and will pick\na format that is compatable with the client's web browser.\nHere is a free online file\nconverter.

            \n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"

            i.e. 'mp3', 'wav', 'ogg'

            \n","type":"String","optional":true,"multiple":true}],"example":["\n
            \nfunction preload() {\n // set the global sound formats\n soundFormats('mp3', 'ogg');\n\n // load either beatbox.mp3, or .ogg, depending on browser\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('sound loaded! tap to play', 10, 20, width - 20);\n cnv.mousePressed(function() {\n mySound.play();\n });\n }\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1040,"description":"

            Used by Osc and Envelope to chain signal math

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1145,"description":"

            Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device.\nFor uploading audio to a server, use\np5.SoundFile.saveBlob.

            \n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"

            p5.SoundFile that you wish to save

            \n","type":"p5.SoundFile"},{"name":"fileName","description":"

            name of the resulting .wav file.

            \n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"

            Returns true if the sound file finished loading successfully.

            \n","itemtype":"method","name":"isLoaded","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1679,"description":"

            Play the p5.SoundFile

            \n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"

            (optional) schedule playback to start (in seconds from now).

            \n","type":"Number","optional":true},{"name":"rate","description":"

            (optional) playback rate

            \n","type":"Number","optional":true},{"name":"amp","description":"

            (optional) amplitude (volume)\n of playback

            \n","type":"Number","optional":true},{"name":"cueStart","description":"

            (optional) cue start time in seconds

            \n","type":"Number","optional":true},{"name":"duration","description":"

            (optional) duration of playback in seconds

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1787,"description":"

            p5.SoundFile has two play modes: restart and\nsustain. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. With untilDone, a sound will play only if it's\nnot already playing. Sustain is the default mode.

            \n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"

            'restart' or 'sustain' or 'untilDone'

            \n","type":"String"}],"example":["\n
            \nlet mySound;\nfunction preload(){\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n noFill();\n rect(0, height/2, width - 1, height/2 - 1);\n rect(0, 0, width - 1, height/2);\n textAlign(CENTER, CENTER);\n fill(20);\n text('restart', width/2, 1 * height/4);\n text('sustain', width/2, 3 * height/4);\n}\nfunction canvasPressed() {\n if (mouseX < height/2) {\n mySound.playMode('restart');\n } else {\n mySound.playMode('sustain');\n }\n mySound.play();\n}\n\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1847,"description":"

            Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.

            \n

            After pausing, .play() will resume from the paused\nposition.\nIf p5.SoundFile had been set to loop before it was paused,\nit will continue to loop after it is unpaused with .play().

            \n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n seconds from now

            \n","type":"Number","optional":true}],"example":["\n
            \nlet soundFile;\nfunction preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n}\nfunction canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n}\nfunction mouseReleased() {\n soundFile.pause();\n background(220);\n}\n\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1905,"description":"

            Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.

            \n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n seconds from now

            \n","type":"Number","optional":true},{"name":"rate","description":"

            (optional) playback rate

            \n","type":"Number","optional":true},{"name":"amp","description":"

            (optional) playback volume

            \n","type":"Number","optional":true},{"name":"cueLoopStart","description":"

            (optional) startTime in seconds

            \n","type":"Number","optional":true},{"name":"duration","description":"

            (optional) loop duration in seconds

            \n","type":"Number","optional":true}],"example":["\n
            \n let soundFile;\n let loopStart = 0.5;\n let loopDuration = 0.2;\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n }\n function canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n }\n function mouseReleased() {\n soundFile.pause();\n background(220);\n }\n \n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1950,"description":"

            Set a p5.SoundFile's looping flag to true or false. If the sound\nis currently playing, this change will take effect when it\nreaches the end of the current playback.

            \n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"

            set looping to true or false

            \n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1976,"description":"

            Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.

            \n","itemtype":"method","name":"isLooping","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1997,"description":"

            Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).

            \n","itemtype":"method","name":"isPlaying","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2011,"description":"

            Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).

            \n","itemtype":"method","name":"isPaused","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2025,"description":"

            Stop soundfile playback.

            \n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n in seconds from now

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2087,"description":"

            Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).

            \n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"

            Set the stereo panner

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"example":["\n
            \n let ballX = 0;\n let soundFile;\n\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/beatbox.mp3');\n }\n\n function draw() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n ballX = constrain(mouseX, 0, width);\n ellipse(ballX, height/2, 20, 20);\n }\n\n function canvasPressed(){\n // map the ball's x location to a panning degree\n // between -1.0 (left) and 1.0 (right)\n let panning = map(ballX, 0., width,-1.0, 1.0);\n soundFile.pan(panning);\n soundFile.play();\n }\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2131,"description":"

            Returns the current stereo pan position (-1.0 to 1.0)

            \n","itemtype":"method","name":"getPan","return":{"description":"Returns the stereo pan setting of the Oscillator\n as a number between -1.0 (left) and 1.0 (right).\n 0.0 is center and default.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2146,"description":"

            Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.

            \n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"

            Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.

            \n","type":"Number","optional":true}],"example":["\n
            \nlet mySound;\n\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n}\nfunction canvasPressed() {\n mySound.loop();\n}\nfunction mouseReleased() {\n mySound.pause();\n}\nfunction draw() {\n background(220);\n\n // Set the rate to a range between 0.1 and 4\n // Changing the rate also alters the pitch\n let playbackRate = map(mouseY, 0.1, height, 2, 0);\n playbackRate = constrain(playbackRate, 0.01, 4);\n mySound.rate(playbackRate);\n\n line(0, mouseY, width, mouseY);\n text('rate: ' + round(playbackRate * 100) + '%', 10, 20);\n}\n\n \n
            \n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2239,"description":"

            Multiply the output volume (amplitude) of a sound file\nbetween 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.

            \n

            Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.

            \n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"

            Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Fade for t seconds

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen at\n t seconds in the future

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2276,"description":"

            Returns the duration of a sound file in seconds.

            \n","itemtype":"method","name":"duration","return":{"description":"The duration of the soundFile in seconds.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2293,"description":"

            Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if reverseBuffer\nhas been called, currentTime will count backwards.

            \n","itemtype":"method","name":"currentTime","return":{"description":"currentTime of the soundFile in seconds.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2308,"description":"

            Move the playhead of a soundfile that is currently playing to a\nnew position and a new duration, in seconds.\nIf none are given, will reset the file to play entire duration\nfrom start to finish. To set the position of a soundfile that is\nnot currently playing, use the play or loop methods.

            \n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"

            cueTime of the soundFile in seconds.

            \n","type":"Number"},{"name":"duration","description":"

            duration in seconds.

            \n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2340,"description":"

            Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.

            \n","itemtype":"method","name":"channels","return":{"description":"[channels]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2354,"description":"

            Return the sample rate of the sound file.

            \n","itemtype":"method","name":"sampleRate","return":{"description":"[sampleRate]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2367,"description":"

            Return the number of samples in a sound file.\nEqual to sampleRate * duration.

            \n","itemtype":"method","name":"frames","return":{"description":"[sampleCount]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2381,"description":"

            Returns an array of amplitude peaks in a p5.SoundFile that can be\nused to draw a static waveform. Scans through the p5.SoundFile's\naudio buffer to find the greatest amplitudes. Accepts one\nparameter, 'length', which determines size of the array.\nLarger arrays result in more precise waveform visualizations.

            \n

            Inspired by Wavesurfer.js.

            \n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"

            length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.

            \n","type":"Number","optional":true}],"return":{"description":"Array of peaks.","type":"Float32Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2443,"description":"

            Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).

            \n","itemtype":"method","name":"reverseBuffer","example":["\n
            \nlet drum;\nfunction preload() {\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction canvasPressed() {\n drum.stop();\n drum.reverseBuffer();\n drum.play();\n}\n \n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2497,"description":"

            Schedule an event to be called when the soundfile\nreaches the end of a buffer. If the soundfile is\nplaying through once, this will be called when it\nends. If it is looping, it will be called when\nstop is called.

            \n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"

            function to call when the\n soundfile has ended.

            \n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2565,"description":"

            Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe main output. Most p5sound objects connect to the master\noutput when they are created.

            \n","itemtype":"method","name":"connect","params":[{"name":"object","description":"

            Audio object that accepts an input

            \n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2590,"description":"

            Disconnects the output of this p5sound object.

            \n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2604,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2612,"description":"

            Reset the source for this SoundFile to a\nnew path (URL).

            \n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"

            path to audio file

            \n","type":"String"},{"name":"callback","description":"

            Callback

            \n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2630,"description":"

            Replace the current Audio Buffer with a new Buffer.

            \n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"

            Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.

            \n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2719,"description":"

            Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.

            \n

            Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.

            \n

            Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.

            \n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"

            Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.

            \n","type":"Number"},{"name":"callback","description":"

            Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.

            \n","type":"Function"},{"name":"value","description":"

            An object to be passed as the\n second parameter to the\n callback function.

            \n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n useful for removeCue(id)","type":"Number"},"example":["\n
            \nlet mySound;\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 10, 20);\n\n // schedule calls to changeText\n mySound.addCue(0, changeText, \"hello\" );\n mySound.addCue(0.5, changeText, \"hello,\" );\n mySound.addCue(1, changeText, \"hello, p5!\");\n mySound.addCue(1.5, changeText, \"hello, p5!!\");\n mySound.addCue(2, changeText, \"hello, p5!!!!!\");\n}\n\nfunction changeText(val) {\n background(220);\n text(val, 10, 20);\n}\n\nfunction canvasPressed() {\n mySound.play();\n}\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2790,"description":"

            Remove a callback based on its ID. The ID is returned by the\naddCue method.

            \n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"

            ID of the cue, as returned by addCue

            \n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2817,"description":"

            Remove all of the callbacks that had originally been scheduled\nvia the addCue method.

            \n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2850,"description":"

            Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device. To upload a file to a server, see\ngetBlob

            \n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"

            name of the resulting .wav file.

            \n","type":"String","optional":true}],"example":["\n
            \n let mySound;\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to download', 10, 20);\n }\n\n function canvasPressed() {\n mySound.save('my cool filename');\n }\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2882,"description":"

            This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"Blob\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an http request. We'll\nuse the httpDo options object to send a POST request with some\nspecific options: we encode the request as multipart/form-data,\nand attach the blob as one of the form values using FormData.

            \n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n
            \n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n\n function setup() {\n noCanvas();\n let soundBlob = mySound.getBlob();\n\n // Now we can send the blob to a server...\n let serverUrl = 'https://jsonplaceholder.typicode.com/posts';\n let httpRequestOptions = {\n method: 'POST',\n body: new FormData().append('soundBlob', soundBlob),\n headers: new Headers({\n 'Content-Type': 'multipart/form-data'\n })\n };\n httpDo(serverUrl, httpRequestOptions);\n\n // We can also create an `ObjectURL` pointing to the Blob\n let blobUrl = URL.createObjectURL(soundBlob);\n\n // The `
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2946,"description":"

            loadSound() returns a new p5.SoundFile from a specified\npath. If called during preload(), the p5.SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the p5.SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n\nlocal server is recommended when loading external files.

            \n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"

            Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.

            \n","type":"String|Array"},{"name":"successCallback","description":"

            Name of a function to call once file loads

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            Name of a function to call if there is\n an error loading the file.

            \n","type":"Function","optional":true},{"name":"whileLoading","description":"

            Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.

            \n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n
            \nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3117,"description":"

            Connects to the p5sound instance (main output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).

            \n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"

            set the sound source\n (optional, defaults to\n main output)

            \n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"

            a range between 0.0 and 1.0\n to smooth amplitude readings

            \n","type":"Number|undefined","optional":true}],"example":["\n
            \nfunction preload(){\n sound1 = loadSound('assets/beat.mp3');\n sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n\n amplitude = new p5.Amplitude();\n amplitude.setInput(sound2);\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound1.isPlaying() && sound2.isPlaying()) {\n sound1.stop();\n sound2.stop();\n } else {\n sound1.play();\n sound2.play();\n }\n}\n
            "],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3209,"description":"

            Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.

            \n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"

            Optionally return only channel 0 (left) or 1 (right)

            \n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n
            \nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220, 150);\n textAlign(CENTER);\n text('tap to play', width/2, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound.isPlaying()) {\n sound.stop();\n } else {\n sound.play();\n }\n}\n
            "],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3264,"description":"

            Determines whether the results of Amplitude.process() will be\nNormalized. To normalize, Amplitude finds the difference the\nloudest reading it has processed and the maximum amplitude of\n1.0. Amplitude adds this difference to all values to produce\nresults that will reliably map between 0.0 and 1.0. However,\nif a louder moment occurs, the amount that Normalize adds to\nall the values will change. Accepts an optional boolean parameter\n(true or false). Normalizing is off by default.

            \n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"

            set normalize to true (1) or false (0)

            \n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3293,"description":"

            Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.

            \n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"

            smoothing from 0.0 <= 1

            \n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3476,"description":"

            Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.

            \n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"

            p5.sound object (or web audio API source node)

            \n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3501,"description":"

            Returns an array of amplitude values (between -1.0 and +1.0) that represent\na snapshot of amplitude readings in a single buffer. Length will be\nequal to bins (defaults to 1024). Can be used to draw the waveform\nof a sound.

            \n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"

            Must be a power of two between\n 16 and 1024. Defaults to 1024.

            \n","type":"Number","optional":true},{"name":"precision","description":"

            If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.

            \n","type":"String","optional":true}],"return":{"description":"Array Array of amplitude values (-1 to 1)\n over time. Array length = bins.","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3553,"description":"

            Returns an array of amplitude values (between 0 and 255)\nacross the frequency spectrum. Length is equal to FFT bins\n(1024 by default). The array indices correspond to frequencies\n(i.e. pitches), from the lowest to the highest that humans can\nhear. Each value represents amplitude at that slice of the\nfrequency spectrum. Must be called prior to using\ngetEnergy().

            \n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"

            Must be a power of two between\n 16 and 1024. Defaults to 1024.

            \n","type":"Number","optional":true},{"name":"scale","description":"

            If \"dB,\" returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.

            \n","type":"Number","optional":true}],"return":{"description":"spectrum Array of energy (amplitude/volume)\n values across the frequency spectrum.\n Lowest energy (silence) = 0, highest\n possible is 255.","type":"Array"},"example":["\n
            \nlet osc, fft;\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mousePressed(startSound);\n osc = new p5.Oscillator();\n osc.amp(0);\n fft = new p5.FFT();\n}\n\nfunction draw(){\n background(220);\n\n let freq = map(mouseX, 0, windowWidth, 20, 10000);\n freq = constrain(freq, 1, 20000);\n osc.freq(freq);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h );\n }\n\n stroke(255);\n if (!osc.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text(round(freq)+'Hz', 10, 20);\n }\n}\n\nfunction startSound() {\n osc.start();\n osc.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n osc.amp(0, 0.2);\n}\n
            \n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3650,"description":"

            Returns the amount of energy (volume) at a specific\n\nfrequency, or the average amount of energy between two\nfrequencies. Accepts Number(s) corresponding\nto frequency (in Hz), or a \"string\" corresponding to predefined\nfrequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\").\nReturns a range between 0 (no energy/volume at that frequency) and\n255 (maximum energy).\nNOTE: analyze() must be called prior to getEnergy(). analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results to determine the value at a specific frequency or\nrange of frequencies.

            \n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"

            Will return a value representing\n energy at this frequency. Alternately,\n the strings \"bass\", \"lowMid\" \"mid\",\n \"highMid\", and \"treble\" will return\n predefined frequency ranges.

            \n","type":"Number|String"},{"name":"frequency2","description":"

            If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.

            \n","type":"Number","optional":true}],"return":{"description":"Energy Energy (volume/amplitude) from\n 0 and 255.","type":"Number"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3739,"description":"

            Returns the\n\nspectral centroid of the input signal.\nNOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.

            \n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n
            \n function setup(){\ncnv = createCanvas(100,100);\ncnv.mousePressed(userStartAudio);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\nfunction draw() {\nif (getAudioContext().state !== 'running') {\n background(220);\n text('tap here and enable mic to begin', 10, 20, width - 20);\n return;\n}\nlet centroidplot = 0.0;\nlet spectralCentroid = 0;\n\nbackground(0);\nstroke(0,255,0);\nlet spectrum = fft.analyze();\nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\nfor (let i = 0; i < spectrum.length; i++){\n let x = map(log(i), 0, log(spectrum.length), 0, width);\n let h = map(spectrum[i], 0, 255, 0, height);\n let rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n rect(x, height, rectangle_width, -h )\n}\nlet nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nlet mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255); // text is white\ntext('centroid: ', 10, 20);\ntext(round(spectralCentroid)+' Hz', 10, 40);\n}\n
            "],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3826,"description":"

            Smooth FFT analysis by averaging with the last analysis frame.

            \n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"

            0.0 < smoothing < 1.0.\n Defaults to 0.8.

            \n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"

            Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\nNOTE: analyze() must be called prior to linAverages(). Analyze()\ntells the FFT to analyze frequency data, and linAverages() uses\nthe results to group them into a smaller set of averages.

            \n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"

            Number of returned frequency groups

            \n","type":"Number"}],"return":{"description":"linearAverages Array of average amplitude values for each group","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3889,"description":"

            Returns an array of average amplitude values of the spectrum, for a given\nset of \nOctave Bands\nNOTE: analyze() must be called prior to logAverages(). Analyze()\ntells the FFT to analyze frequency data, and logAverages() uses\nthe results to group them into a smaller set of averages.

            \n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"

            Array of Octave Bands objects for grouping

            \n","type":"Array"}],"return":{"description":"logAverages Array of average amplitude values for each group","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3925,"description":"

            Calculates and Returns the 1/N\nOctave Bands\nN defaults to 3 and minimum central frequency to 15.625Hz.\n(1/3 Octave Bands ~= 31 Frequency Bands)\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\nand produce less frequency groups.

            \n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"

            Specifies the 1/N type of generated octave bands

            \n","type":"Number"},{"name":"fCtr0","description":"

            Minimum central frequency for the lowest band

            \n","type":"Number"}],"return":{"description":"octaveBands Array of octave band objects with their bounds","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4168,"description":"

            Start an oscillator.

            \n

            Starting an oscillator on a user gesture will enable audio in browsers\nthat have a strict autoplay policy, including Chrome and most mobile\ndevices. See also: userStartAudio().

            \n","itemtype":"method","name":"start","params":[{"name":"time","description":"

            startTime in seconds from now.

            \n","type":"Number","optional":true},{"name":"frequency","description":"

            frequency in Hz.

            \n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4218,"description":"

            Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.

            \n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"

            Time, in seconds from now.

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4238,"description":"

            Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            between 0 and 1.0\n or a modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"gain If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's\n gain/amplitude/volume)","type":"AudioParam"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4271,"description":"

            Returns the value of output gain

            \n","itemtype":"method","name":"getAmp","return":{"description":"Amplitude value between 0.0 and 1.0","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4285,"description":"

            Set frequency of an oscillator to a value. Or, pass in an object\nsuch as an oscillator to modulate the frequency with an audio signal.

            \n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"

            Frequency in Hz\n or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Ramp time (in seconds)

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen\n at x seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"Frequency If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's frequency","type":"AudioParam"},"example":["\n
            \nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator(300);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playOscillator() {\n osc.start();\n osc.amp(0.5);\n // start at 700Hz\n osc.freq(700);\n // ramp to 60Hz over 0.7 seconds\n osc.freq(60, 0.7);\n osc.amp(0, 0.1, 0.7);\n}\n
            "],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4360,"description":"

            Returns the value of frequency of oscillator

            \n","itemtype":"method","name":"getFreq","return":{"description":"Frequency of oscillator in Hertz","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4373,"description":"

            Set type to 'sine', 'triangle', 'sawtooth' or 'square'.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'sine', 'triangle', 'sawtooth' or 'square'.

            \n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4386,"description":"

            Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'.

            \n","itemtype":"method","name":"getType","return":{"description":"type of oscillator eg . 'sine', 'triangle', 'sawtooth' or 'square'.","type":"String"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4399,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4420,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4444,"description":"

            Pan between Left (-1) and Right (1)

            \n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"

            Number between -1 and 1

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4460,"description":"

            Returns the current value of panPosition , between Left (-1) and Right (1)

            \n","itemtype":"method","name":"getPan","return":{"description":"panPosition of oscillator , between Left (-1) and Right (1)","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4494,"description":"

            Set the phase of an oscillator between 0.0 and 1.0.\nIn this implementation, phase is a delay time\nbased on the oscillator's current frequency.

            \n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"

            float between 0.0 and 1.0

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4522,"description":"

            Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method again\nwill override the initial add() with a new value.

            \n","itemtype":"method","name":"add","params":[{"name":"number","description":"

            Constant number to add

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with scaled output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4543,"description":"

            Multiply the p5.Oscillator's output amplitude\nby a fixed value (i.e. turn it up!). Calling this method\nagain will override the initial mult() with a new value.

            \n","itemtype":"method","name":"mult","params":[{"name":"number","description":"

            Constant number to multiply

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with multiplied output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4563,"description":"

            Scale this oscillator's amplitude values to a given\nrange, and return the oscillator. Calling this method\nagain will override the initial scale() with new values.

            \n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"inMax","description":"

            input range maximum

            \n","type":"Number"},{"name":"outMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"outMax","description":"

            input range maximum

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with scaled output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4767,"description":"

            Time until envelope reaches attackLevel

            \n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4772,"description":"

            Level once attack is complete.

            \n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4778,"description":"

            Time until envelope reaches decayLevel.

            \n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4784,"description":"

            Level after decay. The envelope will sustain here until it is released.

            \n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4790,"description":"

            Duration of the release portion of the envelope.

            \n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4796,"description":"

            Level at the end of the release.

            \n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4833,"description":"

            Reset the envelope with a series of time/value pairs.

            \n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"

            Time (in seconds) before level\n reaches attackLevel

            \n","type":"Number"},{"name":"attackLevel","description":"

            Typically an amplitude between\n 0.0 and 1.0

            \n","type":"Number"},{"name":"decayTime","description":"

            Time

            \n","type":"Number"},{"name":"decayLevel","description":"

            Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)

            \n","type":"Number"},{"name":"releaseTime","description":"

            Release Time (in seconds)

            \n","type":"Number"},{"name":"releaseLevel","description":"

            Amplitude

            \n","type":"Number"}],"example":["\n
            \nlet attackTime;\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\nlet l3 = 0.2; // release time in seconds\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n\n attackTime = map(mouseX, 0, width, 0.0, 1.0);\n text('attack time: ' + attackTime, 5, height - 20);\n}\n\n// mouseClick triggers envelope if over canvas\nfunction playSound() {\n env.set(attackTime, l1, t2, l2, l3);\n\n triOsc.start();\n env.play(triOsc);\n}\n
            \n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4895,"description":"

            Set values like a traditional\n\nADSR envelope\n.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number"},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4964,"description":"

            Set max (attackLevel) and min (releaseLevel) of envelope.

            \n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"

            attack level (defaults to 1)

            \n","type":"Number"},{"name":"rLevel","description":"

            release level (defaults to 0)

            \n","type":"Number"}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5037,"description":"

            Assign a parameter to be controlled by this envelope.\nIf a p5.Sound object is given, then the p5.Envelope will control its\noutput gain. If multiple inputs are provided, the env will\ncontrol all of them.

            \n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"

            A p5.sound object or\n Web Audio Param.

            \n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5055,"description":"

            Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.

            \n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"

            true is exponential, false is linear

            \n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5078,"description":"

            Play tells the envelope to start acting on a given input.\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\nSoundFile), then Envelope will control its output volume.\nEnvelopes can also be used to control any \nWeb Audio Audio Param.

            ","itemtype":"method","name":"play","params":[{"name":"unit","description":"

            A p5.sound object or\n Web Audio Param.

            \n","type":"Object"},{"name":"startTime","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope

            \n","type":"Number","optional":true}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n triOsc.start();\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n // ensure that audio is enabled\n userStartAudio();\n\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5148,"description":"

            Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go. Input can be\nany p5.sound object, or a \nWeb Audio Param.

            \n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            time from now (in seconds)

            \n","type":"Number"}],"example":["\n
            \nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5256,"description":"

            Trigger the Release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number"}],"example":["\n
            \nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5350,"description":"

            Exponentially ramp to a value using the first two\nvalues from setADSR(attackTime, decayTime)\nas \ntime constants for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.

            \n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            When to trigger the ramp

            \n","type":"Number"},{"name":"v","description":"

            Target value

            \n","type":"Number"},{"name":"v2","description":"

            Second target value

            \n","type":"Number","optional":true}],"example":["\n
            \nlet env, osc, amp;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet attackLevel = 1;\nlet decayLevel = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n fill(0,255,0);\n noStroke();\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime);\n osc = new p5.Oscillator();\n osc.amp(env);\n amp = new p5.Amplitude();\n\n cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n // ensures audio is enabled. See also: `userStartAudio`\n osc.start();\n\n env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n background(20);\n text('tap to play', 10, 20);\n let h = map(amp.getLevel(), 0, 0.4, 0, height);;\n rect(0, height, width, -h);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5460,"description":"

            Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method\nagain will override the initial add() with new values.

            \n","itemtype":"method","name":"add","params":[{"name":"number","description":"

            Constant number to add

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5479,"description":"

            Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.

            \n","itemtype":"method","name":"mult","params":[{"name":"number","description":"

            Constant number to multiply

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5498,"description":"

            Scale this envelope's amplitude values to a given\nrange, and return the envelope. Calling this method\nagain will override the initial scale() with new values.

            \n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"inMax","description":"

            input range maximum

            \n","type":"Number"},{"name":"outMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"outMax","description":"

            input range maximum

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5657,"description":"

            Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'white', 'pink' or 'brown'

            \n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5871,"description":"

            Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).

            \n","itemtype":"method","name":"width","params":[{"name":"width","description":"

            Width between the pulses (0 to 1.0,\n defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6066,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6070,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6075,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6080,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6085,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6090,"description":"

            Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.

            \n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6098,"description":"

            Input amplitude, connect to it by default but not to master out

            \n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6114,"description":"

            Start processing audio input. This enables the use of other\nAudioIn methods like getLevel(). Note that by default, AudioIn\nis not connected to p5.sound's output. So you won't hear\nanything unless you use the connect() method.

            \n

            Certain browsers limit access to the user's microphone. For example,\nChrome only allows access from localhost and over https. For this reason,\nyou may want to include an errorCallback—a function that is called in case\nthe browser won't provide mic access.

            \n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"

            Name of a function to call on\n success.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.

            \n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6171,"description":"

            Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.

            \n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6191,"description":"

            Connect to an audio unit. If no parameter is provided, will\nconnect to the main output (i.e. your speakers).

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            An object that accepts audio input,\n such as an FFT

            \n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6216,"description":"

            Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.

            \n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6234,"description":"

            Read the Amplitude (volume level) of an AudioIn. The AudioIn\nclass contains its own instance of the Amplitude class to help\nmake it easy to get a microphone's volume level. Accepts an\noptional smoothing value (0.0 < 1.0). NOTE: AudioIn must\n.start() before using .getLevel().

            \n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"

            Smoothing is 0.0 by default.\n Smooths values based on previous values.

            \n","type":"Number","optional":true}],"return":{"description":"Volume level (between 0.0 and 1.0)","type":"Number"},"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6257,"description":"

            Set amplitude (volume) of a mic input between 0 and 1.0.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            between 0 and 1.0

            \n","type":"Number"},{"name":"time","description":"

            ramp time (optional)

            \n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6280,"description":"

            Returns a list of available input sources. This is a wrapper\nfor \nMediaDevices.enumerateDevices() - Web APIs | MDN\nand it returns a Promise.

            \n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"

            This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            This optional callback receives the error\n message as its argument.

            \n","type":"Function","optional":true}],"return":{"description":"Returns a Promise that can be used in place of the callbacks, similar\n to the enumerateDevices() method","type":"Promise"},"example":["\n
            \n let audioIn;\n\n function setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n }\n\n function gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n }\n
            "],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6340,"description":"

            Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n \n navigator.mediaDevices.enumerateDevices()

            \n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"

            position of input source in the array

            \n","type":"Number"}],"example":["\n
            \nlet audioIn;\n\nfunction setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n}\n\nfunction gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n}\n
            "],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6462,"description":"

            In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter

            \n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6478,"description":"

            Set the output volume of the filter.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            amplitude between 0 and 1.0

            \n","type":"Number","optional":true},{"name":"rampTime","description":"

            create a fade that lasts until rampTime

            \n","type":"Number","optional":true},{"name":"tFromNow","description":"

            schedule this event to happen in tFromNow seconds

            \n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6502,"description":"

            Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments

            \n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"

            Chain together multiple sound objects

            \n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"

            Adjust the dry/wet value.

            \n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"

            The desired drywet value (0 - 1.0)

            \n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6542,"description":"

            Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6557,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6719,"description":"

            The p5.Filter is built with a\n\nWeb Audio BiquadFilter Node.

            \n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6742,"description":"

            Filter an audio signal according to a set\nof filter parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"

            An object that outputs audio

            \n","type":"Object"},{"name":"freq","description":"

            Frequency in Hz, from 10 to 22050

            \n","type":"Number","optional":true},{"name":"res","description":"

            Resonance/Width of the filter frequency\n from 0.001 to 1000

            \n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6760,"description":"

            Set the frequency and the resonance of the filter.

            \n","itemtype":"method","name":"set","params":[{"name":"freq","description":"

            Frequency in Hz, from 10 to 22050

            \n","type":"Number","optional":true},{"name":"res","description":"

            Resonance (Q) from 0.001 to 1000

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6781,"description":"

            Set the filter frequency, in Hz, from 10 to 22050 (the range of\nhuman hearing, although in reality most people hear in a narrower\nrange).

            \n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"

            Filter Frequency

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"value Returns the current frequency value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6811,"description":"

            Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.

            \n","itemtype":"method","name":"res","params":[{"name":"res","description":"

            Resonance/Width of filter freq\n from 0.001 to 1000

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"value Returns the current res value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6838,"description":"

            Controls the gain attribute of a Biquad Filter.\nThis is distinctly different from .amp() which is inherited from p5.Effect\n.amp() controls the volume via the output gain node\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.

            \n","itemtype":"method","name":"gain","params":[{"name":"gain","description":"","type":"Number"}],"return":{"description":"Returns the current or updated gain value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6864,"description":"

            Toggle function. Switches between the specified type and allpass

            \n","itemtype":"method","name":"toggle","return":{"description":"[Toggle value]","type":"Boolean"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6884,"description":"

            Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".

            \n","itemtype":"method","name":"setType","params":[{"name":"t","description":"","type":"String"}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7198,"description":"

            The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the \np5.Filter API, especially gain and freq.\nBands are stored in an array, with indices 0 - 3, or 0 - 7

            \n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7239,"description":"

            Process an input by connecting it to the EQ

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Audio source

            \n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7629,"description":"

            \nWeb Audio Spatial Panner Node

            \n

            Properties include
            \n Panning Model\n : \"equal power\" or \"HRTF\"
            \n DistanceModel\n: \"linear\", \"inverse\", or \"exponential\"

            \n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"

            Connect an audio sorce

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Input source

            \n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7668,"description":"

            Set the X,Y,Z position of the Panner

            \n","itemtype":"method","name":"set","params":[{"name":"xVal","description":"","type":"Number"},{"name":"yVal","description":"","type":"Number"},{"name":"zVal","description":"","type":"Number"},{"name":"time","description":"","type":"Number"}],"return":{"description":"Updated x, y, z values as an array","type":"Array"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7687,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionX","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7694,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionY","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7701,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionZ","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7753,"description":"

            Set the X,Y,Z position of the Panner

            \n","itemtype":"method","name":"orient","params":[{"name":"xVal","description":"","type":"Number"},{"name":"yVal","description":"","type":"Number"},{"name":"zVal","description":"","type":"Number"},{"name":"time","description":"","type":"Number"}],"return":{"description":"Updated x, y, z values as an array","type":"Array"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7772,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientX","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7779,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientY","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7786,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientZ","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7838,"description":"

            Set the rolloff factor and max distance

            \n","itemtype":"method","name":"setFalloff","params":[{"name":"maxDistance","description":"","type":"Number","optional":true},{"name":"rolloffFactor","description":"","type":"Number","optional":true}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7852,"description":"

            Maxium distance between the source and the listener

            \n","itemtype":"method","name":"maxDist","params":[{"name":"maxDistance","description":"","type":"Number"}],"return":{"description":"updated value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7869,"description":"

            How quickly the volume is reduced as the source moves away from the listener

            \n","itemtype":"method","name":"rollof","params":[{"name":"rolloffFactor","description":"","type":"Number"}],"return":{"description":"updated value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7989,"description":"

            The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.

            \n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7999,"description":"

            The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.

            \n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8049,"description":"

            Add delay to an audio signal according to a set\nof delay parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"

            An object that outputs audio

            \n","type":"Object"},{"name":"delayTime","description":"

            Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.

            \n","type":"Number","optional":true},{"name":"feedback","description":"

            sends the delay back through itself\n in a loop that decreases in volume\n each time.

            \n","type":"Number","optional":true},{"name":"lowPass","description":"

            Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.

            \n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8094,"description":"

            Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.

            \n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"

            Time (in seconds) of the delay

            \n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8116,"description":"

            Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop. The default value is 0.5

            \n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"

            0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param

            \n","type":"Number|Object"}],"return":{"description":"Feedback value","type":"Number"},"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"

            Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.

            \n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"

            A lowpass filter will cut off any\n frequencies higher than the filter frequency.

            \n","type":"Number|Object"},{"name":"res","description":"

            Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.

            \n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8170,"description":"

            Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'pingPong' (1) or 'default' (0)

            \n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8223,"description":"

            Set the output level of the delay effect.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8234,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8242,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8409,"description":"

            Connect a source to the reverb, and assign reverb parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"},{"name":"seconds","description":"

            Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.

            \n","type":"Number","optional":true},{"name":"decayRate","description":"

            Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.

            \n","type":"Number","optional":true},{"name":"reverse","description":"

            Play the reverb backwards or forwards.

            \n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8446,"description":"

            Set the reverb settings. Similar to .process(), but without\nassigning a new input.

            \n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"

            Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.

            \n","type":"Number","optional":true},{"name":"decayRate","description":"

            Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.

            \n","type":"Number","optional":true},{"name":"reverse","description":"

            Play the reverb backwards or forwards.

            \n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8482,"description":"

            Set the output level of the reverb effect.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8493,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8501,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8621,"description":"

            Internally, the p5.Convolver uses the a\n\nWeb Audio Convolver Node.

            \n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8645,"description":"

            If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the toggleImpulse(id) method.

            \n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8737,"description":"

            Connect a source to the convolver.

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"}],"example":["\n
            \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n\n
            "],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8786,"description":"

            Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the .impulses array. Previous\nimpulses can be accessed with the .toggleImpulse(id)\nmethod.

            \n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function (optional)

            \n","type":"Function"},{"name":"errorCallback","description":"

            function (optional)

            \n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8808,"description":"

            Similar to .addImpulse, except that the .impulses\nArray is reset to save memory. A new .impulses\narray is created with this impulse as the only item.

            \n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function (optional)

            \n","type":"Function"},{"name":"errorCallback","description":"

            function (optional)

            \n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8831,"description":"

            If you have used .addImpulse() to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the .impulses Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the .impulses\n Array (Number).
            \nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an .audioBuffer (type:\nWeb Audio \nAudioBuffer) and a .name, a String that corresponds\nwith the original filename.

            \n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"

            Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).

            \n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8885,"description":"

            Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.

            \n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.

            \n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n
            \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9084,"description":"

            Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9173,"description":"

            Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.

            \n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9263,"description":"

            Set the tempo of this part, in Beats Per Minute.

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9278,"description":"

            Returns the tempo, in Beats Per Minute, of this part.

            \n","itemtype":"method","name":"getBPM","return":{"description":"","type":"Number"},"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9291,"description":"

            Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.

            \n","itemtype":"method","name":"start","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9311,"description":"

            Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.

            \n","itemtype":"method","name":"loop","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9333,"description":"

            Tell the part to stop looping.

            \n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9349,"description":"

            Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.

            \n","itemtype":"method","name":"stop","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9363,"description":"

            Pause the part. Playback will resume\nfrom the current step.

            \n","itemtype":"method","name":"pause","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9379,"description":"

            Add a p5.Phrase to this Part.

            \n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"

            reference to a p5.Phrase

            \n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9406,"description":"

            Remove a phrase from this part, based on the name it was\ngiven when it was created.

            \n","itemtype":"method","name":"removePhrase","params":[{"name":"phraseName","description":"","type":"String"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9424,"description":"

            Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.

            \n","itemtype":"method","name":"getPhrase","params":[{"name":"phraseName","description":"","type":"String"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9442,"description":"

            Find all sequences with the specified name, and replace their patterns with the specified array.

            \n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"

            Array of values to pass into the callback\n at each step of the phrase.

            \n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9473,"description":"

            Set the function that will be called at every step. This will clear the previous function.

            \n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"

            The name of the callback\n you want to fire\n on every beat/tatum.

            \n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9542,"description":"

            Start playback of the score.

            \n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9555,"description":"

            Stop playback of the score.

            \n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9569,"description":"

            Pause playback of the score.

            \n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9581,"description":"

            Loop playback of the score.

            \n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9594,"description":"

            Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.

            \n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9628,"description":"

            Set the tempo for all parts in the score

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9729,"description":"

            Getters and Setters, setting any paramter will result in a change in the clock's\nfrequency, that will be reflected after the next callback\nbeats per minute (defaults to 60)

            \n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9750,"description":"

            number of quarter notes in a measure (defaults to 4)

            \n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9770,"description":"

            length of the loops interval

            \n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9787,"description":"

            how many times the callback has been called so far

            \n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9800,"description":"

            musicalTimeMode uses Tone.Time convention\ntrue if string, false if number

            \n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9808,"description":"

            musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string

            \n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9816,"description":"

            Set a limit to the number of loops to play. defaults to Infinity

            \n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9826,"description":"

            Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded

            \n

            The callback should only be called until maxIterations is reached

            \n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9841,"description":"

            Start the loop

            \n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"

            schedule a starting time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9860,"description":"

            Stop the loop

            \n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"

            schedule a stopping time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9878,"description":"

            Pause the loop

            \n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"

            schedule a pausing time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9896,"description":"

            Synchronize loops. Use this method to start two or more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)

            \n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"

            a p5.SoundLoop to sync with

            \n","type":"Object"},{"name":"timeFromNow","description":"

            Start the loops in sync after timeFromNow seconds

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10068,"description":"

            The p5.Compressor is built with a Web Audio Dynamics Compressor Node\n

            \n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10084,"description":"

            Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Sound source to be connected

            \n","type":"Object"},{"name":"attack","description":"

            The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number","optional":true},{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number","optional":true},{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number","optional":true},{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number","optional":true},{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10112,"description":"

            Set the paramters of a compressor.

            \n","itemtype":"method","name":"set","params":[{"name":"attack","description":"

            The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number"},{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number"},{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number"},{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number"},{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10152,"description":"

            Get current attack or set value w/ time ramp

            \n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"

            Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10178,"description":"

            Get current knee or set value w/ time ramp

            \n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10204,"description":"

            Get current ratio or set value w/ time ramp

            \n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10228,"description":"

            Get current threshold or set value w/ time ramp

            \n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number"},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10252,"description":"

            Get current release or set value w/ time ramp

            \n","itemtype":"method","name":"release","params":[{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number"},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10277,"description":"

            Return the current reduction value

            \n","itemtype":"method","name":"reduction","return":{"description":"Value of the amount of gain reduction that is applied to the signal","type":"Number"},"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10419,"description":"

            isDetected is set to true when a peak is detected.

            \n","itemtype":"attribute","name":"isDetected","type":"Boolean","default":"false","class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10432,"description":"

            The update method is run in the draw loop.

            \n

            Accepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.

            \n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"

            A p5.FFT object

            \n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10470,"description":"

            onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.

            \n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"

            Name of a function that will\n be called when a peak is\n detected.

            \n","type":"Function"},{"name":"val","description":"

            Optional value to pass\n into the function when\n a peak is detected.

            \n","type":"Object","optional":true}],"example":["\n
            \nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 0;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100,100);\n textAlign(CENTER);\n\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n setupSound();\n\n // when a beat is detected, call triggerBeat()\n peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n text('click to play', width/2, height/2);\n\n fft.analyze();\n peakDetect.update(fft);\n\n ellipseWidth *= 0.95;\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n cnv.mouseClicked( function() {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n });\n}\n
            "],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10676,"description":"

            Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.

            \n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"

            p5.sound object or a web audio unit\n that outputs sound

            \n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10703,"description":"

            Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.

            \n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"

            p5.SoundFile

            \n","type":"p5.SoundFile"},{"name":"duration","description":"

            Time (in seconds)

            \n","type":"Number","optional":true},{"name":"callback","description":"

            The name of a function that will be\n called once the recording completes

            \n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10739,"description":"

            Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.

            \n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10864,"description":"

            The p5.Distortion is built with a\n\nWeb Audio WaveShaper Node.

            \n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10883,"description":"

            Process a sound source, optionally specify amount and oversample values.

            \n","itemtype":"method","name":"process","params":[{"name":"amount","description":"

            Unbounded distortion amount.\n Normal values range from 0-1.

            \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

            'none', '2x', or '4x'.

            \n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10900,"description":"

            Set the amount and oversample of the waveshaper distortion.

            \n","itemtype":"method","name":"set","params":[{"name":"amount","description":"

            Unbounded distortion amount.\n Normal values range from 0-1.

            \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

            'none', '2x', or '4x'.

            \n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10923,"description":"

            Return the distortion amount, typically between 0-1.

            \n","itemtype":"method","name":"getAmount","return":{"description":"Unbounded distortion amount.\n Normal values range from 0-1.","type":"Number"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10937,"description":"

            Return the oversampling.

            \n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11055,"description":"

            Connect a source to the gain node.

            \n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11070,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11084,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11098,"description":"

            Set the output level of the gain node.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11181,"description":"

            Connect to p5 objects or Web Audio Nodes

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"

            Disconnect from soundOut

            \n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11322,"description":"

            Getters and Setters

            \n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11328,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11333,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11338,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11379,"description":"

            Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.

            \n","itemtype":"method","name":"play","params":[{"name":"note","description":"

            the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See \n Tone. Defaults to 440 hz.

            \n","type":"String | Number"},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope. Defaults to 0.15 seconds.

            \n","type":"Number","optional":true}],"example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n
            \n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11431,"description":"

            Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.

            \n","params":[{"name":"note","description":"

            the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See \n Tone. Defaults to 440 hz

            \n","type":"String | Number"},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n
            "],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11478,"description":"

            Trigger the release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","params":[{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n
            "],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11516,"description":"

            Set values like a traditional\n\nADSR envelope\n.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number"},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11544,"description":"

            MonoSynth amp

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            desired volume

            \n","type":"Number"},{"name":"rampTime","description":"

            Time to reach new volume

            \n","type":"Number","optional":true}],"return":{"description":"new volume value","type":"Number"},"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11564,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11578,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11592,"description":"

            Get rid of the MonoSynth and free up its resources / memory.

            \n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11742,"description":"

            An object that holds information about which notes have been played and\nwhich notes are currently being played. New notes are added as keys\non the fly. While a note has been attacked, but not released, the value of the\nkey is the audiovoice which is generating that note. When notes are released,\nthe value of the key becomes undefined.

            \n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11755,"description":"

            A PolySynth must have at least 1 voice, defaults to 8

            \n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11761,"description":"

            Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.

            \n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11800,"description":"

            Play a note by triggering noteAttack and noteRelease with sustain time

            \n","itemtype":"method","name":"play","params":[{"name":"note","description":"

            midi note to play (ranging from 0 to 127 - 60 being a middle C)

            \n","type":"Number","optional":true},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n
            "],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11849,"description":"

            noteADSR sets the envelope for a specific note that has just been triggered.\nUsing this method modifies the envelope of whichever audiovoice is being used\nto play the desired note. The envelope should be reset before noteRelease is called\nin order to prevent the modified envelope from being used on other notes.

            \n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"

            Midi note on which ADSR should be set.

            \n","type":"Number","optional":true},{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number","optional":true},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11881,"description":"

            Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number","optional":true},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11909,"description":"

            Trigger the Attack, and Decay portion of a MonoSynth.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.

            \n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"

            midi note on which attack should be triggered.

            \n","type":"Number","optional":true},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)/

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds)

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n
            "],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12021,"description":"

            Trigger the Release of an AudioVoice note. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"

            midi note on which attack should be triggered.\n If no value is provided, all notes will be released.

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n
            \n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12105,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12119,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12133,"description":"

            Get rid of the MonoSynth and free up its resources / memory.

            \n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:123"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:223"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:323"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:464"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:1018"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/sketch_reader.js:243"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/sketch_reader.js:268"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/validate_params.js:336"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:13"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:92"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:131"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:186"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:265"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:359"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:399"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:494"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:71"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:297"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:419"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:464"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:528"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:591"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:772"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:837"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:930"},{"message":"unknown tag: alt","line":" src/core/constants.js:88"},{"message":"unknown tag: alt","line":" src/core/constants.js:106"},{"message":"unknown tag: alt","line":" src/core/constants.js:124"},{"message":"unknown tag: alt","line":" src/core/constants.js:142"},{"message":"unknown tag: alt","line":" src/core/constants.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:590"},{"message":"unknown tag: alt","line":" src/core/environment.js:621"},{"message":"unknown tag: alt","line":" src/core/environment.js:652"},{"message":"unknown tag: alt","line":" src/core/environment.js:680"},{"message":"unknown tag: alt","line":" src/core/environment.js:708"},{"message":"unknown tag: alt","line":" src/core/environment.js:708"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:1050"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:1069"},{"message":"unknown tag: alt","line":" src/core/environment.js:1199"},{"message":"replacing incorrect tag: function with method","line":" src/core/internationalization.js:105"},{"message":"replacing incorrect tag: returns with return","line":" src/core/internationalization.js:105"},{"message":"unknown tag: alt","line":" src/core/main.js:41"},{"message":"unknown tag: alt","line":" src/core/main.js:82"},{"message":"unknown tag: alt","line":" src/core/main.js:113"},{"message":"unknown tag: alt","line":" src/core/main.js:450"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:56"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:87"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:94"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:102"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:966"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:83"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:135"},{"message":"unknown tag: alt","line":" src/core/reference.js:7"},{"message":"unknown tag: alt","line":" src/core/reference.js:34"},{"message":"unknown tag: alt","line":" src/core/reference.js:87"},{"message":"unknown tag: alt","line":" src/core/reference.js:115"},{"message":"unknown tag: alt","line":" src/core/reference.js:137"},{"message":"unknown tag: alt","line":" src/core/reference.js:158"},{"message":"unknown tag: alt","line":" src/core/reference.js:179"},{"message":"unknown tag: alt","line":" src/core/reference.js:200"},{"message":"unknown tag: alt","line":" src/core/reference.js:231"},{"message":"unknown tag: alt","line":" src/core/reference.js:267"},{"message":"unknown tag: alt","line":" src/core/reference.js:288"},{"message":"unknown tag: alt","line":" src/core/reference.js:309"},{"message":"unknown tag: alt","line":" src/core/reference.js:331"},{"message":"unknown tag: alt","line":" src/core/reference.js:351"},{"message":"unknown tag: alt","line":" src/core/reference.js:379"},{"message":"unknown tag: alt","line":" src/core/reference.js:408"},{"message":"unknown tag: alt","line":" src/core/reference.js:448"},{"message":"unknown tag: alt","line":" src/core/reference.js:490"},{"message":"unknown tag: alt","line":" src/core/reference.js:512"},{"message":"unknown tag: alt","line":" src/core/rendering.js:15"},{"message":"unknown tag: alt","line":" src/core/rendering.js:166"},{"message":"unknown tag: alt","line":" src/core/rendering.js:232"},{"message":"unknown tag: alt","line":" src/core/rendering.js:253"},{"message":"unknown tag: alt","line":" src/core/rendering.js:316"},{"message":"unknown tag: alt","line":" src/core/rendering.js:391"},{"message":"unknown tag: alt","line":" src/core/rendering.js:461"},{"message":"unknown tag: alt","line":" src/core/rendering.js:545"},{"message":"unknown tag: alt","line":" src/core/structure.js:9"},{"message":"unknown tag: alt","line":" src/core/structure.js:82"},{"message":"replacing incorrect tag: returns with return","line":" src/core/structure.js:133"},{"message":"unknown tag: alt","line":" src/core/structure.js:133"},{"message":"unknown tag: alt","line":" src/core/structure.js:192"},{"message":"unknown tag: alt","line":" src/core/structure.js:290"},{"message":"unknown tag: alt","line":" src/core/structure.js:391"},{"message":"unknown tag: alt","line":" src/core/structure.js:494"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:197"},{"message":"unknown tag: alt","line":" src/core/transform.js:222"},{"message":"unknown tag: alt","line":" src/core/transform.js:261"},{"message":"unknown tag: alt","line":" src/core/transform.js:299"},{"message":"unknown tag: alt","line":" src/core/transform.js:337"},{"message":"unknown tag: alt","line":" src/core/transform.js:377"},{"message":"unknown tag: alt","line":" src/core/transform.js:451"},{"message":"unknown tag: alt","line":" src/core/transform.js:490"},{"message":"unknown tag: alt","line":" src/core/transform.js:529"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2610"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2696"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2867"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2954"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:3092"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:761"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:794"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:828"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:871"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:114"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:151"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:198"},{"message":"replacing incorrect tag: returns with return","line":" src/image/p5.Image.js:299"},{"message":"replacing incorrect tag: returns with return","line":" src/image/pixels.js:706"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:683"},{"message":"unknown tag: name","line":" src/io/p5.Table.js:43"},{"message":"unknown tag: name","line":" src/io/p5.Table.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:1048"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:113"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:120"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:127"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:769"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:784"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:799"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:814"},{"message":"unknown tag: name","line":" src/typography/p5.Font.js:51"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/3d_primitives.js:89"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/3d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:183"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/GeometryBuilder.js:122"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:378"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:378"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:378"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:378"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:378"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:602"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:134"},{"message":"unknown tag: alt","line":" src/webgl/light.js:246"},{"message":"unknown tag: alt","line":" src/webgl/light.js:373"},{"message":"unknown tag: alt","line":" src/webgl/light.js:497"},{"message":"unknown tag: alt","line":" src/webgl/light.js:497"},{"message":"unknown tag: alt","line":" src/webgl/light.js:602"},{"message":"unknown tag: alt","line":" src/webgl/light.js:649"},{"message":"unknown tag: alt","line":" src/webgl/light.js:693"},{"message":"unknown tag: alt","line":" src/webgl/light.js:794"},{"message":"unknown tag: alt","line":" src/webgl/light.js:1155"},{"message":"unknown tag: alt","line":" src/webgl/loading.js:12"},{"message":"unknown tag: alt","line":" src/webgl/loading.js:12"},{"message":"unknown tag: alt","line":" src/webgl/loading.js:775"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:115"},{"message":"unknown tag: alt","line":" src/webgl/material.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:202"},{"message":"unknown tag: alt","line":" src/webgl/material.js:331"},{"message":"unknown tag: alt","line":" src/webgl/material.js:440"},{"message":"unknown tag: alt","line":" src/webgl/material.js:529"},{"message":"unknown tag: alt","line":" src/webgl/material.js:529"},{"message":"unknown tag: alt","line":" src/webgl/material.js:529"},{"message":"unknown tag: alt","line":" src/webgl/material.js:529"},{"message":"unknown tag: alt","line":" src/webgl/material.js:674"},{"message":"unknown tag: alt","line":" src/webgl/material.js:674"},{"message":"unknown tag: alt","line":" src/webgl/material.js:752"},{"message":"unknown tag: alt","line":" src/webgl/material.js:824"},{"message":"unknown tag: alt","line":" src/webgl/material.js:869"},{"message":"unknown tag: alt","line":" src/webgl/material.js:869"},{"message":"unknown tag: alt","line":" src/webgl/material.js:869"},{"message":"unknown tag: alt","line":" src/webgl/material.js:982"},{"message":"unknown tag: alt","line":" src/webgl/material.js:1053"},{"message":"unknown tag: alt","line":" src/webgl/material.js:1139"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:121"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:197"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:306"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:369"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:441"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:511"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:605"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:634"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:662"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:690"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:719"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:748"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:777"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:801"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:825"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:853"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:956"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1040"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1171"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1291"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1360"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1360"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1508"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1582"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1646"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1719"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1719"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:2332"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:184"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Framebuffer.js:702"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:733"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:794"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:951"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1149"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1283"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1325"},{"message":"unknown tag: memberof","line":" src/webgl/p5.Geometry.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:357"},{"message":"unknown tag: alt","line":" src/webgl/p5.Geometry.js:472"},{"message":"unknown tag: alt","line":" src/webgl/p5.Geometry.js:472"},{"message":"param name missing: {Number}","line":" src/webgl/p5.Matrix.js:745"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:764"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:779"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:797"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:19"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:118"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:318"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:389"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:700"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:718"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:945"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:986"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:1301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:1415"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:2046"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Shader.js:106"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:361"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:116"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:160"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:192"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:204"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:253"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:267"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:406"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:406"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:474"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:489"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:574"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:2381"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:2381"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:2882"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4271"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4360"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4386"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4460"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:6280"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:8116"},{"message":"Missing item type\nConversions adapted from .\n\nIn these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.","line":" src/color/color_conversion.js:8"},{"message":"Missing item type\nConvert an HSBA array to HSLA.","line":" src/color/color_conversion.js:18"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:44"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:99"},{"message":"Missing item type\nConvert an HSLA array to RGBA.\n\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.","line":" src/color/color_conversion.js:122"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:186"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:225"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:14"},{"message":"Missing item type\nThese regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.\n\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.","line":" src/color/p5.Color.js:168"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:181"},{"message":"Missing item type\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.","line":" src/color/p5.Color.js:789"},{"message":"Missing item type\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.","line":" src/color/p5.Color.js:820"},{"message":"Missing item type\nFor a number of different inputs, returns a color formatted as [r, g, b, a]\narrays, with each component normalized between 0 and 1.","line":" src/color/p5.Color.js:838"},{"message":"Missing item type\nFor HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.","line":" src/color/p5.Color.js:1048"},{"message":"Missing item type","line":" src/core/friendly_errors/fes_core.js:1"},{"message":"Missing item type\nPrints out all the colors in the color pallete with white text.\nFor color blindness testing.","line":" src/core/friendly_errors/fes_core.js:932"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.js:1"},{"message":"Missing item type","line":" src/core/friendly_errors/sketch_reader.js:1"},{"message":"Missing item type","line":" src/core/friendly_errors/stacktrace.js:1"},{"message":"Missing item type\nGiven an Error object, extract the most information from it.","line":" src/core/friendly_errors/stacktrace.js:32"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nThis function does 3 things:\n\n 1. Bounds the desired start/stop angles for an arc (in radians) so that:\n\n 0 <= start < TWO_PI ; start <= stop < start + TWO_PI\n\n This means that the arc rendering functions don't have to be concerned\n with what happens if stop is smaller than start, or if the arc 'goes\n round more than once', etc.: they can just start at start and increase\n until stop and the correct arc will be drawn.\n\n 2. Optionally adjusts the angles within each quadrant to counter the naive\n scaling of the underlying ellipse up from the unit circle. Without\n this, the angles become arbitrary when width != height: 45 degrees\n might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\n a 'tall' ellipse.\n\n 3. Flags up when start and stop correspond to the same place on the\n underlying ellipse. This is useful if you want to do something special\n there (like rendering a whole ellipse instead).","line":" src/core/shape/2d_primitives.js:16"},{"message":"Missing item type\nReturns the current framerate.","line":" src/core/environment.js:421"},{"message":"Missing item type\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second.\n\nCalling `frameRate()` with no arguments returns the current frame rate.","line":" src/core/environment.js:431"},{"message":"Missing item type","line":" src/core/helpers.js:1"},{"message":"Missing item type\n_globalInit\n\nTODO: ???\nif sketch is on window\nassume \"global\" mode\nand instantiate p5 automatically\notherwise do nothing","line":" src/core/init.js:4"},{"message":"Missing item type\nThis is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.","line":" src/core/internationalization.js:30"},{"message":"Missing item type\nSet up our translation function, with loaded languages","line":" src/core/internationalization.js:126"},{"message":"Missing item type\nReturns a list of languages we have translations loaded for","line":" src/core/internationalization.js:171"},{"message":"Missing item type\nReturns the current language selected for translation","line":" src/core/internationalization.js:178"},{"message":"Missing item type\nSets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.","line":" src/core/internationalization.js:185"},{"message":"Missing item type","line":" src/core/legacy.js:1"},{"message":"Missing item type","line":" src/core/p5.Element.js:87"},{"message":"Missing item type","line":" src/core/p5.Element.js:966"},{"message":"Missing item type","line":" src/core/p5.Element.js:985"},{"message":"Missing item type","line":" src/core/p5.Element.js:1002"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:1015"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:120"},{"message":"Missing item type\nHelper function to check font type (system or otf)","line":" src/core/p5.Renderer.js:468"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:520"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:6"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee ecridge.com/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:535"},{"message":"Missing item type\nargs[0] is expected to be renderer\nargs[1] is expected to be canvas","line":" src/core/rendering.js:304"},{"message":"Missing item type\nprivate helper function to handle the user passing in objects\nduring construction or calls to create()","line":" src/data/p5.TypedDict.js:198"},{"message":"Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type","line":" src/data/p5.TypedDict.js:388"},{"message":"Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type","line":" src/data/p5.TypedDict.js:430"},{"message":"Missing item type\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'","line":" src/data/p5.TypedDict.js:543"},{"message":"Missing item type\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'","line":" src/data/p5.TypedDict.js:607"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:206"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:221"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:477"},{"message":"Missing item type","line":" src/dom/dom.js:786"},{"message":"Missing item type","line":" src/dom/dom.js:2049"},{"message":"Missing item type","line":" src/dom/dom.js:2192"},{"message":"Missing item type","line":" src/dom/dom.js:2240"},{"message":"Missing item type","line":" src/dom/dom.js:4055"},{"message":"Missing item type","line":" src/dom/dom.js:5067"},{"message":"Missing item type","line":" src/dom/dom.js:5138"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:120"},{"message":"Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.","line":" src/events/keyboard.js:291"},{"message":"Missing item type\nThe _areDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.","line":" src/events/keyboard.js:377"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:1"},{"message":"Missing item type\nReturns the pixel buffer for a canvas.","line":" src/image/filters.js:22"},{"message":"Missing item type\nReturns a 32-bit number containing ARGB data at the ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:65"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:88"},{"message":"Missing item type\nReturns the ImageData object for a canvas.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ImageData","line":" src/image/filters.js:109"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:130"},{"message":"Missing item type\nApplys a filter function to a canvas.\n\nThe difference between this and the actual filter functions defined below\nis that the filter functions generally modify the pixel buffer but do\nnot actually put that data back to the canvas (where it would actually\nupdate what is visible). By contrast this method does make the changes\nactually visible in the canvas.\n\nThe apply method is the method that callers of this module would generally\nuse. It has been separated from the actual filters to support an advanced\nuse case of creating a filter chain that executes without actually updating\nthe canvas in between everystep.","line":" src/image/filters.js:145"},{"message":"Missing item type\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/","line":" src/image/filters.js:200"},{"message":"Missing item type\nConverts any colors in the image to grayscale equivalents.\nNo parameter is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/","line":" src/image/filters.js:233"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:256"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:272"},{"message":"Missing item type\nLimits each channel of the image to the number of colors specified as\nthe parameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n\nAdapted from java based processing implementation","line":" src/image/filters.js:287"},{"message":"Missing item type\nIncreases the bright areas in an image.","line":" src/image/filters.js:319"},{"message":"Missing item type\nReduces the bright areas in an image.\nSimilar to `dilate()`, but updates the output color based on the lowest luminance value.","line":" src/image/filters.js:411"},{"message":"Missing item type\nThis module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.","line":" src/image/image.js:8"},{"message":"Missing item type\nHelper function for loading GIF-based images","line":" src/image/loading_displaying.js:639"},{"message":"Missing item type","line":" src/image/loading_displaying.js:761"},{"message":"Missing item type","line":" src/image/loading_displaying.js:794"},{"message":"Missing item type","line":" src/image/loading_displaying.js:828"},{"message":"Missing item type\nValidates clipping params. Per drawImage spec sWidth and sHight cannot be\nnegative or greater than image intrinsic width and height","line":" src/image/loading_displaying.js:871"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:1384"},{"message":"Missing item type\nThis module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.","line":" src/image/p5.Image.js:9"},{"message":"Missing item type\nHelper function for animating GIF-based images with time","line":" src/image/p5.Image.js:342"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:373"},{"message":"Missing item type\nGenerate a blob of file data as a url to prepare for download.\nAccepts an array of data, a filename, and an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.","line":" src/io/files.js:1772"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1840"},{"message":"Missing item type\nReturns true if the browser is Safari, false if not.\nSafari makes trouble for downloading files.","line":" src/io/files.js:1873"},{"message":"Missing item type\nHelper function, a callback for download that deletes\nan invisible anchor element from the DOM once the file\nhas been automatically downloaded.","line":" src/io/files.js:1884"},{"message":"Missing item type\nTable Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\nhere.\nTo load files, use the loadTable method.\nTo save tables to your computer, use the save method\n or the saveTable method.\n\nPossible options include:\n
              \n
            • csv - parse the table as comma-separated values\n
            • tsv - parse the table as tab-separated values\n
            • header - this table has a header (title) row\n
            ","line":" src/io/p5.Table.js:9"},{"message":"Missing item type","line":" src/math/p5.Vector.js:435"},{"message":"Missing item type","line":" src/math/p5.Vector.js:449"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:3439"},{"message":"Missing item type\nRotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.","line":" src/math/p5.Vector.js:3491"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:3518"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:3571"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:3585"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:3599"},{"message":"Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.","line":" src/math/p5.Vector.js:3614"},{"message":"Missing item type\nPerforms spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.","line":" src/math/p5.Vector.js:3643"},{"message":"Missing item type\nCalculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)","line":" src/math/p5.Vector.js:3674"},{"message":"Missing item type\nCalculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x\\*x + y\\*y + z\\*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.","line":" src/math/p5.Vector.js:3688"},{"message":"Missing item type\nNormalize the vector to length 1 (make it a unit vector).","line":" src/math/p5.Vector.js:3704"},{"message":"Missing item type\nLimit the magnitude of the vector to the value used for the max\nparameter.","line":" src/math/p5.Vector.js:3729"},{"message":"Missing item type\nSet the magnitude of the vector to the value used for the len\nparameter.","line":" src/math/p5.Vector.js:3756"},{"message":"Missing item type\nCalculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.","line":" src/math/p5.Vector.js:3783"},{"message":"Missing item type\nCalculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.","line":" src/math/p5.Vector.js:3799"},{"message":"Missing item type\nReflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.","line":" src/math/p5.Vector.js:3815"},{"message":"Missing item type\nReturn a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.","line":" src/math/p5.Vector.js:3842"},{"message":"Missing item type\nEquality check against a p5.Vector","line":" src/math/p5.Vector.js:3858"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:455"},{"message":"Missing item type\nReturns the set of opentype glyphs for the supplied string.\n\nNote that there is not a strict one-to-one mapping between characters\nand glyphs, so the list of returned glyphs can be larger or smaller\n than the length of the given string.","line":" src/typography/p5.Font.js:395"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:410"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:465"},{"message":"Missing item type\nDraws a point, a coordinate in space at the dimension of one pixel,\ngiven x, y and z coordinates. The color of the point is determined\nby the current stroke, while the point size is determined by current\nstroke weight.","line":" src/webgl/3d_primitives.js:1119"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1631"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:4"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:21"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:31"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:43"},{"message":"Missing item type\nAdds geometry from the renderer's immediate mode into the builder's\ncombined geometry.","line":" src/webgl/GeometryBuilder.js:80"},{"message":"Missing item type\nAdds geometry from the renderer's retained mode into the builder's\ncombined geometry.","line":" src/webgl/GeometryBuilder.js:114"},{"message":"Missing item type\nCleans up the state of the renderer and returns the combined geometry that\nwas built.","line":" src/webgl/GeometryBuilder.js:122"},{"message":"Missing item type\nKeeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.","line":" src/webgl/GeometryBuilder.js:133"},{"message":"Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1","line":" src/webgl/loading.js:333"},{"message":"Missing item type\nSTL files can be of two types, ASCII and Binary,\n\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.","line":" src/webgl/loading.js:477"},{"message":"Missing item type\nThis function checks if the file is in ASCII format or in Binary format\n\nIt is done by searching keyword `solid` at the start of the file.\n\nAn ASCII STL data must begin with `solid` as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the `d` are known to be\nplentiful. So, check the first 5 bytes for `solid`.\n\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for `solid` to start anywhere after those prefixes.","line":" src/webgl/loading.js:504"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:531"},{"message":"Missing item type\nThis function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\n\nCurrently there is no support for the colors provided in STL files.","line":" src/webgl/loading.js:543"},{"message":"Missing item type\nASCII STL file starts with `solid 'nameOfFile'`\nThen contain the normal of the face, starting with `facet normal`\nNext contain a keyword indicating the start of face vertex, `outer loop`\nNext comes the three vertex, starting with `vertex x y z`\nVertices ends with `endloop`\nFace ends with `endfacet`\nNext face starts with `facet normal`\nThe end of the file is indicated by `endsolid`","line":" src/webgl/loading.js:631"},{"message":"Missing item type","line":" src/webgl/material.js:1278"},{"message":"Missing item type","line":" src/webgl/material.js:1318"},{"message":"Missing item type\nAn internal class to store data that will be sent to a p5.RenderBuffer.\nThose need to eventually go into a Float32Array, so this class provides a\nvariable-length array container backed by a Float32Array so that it can be\nsent to the GPU without allocating a new array each frame.\n\nLike a C++ vector, its fixed-length Float32Array backing its contents will\ndouble in size when it goes over its capacity.","line":" src/webgl/p5.DataArray.js:3"},{"message":"Missing item type\nReturns a Float32Array window sized to the exact length of the data","line":" src/webgl/p5.DataArray.js:35"},{"message":"Missing item type\nA \"soft\" clear, which keeps the underlying storage size the same, but\nempties the contents of its dataArray()","line":" src/webgl/p5.DataArray.js:42"},{"message":"Missing item type\nCan be used to scale a DataArray back down to fit its contents.","line":" src/webgl/p5.DataArray.js:50"},{"message":"Missing item type\nA full reset, which allocates a new underlying Float32Array at its initial\nlength","line":" src/webgl/p5.DataArray.js:63"},{"message":"Missing item type\nAdds values to the DataArray, expanding its internal storage to\naccommodate the new items.","line":" src/webgl/p5.DataArray.js:72"},{"message":"Missing item type\nReturns a copy of the data from the index `from`, inclusive, to the index\n`to`, exclusive","line":" src/webgl/p5.DataArray.js:82"},{"message":"Missing item type\nReturns a mutable Float32Array window from the index `from`, inclusive, to\nthe index `to`, exclusive","line":" src/webgl/p5.DataArray.js:90"},{"message":"Missing item type\nExpand capacity of the internal storage until it can fit a target size","line":" src/webgl/p5.DataArray.js:98"},{"message":"Missing item type\nChecks the capabilities of the current WebGL environment to see if the\nsettings supplied by the user are capable of being fulfilled. If they\nare not, warnings will be logged and the settings will be changed to\nsomething close that can be fulfilled.","line":" src/webgl/p5.Framebuffer.js:281"},{"message":"Missing item type\nCreates new textures and renderbuffers given the current size of the\nframebuffer.","line":" src/webgl/p5.Framebuffer.js:378"},{"message":"Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThe format and channels asked for by the user hint at what these values\nneed to be, and the WebGL version affects what options are avaiable.\nThis method returns the values for these three properties, given the\nframebuffer's settings.","line":" src/webgl/p5.Framebuffer.js:529"},{"message":"Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThis method takes into account the settings asked for by the user and\nreturns values for these three properties that can be used for the\ntexture storing depth information.","line":" src/webgl/p5.Framebuffer.js:590"},{"message":"Missing item type\nA method that will be called when recreating textures. If the framebuffer\nis auto-sized, it will update its width, height, and density properties.","line":" src/webgl/p5.Framebuffer.js:651"},{"message":"Missing item type\nCalled when the canvas that the framebuffer is attached to resizes. If the\nframebuffer is auto-sized, it will update its textures to match the new\nsize.","line":" src/webgl/p5.Framebuffer.js:665"},{"message":"Missing item type\nCalled when the size of the framebuffer has changed (either by being\nmanually updated or from auto-size updates when its canvas changes size.)\nOld textures and renderbuffers will be deleted, and then recreated with the\nnew size.","line":" src/webgl/p5.Framebuffer.js:678"},{"message":"Missing item type\nGiven a raw texture wrapper, delete its stored texture from WebGL memory,\nand remove it from p5's list of active textures.","line":" src/webgl/p5.Framebuffer.js:719"},{"message":"Missing item type\nCall this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.","line":" src/webgl/p5.Framebuffer.js:1001"},{"message":"Missing item type\nCall this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.\n\nThis will also clear the depth buffer so that any future drawing done\nafterwards will go on top.","line":" src/webgl/p5.Framebuffer.js:1149"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:702"},{"message":"Missing item type\nConverts each line segment into the vertices and vertex attributes needed\nto turn the line into a polygon on screen. This will include:\n- Two triangles line segment to create a rectangle\n- Two triangles per endpoint to create a stroke cap rectangle. A fragment\n shader is responsible for displaying the appropriate cap style within\n that rectangle.\n- Four triangles per join between adjacent line segments, creating a quad on\n either side of the join, perpendicular to the lines. A vertex shader will\n discard the quad in the \"elbow\" of the join, and a fragment shader will\n display the appropriate join style within the remaining quad.","line":" src/webgl/p5.Geometry.js:719"},{"message":"Missing item type\nAdds the vertices and vertex attributes for two triangles making a rectangle\nfor a straight line segment. A vertex shader is responsible for picking\nproper coordinates on the screen given the centerline positions, the tangent,\nand the side of the centerline each vertex belongs to. Sides follow the\nfollowing scheme:\n\n -1 -1\n o-------------o\n | |\n o-------------o\n 1 1","line":" src/webgl/p5.Geometry.js:857"},{"message":"Missing item type\nAdds the vertices and vertex attributes for two triangles representing the\nstroke cap of a line. A fragment shader is responsible for displaying the\nappropriate cap style within the rectangle they make.\n\nThe lineSides buffer will include the following values for the points on\nthe cap rectangle:\n\n -1 -2\n-----------o---o\n | |\n-----------o---o\n 1 2","line":" src/webgl/p5.Geometry.js:901"},{"message":"Missing item type\nAdds the vertices and vertex attributes for four triangles representing a\njoin between two adjacent line segments. This creates a quad on either side\nof the shared vertex of the two line segments, with each quad perpendicular\nto the lines. A vertex shader will discard all but the quad in the \"elbow\" of\nthe join, and a fragment shader will display the appropriate join style\nwithin the remaining quad.\n\nThe lineSides buffer will include the following values for the points on\nthe join rectangles:\n\n -1 -2\n-------------o----o\n | |\n 1 o----o----o -3\n | | 0 |\n--------o----o |\n 2| 3 |\n | |\n | |","line":" src/webgl/p5.Geometry.js:931"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:953"},{"message":"Missing item type\nEnables and binds the buffers used by shader when the appropriate data exists in geometry.\nMust always be done prior to drawing geometry in WebGL.","line":" src/webgl/p5.RenderBuffer.js:13"},{"message":"Missing item type\nWelcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.","line":" src/webgl/p5.RendererGL.Immediate.js:1"},{"message":"Missing item type\nEnd shape drawing and render vertices to screen.","line":" src/webgl/p5.RendererGL.Immediate.js:191"},{"message":"Missing item type\nCalled from endShape(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.","line":" src/webgl/p5.RendererGL.Immediate.js:274"},{"message":"Missing item type\nCalled from _processVertices(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.","line":" src/webgl/p5.RendererGL.Immediate.js:320"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:408"},{"message":"Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the fill geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:505"},{"message":"Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the stroke geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:552"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:19"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:67"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:120"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:318"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:389"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:535"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:930"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:1415"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:1448"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:1485"},{"message":"Missing item type\nResets all depth information so that nothing previously drawn will\nocclude anything subsequently drawn.","line":" src/webgl/p5.RendererGL.js:1520"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:1542"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:1561"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:2240"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:2251"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:2390"},{"message":"Missing item type","line":" src/webgl/p5.Shader.js:140"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:1"},{"message":"Missing item type\np5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/","line":" lib/addons/p5.sound.js:52"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:401"},{"message":"Missing item type\nDetermine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats","line":" lib/addons/p5.sound.js:536"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:807"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:1040"},{"message":"Missing item type\nThis is a helper function that the p5.SoundFile calls to load\nitself. Accepts a callback (the name of another function)\nas an optional parameter.","line":" lib/addons/p5.sound.js:1542"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:2056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:2604"},{"message":"Missing item type\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:6455"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:6462"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:7009"},{"message":"Missing item type\nInspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n\nUtility function for building an impulse response\nbased on the module parameters.","line":" lib/addons/p5.sound.js:8508"},{"message":"Missing item type\nPrivate method to load a buffer as an Impulse Response,\nassign it to the convolverNode, and add to the Array of .impulses.","line":" lib/addons/p5.sound.js:8659"},{"message":"Missing item type\nmusicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string","line":" lib/addons/p5.sound.js:9808"},{"message":"Missing item type\nDo not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded\n\nThe callback should only be called until maxIterations is reached","line":" lib/addons/p5.sound.js:9826"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:10660"},{"message":"Missing item type\nPrivate method to ensure accurate values of this._voicesInUse\nAny time a new value is scheduled, it is necessary to increment all subsequent\nscheduledValues after attack, and decrement all subsequent\nscheduledValues after release","line":" lib/addons/p5.sound.js:11995"},{"message":"Missing item type","line":" lib/addons/p5.sound.min.js:1"}],"consts":{"LABEL":["p5.describe","p5.describeElement","p5.textOutput","p5.gridOutput"],"FALLBACK":["p5.describe","p5.describeElement","p5.textOutput","p5.gridOutput"],"RGB":["p5.colorMode"],"HSB":["p5.colorMode"],"HSL":["p5.colorMode"],"CHORD":["p5.arc"],"PIE":["p5.arc"],"OPEN":["p5.arc"],"CENTER":["p5.ellipseMode","p5.rectMode","p5.imageMode","p5.textAlign"],"RADIUS":["p5.ellipseMode","p5.rectMode"],"CORNER":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"CORNERS":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"ROUND":["p5.strokeCap","p5.strokeJoin"],"SQUARE":["p5.strokeCap"],"PROJECT":["p5.strokeCap"],"MITER":["p5.strokeJoin"],"BEVEL":["p5.strokeJoin"],"POINTS":["p5.beginShape"],"LINES":["p5.beginShape"],"TRIANGLES":["p5.beginShape"],"TRIANGLE_FAN":["p5.beginShape"],"TRIANGLE_STRIP":["p5.beginShape"],"QUADS":["p5.beginShape"],"QUAD_STRIP":["p5.beginShape"],"TESS":["p5.beginShape"],"CLOSE":["p5.endShape"],"ARROW":["p5.cursor"],"CROSS":["p5.cursor"],"HAND":["p5.cursor"],"MOVE":["p5.cursor"],"TEXT":["p5.cursor"],"WAIT":["p5.cursor"],"P2D":["p5.createCanvas","p5.createGraphics"],"WEBGL":["p5.createCanvas","p5.createGraphics"],"BLEND":["p5.blendMode","p5.Image.blend","p5.blend"],"DARKEST":["p5.blendMode","p5.Image.blend","p5.blend"],"LIGHTEST":["p5.blendMode","p5.Image.blend","p5.blend"],"DIFFERENCE":["p5.blendMode","p5.Image.blend","p5.blend"],"MULTIPLY":["p5.blendMode","p5.Image.blend","p5.blend"],"EXCLUSION":["p5.blendMode","p5.Image.blend","p5.blend"],"SCREEN":["p5.blendMode","p5.Image.blend","p5.blend"],"REPLACE":["p5.blendMode","p5.Image.blend","p5.blend"],"OVERLAY":["p5.blendMode","p5.Image.blend","p5.blend"],"HARD_LIGHT":["p5.blendMode","p5.Image.blend","p5.blend"],"SOFT_LIGHT":["p5.blendMode","p5.Image.blend","p5.blend"],"DODGE":["p5.blendMode","p5.Image.blend","p5.blend"],"BURN":["p5.blendMode","p5.Image.blend","p5.blend"],"ADD":["p5.blendMode","p5.Image.blend","p5.blend"],"REMOVE":["p5.blendMode"],"SUBTRACT":["p5.blendMode"],"AUDIO":["p5.createCapture"],"VIDEO":["p5.createCapture"],"THRESHOLD":["p5.Image.filter","p5.filter"],"GRAY":["p5.Image.filter","p5.filter"],"OPAQUE":["p5.Image.filter","p5.filter"],"INVERT":["p5.Image.filter","p5.filter"],"POSTERIZE":["p5.Image.filter","p5.filter"],"ERODE":["p5.Image.filter","p5.filter"],"DILATE":["p5.Image.filter","p5.filter"],"BLUR":["p5.Image.filter","p5.filter"],"NORMAL":["p5.Image.blend","p5.blend","p5.textStyle","p5.textureMode"],"RADIANS":["p5.angleMode"],"DEGREES":["p5.angleMode"],"LEFT":["p5.textAlign"],"RIGHT":["p5.textAlign"],"TOP":["p5.textAlign"],"BOTTOM":["p5.textAlign"],"BASELINE":["p5.textAlign"],"ITALIC":["p5.textStyle"],"BOLD":["p5.textStyle"],"BOLDITALIC":["p5.textStyle"],"WORD":["p5.textWrap"],"CHAR":["p5.textWrap"],"IMAGE":["p5.textureMode"],"CLAMP":["p5.textureWrap"],"REPEAT":["p5.textureWrap"],"MIRROR":["p5.textureWrap"]}} \ No newline at end of file +{"project":{"name":"p5","description":"[![npm version](https://badge.fury.io/js/p5.svg)](https://www.npmjs.com/package/p5)","version":"1.9.3","url":"https://github.com/processing/p5.js#readme"},"files":{"src/accessibility/color_namer.js":{"name":"src/accessibility/color_namer.js","modules":{"Environment":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/describe.js":{"name":"src/accessibility/describe.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/gridOutput.js":{"name":"src/accessibility/gridOutput.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/outputs.js":{"name":"src/accessibility/outputs.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/accessibility/textOutput.js":{"name":"src/accessibility/textOutput.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/color_conversion.js":{"name":"src/color/color_conversion.js","modules":{"Color Conversion":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/creating_reading.js":{"name":"src/color/creating_reading.js","modules":{"Creating & Reading":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/color/p5.Color.js":{"name":"src/color/p5.Color.js","modules":{},"classes":{"p5.Color":1},"fors":{"p5":1},"namespaces":{}},"src/color/setting.js":{"name":"src/color/setting.js","modules":{"Setting":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/fes_core.js":{"name":"src/core/friendly_errors/fes_core.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/file_errors.js":{"name":"src/core/friendly_errors/file_errors.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/sketch_reader.js":{"name":"src/core/friendly_errors/sketch_reader.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/stacktrace.js":{"name":"src/core/friendly_errors/stacktrace.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/friendly_errors/validate_params.js":{"name":"src/core/friendly_errors/validate_params.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/2d_primitives.js":{"name":"src/core/shape/2d_primitives.js","modules":{"2D Primitives":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/attributes.js":{"name":"src/core/shape/attributes.js","modules":{"Attributes":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/curves.js":{"name":"src/core/shape/curves.js","modules":{"Curves":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/shape/vertex.js":{"name":"src/core/shape/vertex.js","modules":{"Vertex":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/constants.js":{"name":"src/core/constants.js","modules":{"Constants":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/environment.js":{"name":"src/core/environment.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/helpers.js":{"name":"src/core/helpers.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/init.js":{"name":"src/core/init.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/internationalization.js":{"name":"src/core/internationalization.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/legacy.js":{"name":"src/core/legacy.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/main.js":{"name":"src/core/main.js","modules":{"Structure":1},"classes":{"p5":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Element.js":{"name":"src/core/p5.Element.js","modules":{"DOM":1},"classes":{"p5.Element":1},"fors":{"p5.Element":1},"namespaces":{}},"src/core/p5.Graphics.js":{"name":"src/core/p5.Graphics.js","modules":{},"classes":{"p5.Graphics":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Renderer.js":{"name":"src/core/p5.Renderer.js","modules":{},"classes":{"p5.Renderer":1},"fors":{"p5":1},"namespaces":{}},"src/core/p5.Renderer2D.js":{"name":"src/core/p5.Renderer2D.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/core/reference.js":{"name":"src/core/reference.js","modules":{"Foundation":1},"classes":{},"fors":{"p5":1,"console":1},"namespaces":{}},"src/core/rendering.js":{"name":"src/core/rendering.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/structure.js":{"name":"src/core/structure.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/core/transform.js":{"name":"src/core/transform.js","modules":{"Transform":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/data/local_storage.js":{"name":"src/data/local_storage.js","modules":{"LocalStorage":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/data/p5.TypedDict.js":{"name":"src/data/p5.TypedDict.js","modules":{"Dictionary":1},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5.TypedDict":1,"p5":1},"namespaces":{}},"src/dom/dom.js":{"name":"src/dom/dom.js","modules":{},"classes":{"p5.MediaElement":1,"p5.File":1},"fors":{"p5":1,"p5.Element":1},"namespaces":{}},"src/events/acceleration.js":{"name":"src/events/acceleration.js","modules":{"Events":1,"Acceleration":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/keyboard.js":{"name":"src/events/keyboard.js","modules":{"Keyboard":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/mouse.js":{"name":"src/events/mouse.js","modules":{"Mouse":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/events/touch.js":{"name":"src/events/touch.js","modules":{"Touch":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/filters.js":{"name":"src/image/filters.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/image/image.js":{"name":"src/image/image.js","modules":{"Image":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/loading_displaying.js":{"name":"src/image/loading_displaying.js","modules":{"Loading & Displaying":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/image/p5.Image.js":{"name":"src/image/p5.Image.js","modules":{},"classes":{"p5.Image":1},"fors":{},"namespaces":{}},"src/image/pixels.js":{"name":"src/image/pixels.js","modules":{"Pixels":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/io/files.js":{"name":"src/io/files.js","modules":{"Input":1,"Output":1},"classes":{"p5.PrintWriter":1},"fors":{"p5":1},"namespaces":{}},"src/io/p5.Table.js":{"name":"src/io/p5.Table.js","modules":{"Table":1},"classes":{"p5.Table":1},"fors":{},"namespaces":{}},"src/io/p5.TableRow.js":{"name":"src/io/p5.TableRow.js","modules":{},"classes":{"p5.TableRow":1},"fors":{},"namespaces":{}},"src/io/p5.XML.js":{"name":"src/io/p5.XML.js","modules":{},"classes":{"p5.XML":1},"fors":{},"namespaces":{}},"src/math/calculation.js":{"name":"src/math/calculation.js","modules":{"Calculation":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/math.js":{"name":"src/math/math.js","modules":{"Vector":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/noise.js":{"name":"src/math/noise.js","modules":{"Noise":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/p5.Vector.js":{"name":"src/math/p5.Vector.js","modules":{},"classes":{"p5.Vector":1},"fors":{},"namespaces":{}},"src/math/random.js":{"name":"src/math/random.js","modules":{"Random":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/math/trigonometry.js":{"name":"src/math/trigonometry.js","modules":{"Trigonometry":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/attributes.js":{"name":"src/typography/attributes.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/loading_displaying.js":{"name":"src/typography/loading_displaying.js","modules":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/typography/p5.Font.js":{"name":"src/typography/p5.Font.js","modules":{},"classes":{"p5.Font":1},"fors":{},"namespaces":{}},"src/utilities/array_functions.js":{"name":"src/utilities/array_functions.js","modules":{"Array Functions":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/conversion.js":{"name":"src/utilities/conversion.js","modules":{"Conversion":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/string_functions.js":{"name":"src/utilities/string_functions.js","modules":{"String Functions":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/utilities/time_date.js":{"name":"src/utilities/time_date.js","modules":{"Time & Date":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/3d_primitives.js":{"name":"src/webgl/3d_primitives.js","modules":{"3D Primitives":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/GeometryBuilder.js":{"name":"src/webgl/GeometryBuilder.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/interaction.js":{"name":"src/webgl/interaction.js","modules":{"Interaction":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/light.js":{"name":"src/webgl/light.js","modules":{"Lights":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/loading.js":{"name":"src/webgl/loading.js","modules":{"3D Models":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/material.js":{"name":"src/webgl/material.js","modules":{"Material":1},"classes":{},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Camera.js":{"name":"src/webgl/p5.Camera.js","modules":{"Camera":1},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"namespaces":{}},"src/webgl/p5.DataArray.js":{"name":"src/webgl/p5.DataArray.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.Framebuffer.js":{"name":"src/webgl/p5.Framebuffer.js","modules":{"Rendering":1},"classes":{"p5.FramebufferCamera":1,"p5.FramebufferTexture":1,"p5.Framebuffer":1},"fors":{"p5.Framebuffer":1},"namespaces":{}},"src/webgl/p5.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":1,"p5.Geometry":1},"namespaces":{}},"src/webgl/p5.Matrix.js":{"name":"src/webgl/p5.Matrix.js","modules":{},"classes":{"p5.Matrix":1},"fors":{},"namespaces":{}},"src/webgl/p5.RenderBuffer.js":{"name":"src/webgl/p5.RenderBuffer.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.Immediate.js":{"name":"src/webgl/p5.RendererGL.Immediate.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.Retained.js":{"name":"src/webgl/p5.RendererGL.Retained.js","modules":{},"classes":{},"fors":{},"namespaces":{}},"src/webgl/p5.RendererGL.js":{"name":"src/webgl/p5.RendererGL.js","modules":{},"classes":{"p5.RendererGL":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Shader.js":{"name":"src/webgl/p5.Shader.js","modules":{},"classes":{"p5.Shader":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/p5.Texture.js":{"name":"src/webgl/p5.Texture.js","modules":{},"classes":{"p5.Texture":1},"fors":{"p5":1},"namespaces":{}},"src/webgl/text.js":{"name":"src/webgl/text.js","modules":{},"classes":{"ImageInfos":1,"FontInfo":1,"Cubic":1},"fors":{},"namespaces":{}},"lib/addons/p5.sound.js":{"name":"lib/addons/p5.sound.js","modules":{"p5.sound":1},"classes":{"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.Envelope":1,"p5.Noise":1,"p5.Pulse":1,"p5.AudioIn":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.PeakDetect":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.OnsetDetect":1,"p5.PolySynth":1},"fors":{"p5.sound":1,"p5":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.Envelope":1,"p5.AudioIn":1,"p5.Effect":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.PolySynth":1},"namespaces":{}},"lib/addons/p5.sound.min.js":{"name":"lib/addons/p5.sound.min.js","modules":{},"classes":{},"fors":{},"namespaces":{}}},"modules":{"Environment":{"name":"Environment","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Environment","file":"src/accessibility/color_namer.js","line":1,"requires":["core"]},"Color":{"name":"Color","submodules":{"Color Conversion":1,"Creating & Reading":1,"Setting":1},"elements":{},"classes":{"p5.Color":1},"fors":{"p5":1},"namespaces":{},"file":"src/color/p5.Color.js","line":318},"Color Conversion":{"name":"Color Conversion","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/color_conversion.js","line":1,"requires":["core"]},"Creating & Reading":{"name":"Creating & Reading","submodules":{},"elements":{},"classes":{"p5.Color":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/p5.Color.js","line":318,"requires":["core","constants"],"description":"

            A class to describe a color.

            \n

            Each p5.Color object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation() is called.

            \n

            Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.

            \n

            When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.

            \n

            Note: color() is the recommended way to create an\ninstance of this class.

            \n"},"Setting":{"name":"Setting","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Color","namespace":"","file":"src/color/setting.js","line":1,"requires":["core","constants"]},"Shape":{"name":"Shape","submodules":{"2D Primitives":1,"Curves":1,"Vertex":1,"3D Primitives":1,"3D Models":1},"elements":{},"classes":{"p5.Geometry":1,"p5.Matrix":1},"fors":{"p5":1,"p5.Geometry":1},"namespaces":{},"file":"src/webgl/p5.Matrix.js","line":19},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/2d_primitives.js","line":1,"requires":["core","constants"]},"Attributes":{"name":"Attributes","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src/core/shape/attributes.js","line":1,"requires":["core","constants"]},"Curves":{"name":"Curves","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/curves.js","line":1,"requires":["core"]},"Vertex":{"name":"Vertex","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/shape/vertex.js","line":1,"requires":["core","constants"]},"Constants":{"name":"Constants","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Constants","file":"src/core/constants.js","line":1},"Structure":{"name":"Structure","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"IO","file":"src/core/main.js","line":1,"requires":["constants"]},"DOM":{"name":"DOM","submodules":{},"elements":{},"classes":{"p5.Element":1,"p5.MediaElement":1,"p5.File":1},"fors":{"p5.Element":1,"p5":1},"namespaces":{},"module":"DOM","file":"src/dom/dom.js","line":5463,"description":"

            The web is much more than just canvas and the DOM functionality makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.\nThere is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.

            \n

            See tutorial: beyond the canvas\nfor more info on how to use this library.

            \n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{},"elements":{},"classes":{"p5.Graphics":1,"p5.Renderer":1,"p5.FramebufferCamera":1,"p5.FramebufferTexture":1,"p5.Framebuffer":1,"p5.RendererGL":1},"fors":{"p5":1,"p5.Framebuffer":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":945,"tag":"module","description":"

            Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.

            \n","requires":["constants"]},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{"console":1},"fors":{"p5":1,"console":1},"namespaces":{},"module":"Foundation","file":"src/core/reference.js","line":1},"Transform":{"name":"Transform","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Transform","file":"src/core/transform.js","line":1,"requires":["core","constants"]},"Data":{"name":"Data","submodules":{"LocalStorage":1,"Dictionary":1,"Array Functions":1,"Conversion":1,"String Functions":1},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5":1,"p5.TypedDict":1},"namespaces":{},"file":"src/data/p5.TypedDict.js","line":415},"LocalStorage":{"name":"LocalStorage","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/data/local_storage.js","line":1,"requires":["core\n\nThis module defines the p5 methods for working with local storage"]},"Dictionary":{"name":"Dictionary","submodules":{},"elements":{},"classes":{"p5.TypedDict":1,"p5.StringDict":1,"p5.NumberDict":1},"fors":{"p5.TypedDict":1,"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/data/p5.TypedDict.js","line":415,"requires":["core\n\nThis module defines the p5 methods for the p5 Dictionary classes.\nThe classes StringDict and NumberDict are for storing and working\nwith key-value pairs."],"description":"

            Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.

            \n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"file":"src/events/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"],"tag":"main","itemtype":"main"},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"

            A class to describe an image.

            \n

            Images are rectangular grids of pixels that can be displayed and modified.

            \n

            Existing images can be loaded by calling\nloadImage(). Blank images can be created by\ncalling createImage(). p5.Image objects\nhave methods for common tasks such as applying filters and modifying\npixel values.

            \n"},"Loading & Displaying":{"name":"Loading & Displaying","submodules":{},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Typography","namespace":"","file":"src/typography/p5.Font.js","line":13,"requires":["core"],"description":"

            This module defines the p5.Font class and functions for\ndrawing text to the display canvas.

            \n"},"Pixels":{"name":"Pixels","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Image","namespace":"","file":"src/image/pixels.js","line":1,"requires":["core"]},"IO":{"name":"IO","submodules":{"Structure":1,"Input":1,"Output":1,"Table":1,"Time & Date":1},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1,"p5.Table":1,"p5.TableRow":1,"p5.XML":1},"fors":{"p5":1},"namespaces":{},"file":"src/io/p5.XML.js","line":9},"Input":{"name":"Input","submodules":{},"elements":{},"classes":{"p5.XML":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/p5.XML.js","line":9,"requires":["core"],"description":"

            XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.

            \n"},"Output":{"name":"Output","submodules":{},"elements":{},"classes":{"p5":1,"p5.PrintWriter":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/files.js","line":1186,"description":"

            This is the p5 instance constructor.

            \n

            A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(),\nsetup(), and/or\ndraw() properties on it for running a sketch.

            \n

            A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object

            \n"},"Table":{"name":"Table","submodules":{},"elements":{},"classes":{"p5.Table":1,"p5.TableRow":1},"fors":{},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/io/p5.TableRow.js","line":9,"requires":["core"],"description":"

            Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.

            \n"},"Math":{"name":"Math","submodules":{"Calculation":1,"Vector":1,"Noise":1,"Random":1,"Trigonometry":1},"elements":{},"classes":{"p5.Vector":1},"fors":{"p5":1},"namespaces":{},"file":"src/math/p5.Vector.js","line":11},"Calculation":{"name":"Calculation","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/calculation.js","line":1,"requires":["core"]},"Vector":{"name":"Vector","submodules":{},"elements":{},"classes":{"p5.Vector":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/p5.Vector.js","line":11,"requires":["core"],"description":"

            A class to describe a two or three-dimensional vector.

            \n

            A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.

            \n

            p5.Vector objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel). Vector math relies on\nmethods inside the p5.Vector class.

            \n

            Note: createVector() is the recommended way\nto make an instance of this class.

            \n"},"Noise":{"name":"Noise","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/noise.js","line":14,"requires":["core"]},"Random":{"name":"Random","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/random.js","line":1,"requires":["core"]},"Trigonometry":{"name":"Trigonometry","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Math","namespace":"","file":"src/math/trigonometry.js","line":1,"requires":["core","constants"]},"Typography":{"name":"Typography","submodules":{"Attributes":1,"Loading & Displaying":1},"elements":{},"classes":{"p5.Font":1},"fors":{"p5":1},"namespaces":{},"file":"src/typography/p5.Font.js","line":13},"Array Functions":{"name":"Array Functions","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/array_functions.js","line":1,"requires":["core"]},"Conversion":{"name":"Conversion","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/conversion.js","line":1,"requires":["core"]},"String Functions":{"name":"String Functions","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Data","namespace":"","file":"src/utilities/string_functions.js","line":1,"requires":["core"]},"Time & Date":{"name":"Time & Date","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"IO","namespace":"","file":"src/utilities/time_date.js","line":1,"requires":["core"]},"3D Primitives":{"name":"3D Primitives","submodules":{},"elements":{},"classes":{"p5.Geometry":1},"fors":{"p5":1,"p5.Geometry":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/p5.Geometry.js","line":13,"requires":["core","p5.Geometry"],"description":"

            p5 Geometry class

            \n"},"3D":{"name":"3D","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Shader":1,"p5.Texture":1,"ImageInfos":1,"FontInfo":1,"Cubic":1},"fors":{"p5":1,"p5.Camera":1},"namespaces":{},"file":"src/webgl/text.js","line":277},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"

            This module defines the p5.Shader class

            \n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"3D","namespace":"","file":"src/webgl/p5.Camera.js","line":723,"requires":["core"],"description":"

            A class to describe a camera for viewing a 3D sketch.

            \n

            Each p5.Camera object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.

            \n

            In WebGL mode, the default camera is a p5.Camera object that can be\ncontrolled with the camera(),\nperspective(),\northo(), and\nfrustum() functions. Additional cameras can be\ncreated with createCamera() and activated\nwith setCamera().

            \n

            Note: p5.Camera’s methods operate in two coordinate systems:

            \n
              \n
            • The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling myCamera.setPosition() places the camera in 3D space using\n\"world\" coordinates.
              • \n
            • The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\nmyCamera.move() moves the camera along its own axes.
              • \n
            \n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.Envelope":1,"p5.Noise":1,"p5.Pulse":1,"p5.AudioIn":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.PeakDetect":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.OnsetDetect":1,"p5.PolySynth":1},"fors":{"p5.sound":1,"p5":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Oscillator":1,"p5.Envelope":1,"p5.AudioIn":1,"p5.Effect":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.Distortion":1,"p5.Gain":1,"p5.AudioVoice":1,"p5.MonoSynth":1,"p5.PolySynth":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11691,"description":"

            p5.sound extends p5 with Web Audio functionality including audio input,\nplayback, analysis and synthesis.\n

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

              p5.sound is on GitHub.\nDownload the latest version\nhere.

              ","tag":"main","itemtype":"main"}},"classes":{"p5":{"name":"p5","shortname":"p5","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src/core/main.js","line":12,"description":"

              This is the p5 instance constructor.

              \n

              A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(),\nsetup(), and/or\ndraw() properties on it for running a sketch.

              \n

              A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object

              \n","is_constructor":1,"params":[{"name":"sketch","description":"

              a closure that can set optional preload(),\n setup(), and/or draw() properties on the\n given p5 instance

              \n","type":"Function(p5)"},{"name":"node","description":"

              element to attach canvas to

              \n","type":"HTMLElement","optional":true}],"return":{"description":"a p5 instance","type":"P5"}},"p5.Color":{"name":"p5.Color","shortname":"p5.Color","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Color","submodule":"Creating & Reading","namespace":"","file":"src/color/p5.Color.js","line":318,"description":"

              A class to describe a color.

              \n

              Each p5.Color object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\nsaturation() is called.

              \n

              Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.

              \n

              When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.

              \n

              Note: color() is the recommended way to create an\ninstance of this class.

              \n","is_constructor":1,"params":[{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true},{"name":"vals","description":"

              an array containing the color values\n for red, green, blue and alpha channel\n or CSS color.

              \n","type":"Number[]|String"}]},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"

              A class to describe an\nHTML element.

              \n

              Sketches can use many elements. Common elements include the drawing canvas,\nbuttons, sliders, webcam feeds, and so on.

              \n

              All elements share the methods of the p5.Element class. They're created\nwith functions such as createCanvas() and\ncreateButton().

              \n","is_constructor":1,"params":[{"name":"elt","description":"

              wrapped DOM element.

              \n","type":"HTMLElement"},{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button element and\n // place it beneath the canvas.\n let btn = createButton('change');\n btn.position(0, 100);\n\n // Call randomColor() when\n // the button is pressed.\n btn.mousePressed(randomColor);\n\n describe('A gray square with a button that says \"change\" beneath it. The square changes color when the user presses the button.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"

              Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.

              \n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"

              width

              \n","type":"Number"},{"name":"h","description":"

              height

              \n","type":"Number"},{"name":"renderer","description":"

              the renderer to use, either P2D or WEBGL

              \n","type":"Constant"},{"name":"pInst","description":"

              pointer to p5 instance

              \n","type":"P5","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"

              Main graphics and rendering context, as well as the base API\nimplementation for p5.js \"core\". To be used as the superclass for\nRenderer2D and Renderer3D classes, respectively.

              \n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"

              DOM node that is wrapped

              \n","type":"HTMLElement"},{"name":"pInst","description":"

              pointer to p5 instance

              \n","type":"P5","optional":true},{"name":"isMainCanvas","description":"

              whether we're using it as main canvas

              \n","type":"Boolean","optional":true}]},"console":{"name":"console","shortname":"console","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","submodule":"Foundation","namespace":""},"p5.TypedDict":{"name":"p5.TypedDict","shortname":"p5.TypedDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":82,"description":"

              Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.

              \n","is_constructor":1},"p5.StringDict":{"name":"p5.StringDict","shortname":"p5.StringDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":397,"description":"

              A simple Dictionary class for Strings.

              \n","extends":"p5.TypedDict"},"p5.NumberDict":{"name":"p5.NumberDict","shortname":"p5.NumberDict","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Data","submodule":"Dictionary","namespace":"","file":"src/data/p5.TypedDict.js","line":415,"description":"

              A simple Dictionary class for Numbers.

              \n","is_constructor":1,"extends":"p5.TypedDict"},"p5.MediaElement":{"name":"p5.MediaElement","shortname":"p5.MediaElement","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/dom/dom.js","line":4080,"description":"

              A class to handle audio and video.

              \n

              p5.MediaElement extends p5.Element with\nmethods to handle audio and video. p5.MediaElement objects are created by\ncalling createVideo,\ncreateAudio, and\ncreateCapture.

              \n","is_constructor":1,"params":[{"name":"elt","description":"

              DOM node that is wrapped

              \n","type":"String"}],"extends":"p5.Element","example":["\n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createCapture().\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A webcam feed with inverted colors.');\n}\n\nfunction draw() {\n // Display the video stream and invert the colors.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n filter(INVERT);\n}\n\n
              "]},"p5.File":{"name":"p5.File","shortname":"p5.File","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/dom/dom.js","line":5463,"description":"

              A class to describe a file.

              \n

              p5.File objects are used by\nmyElement.drop() and\ncreated by\ncreateFileInput.

              \n","is_constructor":1,"params":[{"name":"file","description":"

              wrapped file.

              \n","type":"File"}],"example":["\n
              \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Display the p5.File's info once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n\n
              \n\n
              \n\n// Use the file input to select an image to\n// load and display.\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath the canvas.\n // Call handleImage() when the file image loads.\n let input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if it's ready.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Use the p5.File's data once it loads.\nfunction handleImage(file) {\n // Check the p5.File's type.\n if (file.type === 'image') {\n // Create an image using using the p5.File's data.\n img = createImg(file.data, '');\n\n // Hide the image element so it doesn't appear twice.\n img.hide();\n } else {\n img = null;\n }\n}\n\n
              "]},"p5.Image":{"name":"p5.Image","shortname":"p5.Image","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Image","submodule":"Image","namespace":"","file":"src/image/p5.Image.js","line":21,"description":"

              A class to describe an image.

              \n

              Images are rectangular grids of pixels that can be displayed and modified.

              \n

              Existing images can be loaded by calling\nloadImage(). Blank images can be created by\ncalling createImage(). p5.Image objects\nhave methods for common tasks such as applying filters and modifying\npixel values.

              \n","example":["\n
              \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a brick wall.');\n}\n\n
              \n\n
              \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A grayscale image of a brick wall.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
              "],"is_constructor":1,"params":[{"name":"width","description":"","type":"Number"},{"name":"height","description":"","type":"Number"}]},"p5.PrintWriter":{"name":"p5.PrintWriter","shortname":"p5.PrintWriter","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Output","namespace":"","file":"src/io/files.js","line":1186,"params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"","type":"String","optional":true}]},"p5.Table":{"name":"p5.Table","shortname":"p5.Table","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Table","namespace":"","file":"src/io/p5.Table.js","line":33,"description":"

              Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.

              \n","is_constructor":1,"params":[{"name":"rows","description":"

              An array of p5.TableRow objects

              \n","type":"p5.TableRow[]","optional":true}]},"p5.TableRow":{"name":"p5.TableRow","shortname":"p5.TableRow","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Table","namespace":"","file":"src/io/p5.TableRow.js","line":9,"description":"

              A TableRow object represents a single row of data values,\nstored in columns, from a table.

              \n

              A Table Row contains both an ordered array, and an unordered\nJSON object.

              \n","is_constructor":1,"params":[{"name":"str","description":"

              optional: populate the row with a\n string of values, separated by the\n separator

              \n","type":"String","optional":true},{"name":"separator","description":"

              comma separated values (csv) by default

              \n","type":"String","optional":true}]},"p5.XML":{"name":"p5.XML","shortname":"p5.XML","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"IO","submodule":"Input","namespace":"","file":"src/io/p5.XML.js","line":9,"description":"

              XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.

              \n","is_constructor":1,"example":["\n
              \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum('id');\n let coloring = children[i].getString('species');\n let name = children[i].getContent();\n print(id + ', ' + coloring + ', ' + name);\n }\n\n describe('no image displayed');\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
              "]},"p5.Vector":{"name":"p5.Vector","shortname":"p5.Vector","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Math","submodule":"Vector","namespace":"","file":"src/math/p5.Vector.js","line":11,"description":"

              A class to describe a two or three-dimensional vector.

              \n

              A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.

              \n

              p5.Vector objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in pos.add(vel). Vector math relies on\nmethods inside the p5.Vector class.

              \n

              Note: createVector() is the recommended way\nto make an instance of this class.

              \n","is_constructor":1,"params":[{"name":"x","description":"

              x component of the vector.

              \n","type":"Number","optional":true},{"name":"y","description":"

              y component of the vector.

              \n","type":"Number","optional":true},{"name":"z","description":"

              z component of the vector.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(75, 75);\n\n // Style the points.\n strokeWeight(5);\n\n // Draw the first point using a p5.Vector.\n point(p1);\n\n // Draw the second point using a p5.Vector's components.\n point(p2.x, p2.y);\n\n describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');\n}\n\n
              \n\n
              \n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n\n
              "]},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"

              A class to describe fonts.

              \n","is_constructor":1,"params":[{"name":"pInst","description":"

              pointer to p5 instance.

              \n","type":"P5","optional":true}],"example":["\n
              \n\nlet font;\n\nfunction preload() {\n // Creates a p5.Font object.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the text.\n fill('deeppink');\n textFont(font);\n textSize(36);\n\n // Display the text.\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a gray background.');\n}\n\n
              "]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"3D","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":723,"description":"

              A class to describe a camera for viewing a 3D sketch.

              \n

              Each p5.Camera object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.

              \n

              In WebGL mode, the default camera is a p5.Camera object that can be\ncontrolled with the camera(),\nperspective(),\northo(), and\nfrustum() functions. Additional cameras can be\ncreated with createCamera() and activated\nwith setCamera().

              \n

              Note: p5.Camera’s methods operate in two coordinate systems:

              \n
                \n
              • The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling myCamera.setPosition() places the camera in 3D space using\n\"world\" coordinates.
                • \n
              • The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\nmyCamera.move() moves the camera along its own axes.
                • \n
              \n","params":[{"name":"rendererGL","description":"

              instance of WebGL renderer

              \n","type":"RendererGL"}],"example":["\n
              \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn the camera left and right, called \"panning\".\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
              \n\n
              \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
              "]},"p5.Framebuffer":{"name":"p5.Framebuffer","shortname":"p5.Framebuffer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","namespace":"","file":"src/webgl/p5.Framebuffer.js","line":76,"description":"

              An object that one can draw to and then read as a texture. While similar\nto a p5.Graphics, using a p5.Framebuffer as a texture will generally run\nmuch faster, as it lives within the same WebGL context as the canvas it\nis created on. It only works in WebGL mode.

              \n","is_constructor":1,"params":[{"name":"target","description":"

              A p5 global instance or p5.Graphics

              \n","type":"p5.Graphics|p5"},{"name":"settings","description":"

              A settings object

              \n","type":"Object","optional":true}]},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Shape","submodule":"3D Primitives","namespace":"","file":"src/webgl/p5.Geometry.js","line":13,"description":"

              p5 Geometry class

              \n","is_constructor":1,"params":[{"name":"detailX","description":"

              number of vertices along the x-axis.

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of vertices along the y-axis.

              \n","type":"Integer","optional":true},{"name":"callback","description":"

              function to call upon object instantiation.

              \n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"3D","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"

              A class to describe a shader program.

              \n

              Each p5.Shader object contains a shader program that runs on the graphics\nprocessing unit (GPU). Shaders can process many pixels or vertices at the\nsame time, making them fast for many graphics tasks. They’re written in a\nlanguage called\nGLSL\nand run along with the rest of the code in a sketch.

              \n

              A shader program consists of two files, a vertex shader and a fragment\nshader. The vertex shader affects where 3D geometry is drawn on the screen\nand the fragment shader affects color. Once the p5.Shader object is\ncreated, it can be used with the shader()\nfunction, as in shader(myShader).

              \n

              Note: createShader(),\ncreateFilterShader(), and\nloadShader() are the recommended ways to\ncreate an instance of this class.

              \n","is_constructor":1,"params":[{"name":"renderer","description":"

              WebGL context for this shader.

              \n","type":"p5.RendererGL"},{"name":"vertSrc","description":"

              source code for the vertex shader program.

              \n","type":"String"},{"name":"fragSrc","description":"

              source code for the fragment shader program.

              \n","type":"String"}],"example":["\n
              \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
              \n\n
              \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
              "]},"p5.sound":{"name":"p5.sound","shortname":"p5.sound","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":""},"p5.SoundFile":{"name":"p5.SoundFile","shortname":"p5.SoundFile","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":1405,"description":"

              SoundFile object with a path to a file.

              \n\n

              The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.

              \n\n

              To do something with the sound as soon as it loads\npass the name of a function as the second parameter.

              \n\n

              Only one file path is required. However, audio file formats\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.

              ","is_constructor":1,"params":[{"name":"path","description":"

              path to a sound file (String). Optionally,\n you may include multiple file formats in\n an array. Alternately, accepts an object\n from the HTML5 File API, or a p5.File.

              \n","type":"String|Array"},{"name":"successCallback","description":"

              Name of a function to call once file loads

              \n","type":"Function","optional":true},{"name":"errorCallback","description":"

              Name of a function to call if file fails to\n load. This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.

              \n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"

              Name of a function to call while file\n is loading. That function will\n receive progress of the request to\n load the sound file\n (between 0 and 1) as its first\n parameter. This progress\n does not account for the additional\n time needed to decode the audio data.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n
              "]},"p5.Amplitude":{"name":"p5.Amplitude","shortname":"p5.Amplitude","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":3022,"description":"

              Amplitude measures volume between 0.0 and 1.0.\nListens to all p5sound by default, or use setInput()\nto listen to a specific sound source. Accepts an optional\nsmoothing value, which defaults to 0.

              \n","is_constructor":1,"params":[{"name":"smoothing","description":"

              between 0.0 and .999 to smooth\n amplitude readings (defaults to 0)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet sound, amplitude;\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying() ){\n sound.pause();\n } else {\n sound.loop();\n\t\tamplitude = new p5.Amplitude();\n\t\tamplitude.setInput(sound);\n }\n}\n\n
              "]},"p5.FFT":{"name":"p5.FFT","shortname":"p5.FFT","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":3347,"description":"

              FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n\naudio frequencies within a waveform.

              \n\n

              Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses:
              • FFT.waveform() computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.
              \n• FFT.analyze() computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with getEnergy() to measure amplitude at specific\nfrequencies, or within a range of frequencies.

              \n\n

              FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as bins. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the\nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.

              ","is_constructor":1,"params":[{"name":"smoothing","description":"

              Smooth results of Freq Spectrum.\n 0.0 < smoothing < 1.0.\n Defaults to 0.8.

              \n","type":"Number","optional":true},{"name":"bins","description":"

              Length of resulting array.\n Must be a power of two between\n 16 and 1024. Defaults to 1024.

              \n","type":"Number","optional":true}],"example":["\n
              \nfunction preload(){\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT();\n sound.amp(0.2);\n}\n\nfunction draw(){\n background(220);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n let waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(20);\n for (let i = 0; i < waveform.length; i++){\n let x = map(i, 0, waveform.length, 0, width);\n let y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n\n text('tap to play', 20, 20);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying()) {\n sound.pause();\n } else {\n sound.loop();\n }\n}\n
              "]},"p5.Oscillator":{"name":"p5.Oscillator","shortname":"p5.Oscillator","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4060,"description":"

              Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).

              \n\n

              Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.\n

              ","is_constructor":1,"params":[{"name":"freq","description":"

              frequency defaults to 440Hz

              \n","type":"Number","optional":true},{"name":"type","description":"

              type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'

              \n","type":"String","optional":true}],"example":["\n
              \nlet osc, playing, freq, amp;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator('sine');\n}\n\nfunction draw() {\n background(220)\n freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);\n amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);\n\n text('tap to play', 20, 20);\n text('freq: ' + freq, 20, 40);\n text('amp: ' + amp, 20, 60);\n\n if (playing) {\n // smooth the transitions by 0.1 seconds\n osc.freq(freq, 0.1);\n osc.amp(amp, 0.1);\n }\n}\n\nfunction playOscillator() {\n // starting an oscillator on a user gesture will enable audio\n // in browsers that have a strict autoplay policy.\n // See also: userStartAudio();\n osc.start();\n playing = true;\n}\n\nfunction mouseReleased() {\n // ramp amplitude to 0 over 0.5 seconds\n osc.amp(0, 0.5);\n playing = false;\n}\n
              "]},"p5.SinOsc":{"name":"p5.SinOsc","shortname":"p5.SinOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4602,"description":"

              Constructor: new p5.SinOsc().\nThis creates a Sine Wave Oscillator and is\nequivalent to new p5.Oscillator('sine')\n or creating a p5.Oscillator and then calling\nits method setType('sine').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.TriOsc":{"name":"p5.TriOsc","shortname":"p5.TriOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4629,"description":"

              Constructor: new p5.TriOsc().\nThis creates a Triangle Wave Oscillator and is\nequivalent to new p5.Oscillator('triangle')\n or creating a p5.Oscillator and then calling\nits method setType('triangle').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.SawOsc":{"name":"p5.SawOsc","shortname":"p5.SawOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4656,"description":"

              Constructor: new p5.SawOsc().\nThis creates a SawTooth Wave Oscillator and is\nequivalent to new p5.Oscillator('sawtooth')\n or creating a p5.Oscillator and then calling\nits method setType('sawtooth').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.SqrOsc":{"name":"p5.SqrOsc","shortname":"p5.SqrOsc","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4683,"description":"

              Constructor: new p5.SqrOsc().\nThis creates a Square Wave Oscillator and is\nequivalent to new p5.Oscillator('square')\n or creating a p5.Oscillator and then calling\nits method setType('square').\nSee p5.Oscillator for methods.

              \n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"

              Set the frequency

              \n","type":"Number","optional":true}]},"p5.Envelope":{"name":"p5.Envelope","shortname":"p5.Envelope","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":4721,"description":"

              Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\nADSR\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: osc.freq(env).

              \n

              Use setRange to change the attack/release level.\nUse setADSR to change attackTime, decayTime, sustainPercent and releaseTime.

              \n

              Use the play method to play the entire envelope,\nthe ramp method for a pingable trigger,\nor triggerAttack/\ntriggerRelease to trigger noteOn/noteOff.

              ","is_constructor":1,"example":["\n
              \nlet t1 = 0.1; // attack time in seconds\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\n\nlet env;\nlet triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('tap to play', 20, 20);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope(t1, l1, t2, l2);\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction playSound() {\n // starting the oscillator ensures that audio is enabled.\n triOsc.start();\n env.play(triOsc);\n}\n
              "]},"p5.Noise":{"name":"p5.Noise","shortname":"p5.Noise","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":5620,"description":"

              Noise is a type of oscillator that generates a buffer with random values.

              \n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"

              Type of noise can be 'white' (default),\n 'brown' or 'pink'.

              \n","type":"String"}]},"p5.Pulse":{"name":"p5.Pulse","shortname":"p5.Pulse","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":5779,"description":"

              Creates a Pulse object, an oscillator that implements\nPulse Width Modulation.\nThe pulse is created with two oscillators.\nAccepts a parameter for frequency, and to set the\nwidth between the pulses. See \np5.Oscillator for a full list of methods.

              \n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"

              Frequency in oscillations per second (Hz)

              \n","type":"Number","optional":true},{"name":"w","description":"

              Width between the pulses (0 to 1.0,\n defaults to 0)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet pulse;\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startPulse);\n background(220);\n\n pulse = new p5.Pulse();\n pulse.amp(0.5);\n pulse.freq(220);\n}\nfunction startPulse() {\n pulse.start();\n pulse.amp(0.5, 0.02);\n}\nfunction mouseReleased() {\n pulse.amp(0, 0.2);\n}\nfunction draw() {\n background(220);\n text('tap to play', 5, 20, width - 20);\n let w = map(mouseX, 0, width, 0, 1);\n w = constrain(w, 0, 1);\n pulse.width(w);\n text('pulse width: ' + w, 5, height - 20);\n}\n
              "]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6015,"description":"

              Get audio from an input, i.e. your computer's microphone.

              \n\n

              Turn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.

              \n\n

              If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.

              \n\n

              Note: This uses the getUserMedia/\nStream API, which is not supported by certain browsers. Access in Chrome browser\nis limited to localhost and https, but access over http may be limited.

              ","is_constructor":1,"params":[{"name":"errorCallback","description":"

              A function to call if there is an error\n accessing the AudioIn. For example,\n Safari and iOS devices do not\n currently allow microphone access.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet mic;\n\n function setup(){\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(userStartAudio);\n textAlign(CENTER);\n mic = new p5.AudioIn();\n mic.start();\n}\n\nfunction draw(){\n background(0);\n fill(255);\n text('tap to start', width/2, 20);\n\n micLevel = mic.getLevel();\n let y = height - micLevel * height;\n ellipse(width/2, y, 10, 10);\n}\n
              "]},"p5.Effect":{"name":"p5.Effect","shortname":"p5.Effect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6423,"description":"

              Effect is a base class for audio effects in p5.
              \nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.

              \n

              This class is extended by p5.Distortion,\np5.Compressor,\np5.Delay,\np5.Filter,\np5.Reverb.

              \n","is_constructor":1,"params":[{"name":"ac","description":"

              Reference to the audio context of the p5 object

              \n","type":"Object","optional":true},{"name":"input","description":"

              Gain Node effect wrapper

              \n","type":"AudioNode","optional":true},{"name":"output","description":"

              Gain Node effect wrapper

              \n","type":"AudioNode","optional":true},{"name":"_drywet","description":"

              Tone.JS CrossFade node (defaults to value: 1)

              \n","type":"Object","optional":true},{"name":"wet","description":"

              Effects that extend this class should connect\n to the wet signal to this gain node, so that dry and wet\n signals are mixed properly.

              \n","type":"AudioNode","optional":true}]},"p5.Filter":{"name":"p5.Filter","shortname":"p5.Filter","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6628,"description":"

              A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:

              \np5.LowPass:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.
              \np5.HighPass:\nThe opposite of a lowpass filter.
              \np5.BandPass:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.
              \n\n

              The .res() method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"

              'lowpass' (default), 'highpass', 'bandpass'

              \n","type":"String","optional":true}],"example":["\n
              \nlet fft, noise, filter;\n\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mousePressed(makeNoise);\n fill(255, 0, 255);\n\n filter = new p5.BandPass();\n noise = new p5.Noise();\n noise.disconnect();\n noise.connect(filter);\n\n fft = new p5.FFT();\n}\n\nfunction draw() {\n background(220);\n\n // set the BandPass frequency based on mouseX\n let freq = map(mouseX, 0, width, 20, 10000);\n freq = constrain(freq, 0, 22050);\n filter.freq(freq);\n // give the filter a narrow band (lower res = wider bandpass)\n filter.res(50);\n\n // draw filtered spectrum\n let spectrum = fft.analyze();\n noStroke();\n for (let i = 0; i < spectrum.length; i++) {\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width/spectrum.length, h);\n }\n if (!noise.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20);\n }\n}\n\nfunction makeNoise() {\n // see also: `userStartAudio()`\n noise.start();\n noise.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n noise.amp(0, 0.2);\n}\n\n
              "]},"p5.LowPass":{"name":"p5.LowPass","shortname":"p5.LowPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6914,"description":"

              Constructor: new p5.LowPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('lowpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.HighPass":{"name":"p5.HighPass","shortname":"p5.HighPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6938,"description":"

              Constructor: new p5.HighPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('highpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.BandPass":{"name":"p5.BandPass","shortname":"p5.BandPass","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6962,"description":"

              Constructor: new p5.BandPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('bandpass').\nSee p5.Filter for methods.

              \n","is_constructor":1,"extends":"p5.Filter"},"p5.EQ":{"name":"p5.EQ","shortname":"p5.EQ","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7105,"description":"

              p5.EQ is an audio effect that performs the function of a multiband\naudio equalizer. Equalization is used to adjust the balance of\nfrequency compoenents of an audio signal. This process is commonly used\nin sound production and recording to change the waveform before it reaches\na sound output device. EQ can also be used as an audio effect to create\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\ninstantiated with 3 or 8 bands. Bands can be added or removed from\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"

              Constructor will accept 3 or 8, defaults to 3

              \n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n
              \nlet eq, soundFile\nlet eqBandIndex = 0;\nlet eqBandNames = ['lows', 'mids', 'highs'];\n\nfunction preload() {\n soundFormats('mp3', 'ogg');\n soundFile = loadSound('assets/beat');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(toggleSound);\n\n eq = new p5.EQ(eqBandNames.length);\n soundFile.disconnect();\n eq.process(soundFile);\n}\n\nfunction draw() {\n background(30);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('filtering ', 50, 25);\n\n fill(255, 40, 255);\n textSize(26);\n text(eqBandNames[eqBandIndex], 50, 55);\n\n fill(255);\n textSize(9);\n\n if (!soundFile.isPlaying()) {\n text('tap to play', 50, 80);\n } else {\n text('tap to filter next band', 50, 80)\n }\n}\n\nfunction toggleSound() {\n if (!soundFile.isPlaying()) {\n soundFile.play();\n } else {\n eqBandIndex = (eqBandIndex + 1) % eq.bands.length;\n }\n\n for (let i = 0; i < eq.bands.length; i++) {\n eq.bands[i].gain(0);\n }\n // filter the band we want to filter\n eq.bands[eqBandIndex].gain(-40);\n}\n
              "]},"p5.Panner3D":{"name":"p5.Panner3D","shortname":"p5.Panner3D","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7602,"description":"

              Panner3D is based on the \nWeb Audio Spatial Panner Node.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.

              \n

              The position is relative to an \nAudio Context Listener, which can be accessed\nby p5.soundOut.audiocontext.listener

              \n","is_constructor":1},"p5.Delay":{"name":"p5.Delay","shortname":"p5.Delay","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7926,"description":"

              Delay is an echo effect. It processes an existing sound source,\nand outputs a delayed version of that sound. The p5.Delay can\nproduce different effects depending on the delayTime, feedback,\nfilter, and type. In the example below, a feedback of 0.5 (the\ndefault value) will produce a looping delay that decreases in\nvolume by 50% each repeat. A filter will cut out the high\nfrequencies so that the delay does not sound as piercing as the\noriginal source.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"example":["\n
              \nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n osc = new p5.Oscillator('square');\n osc.amp(0.5);\n delay = new p5.Delay();\n\n // delay.process() accepts 4 parameters:\n // source, delayTime (in seconds), feedback, filter frequency\n delay.process(osc, 0.12, .7, 2300);\n\n cnv.mousePressed(oscStart);\n}\n\nfunction oscStart() {\n osc.start();\n}\n\nfunction mouseReleased() {\n osc.stop();\n}\n
              "]},"p5.Reverb":{"name":"p5.Reverb","shortname":"p5.Reverb","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":8308,"description":"

              Reverb adds depth to a sound through a large number of decaying\nechoes. It creates the perception that sound is occurring in a\nphysical space. The p5.Reverb has paramters for Time (how long does the\nreverb last) and decayRate (how much the sound decays with each echo)\nthat can be set with the .set() or .process() methods. The p5.Convolver\nextends p5.Reverb allowing you to recreate the sound of actual physical\nspaces through convolution.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"example":["\n
              \nlet soundFile, reverb;\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n reverb = new p5.Reverb();\n soundFile.disconnect(); // so we'll only hear reverb...\n\n // connect soundFile to reverb, process w/\n // 3 second reverbTime, decayRate of 2%\n reverb.process(soundFile, 3, 2);\n}\n\nfunction draw() {\n let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1);\n // 1 = all reverb, 0 = no reverb\n reverb.drywet(dryWet);\n\n background(220);\n text('tap to play', 10, 20);\n text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20);\n}\n\nfunction playSound() {\n soundFile.play();\n}\n
              "]},"p5.Convolver":{"name":"p5.Convolver","shortname":"p5.Convolver","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":8549,"description":"

              p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called \nconvolution.

              \n\n

              Convolution multiplies any audio input by an \"impulse response\"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.

              \n\n

              Use the method createConvolution(path) to instantiate a\np5.Convolver with a path to your impulse response audio file.

              ","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"

              path to a sound file

              \n","type":"String"},{"name":"callback","description":"

              function to call when loading succeeds

              \n","type":"Function","optional":true},{"name":"errorCallback","description":"

              function to call if loading fails.\n This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.

              \n","type":"Function","optional":true}],"example":["\n
              \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n
              "]},"p5.Phrase":{"name":"p5.Phrase","shortname":"p5.Phrase","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9103,"description":"

              A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.

              \n\n

              Phrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.

              \n\n

              The first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled playNote(value){}. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).

              ","is_constructor":1,"params":[{"name":"name","description":"

              Name so that you can access the Phrase.

              \n","type":"String"},{"name":"callback","description":"

              The name of a function that this phrase\n will call. Typically it will play a sound,\n and accept two parameters: a time at which\n to play the sound (in seconds from now),\n and a value from the sequence array. The\n time should be passed into the play() or\n start() method to ensure precision.

              \n","type":"Function"},{"name":"sequence","description":"

              Array of values to pass into the callback\n at each step of the phrase.

              \n","type":"Array"}],"example":["\n
              \nlet mySound, myPhrase, myPart;\nlet pattern = [1,0,0,2,0,2,0,0];\n\nfunction preload() {\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n text('tap to play', width/2, height/2);\n textAlign(CENTER, CENTER);\n\n myPhrase = new p5.Phrase('bbox', onEachStep, pattern);\n myPart = new p5.Part();\n myPart.addPhrase(myPhrase);\n myPart.setBPM(60);\n}\n\nfunction onEachStep(time, playbackRate) {\n mySound.rate(playbackRate);\n mySound.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n myPart.start();\n}\n
              "]},"p5.Part":{"name":"p5.Part","shortname":"p5.Part","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9185,"description":"

              A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents a 1/16th note.

              \n\n

              See p5.Phrase for more about musical timing.

              ","is_constructor":1,"params":[{"name":"steps","description":"

              Steps in the part

              \n","type":"Number","optional":true},{"name":"tatums","description":"

              Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)

              \n","type":"Number","optional":true}],"example":["\n
              \nlet box, drum, myPart;\nlet boxPat = [1,0,0,2,0,2,0,0];\nlet drumPat = [0,1,1,0,2,0,1,0];\n\nfunction preload() {\n box = loadSound('assets/beatbox.mp3');\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n textAlign(CENTER, CENTER);\n text('tap to play', width/2, height/2);\n\n let boxPhrase = new p5.Phrase('box', playBox, boxPat);\n let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n myPart = new p5.Part();\n myPart.addPhrase(boxPhrase);\n myPart.addPhrase(drumPhrase);\n myPart.setBPM(60);\n}\n\nfunction playBox(time, playbackRate) {\n box.rate(playbackRate);\n box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n drum.rate(playbackRate);\n drum.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n\n myPart.start();\n}\n
              "]},"p5.Score":{"name":"p5.Score","shortname":"p5.Score","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9493,"description":"

              A Score consists of a series of Parts. The parts will\nbe played back in order. For example, you could have an\nA part, a B part, and a C part, and play them back in this order\nnew p5.Score(a, a, b, a, c)

              \n","is_constructor":1,"params":[{"name":"parts","description":"

              One or multiple parts, to be played in sequence.

              \n","type":"p5.Part","optional":true,"multiple":true}]},"p5.SoundLoop":{"name":"p5.SoundLoop","shortname":"p5.SoundLoop","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":9673,"description":"

              SoundLoop

              \n","is_constructor":1,"params":[{"name":"callback","description":"

              this function will be called on each iteration of theloop

              \n","type":"Function"},{"name":"interval","description":"

              amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second.

              \n","type":"Number|String","optional":true}],"example":["\n
              \n let synth, soundLoop;\n let notePattern = [60, 62, 64, 67, 69, 72];\n\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n colorMode(HSB);\n background(0, 0, 86);\n text('tap to start/stop', 10, 20);\n\n //the looper's callback is passed the timeFromNow\n //this value should be used as a reference point from\n //which to schedule sounds\n let intervalInSeconds = 0.2;\n soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds);\n\n synth = new p5.MonoSynth();\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n if (soundLoop.isPlaying) {\n soundLoop.stop();\n } else {\n // start the loop\n soundLoop.start();\n }\n}\n\nfunction onSoundLoop(timeFromNow) {\n let noteIndex = (soundLoop.iterations - 1) % notePattern.length;\n let note = midiToFreq(notePattern[noteIndex]);\n synth.play(note, 0.5, timeFromNow);\n background(noteIndex * 360 / notePattern.length, 50, 100);\n}\n
              "]},"p5.Compressor":{"name":"p5.Compressor","shortname":"p5.Compressor","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10036,"description":"

              Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the main output.

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","is_constructor":1,"extends":"p5.Effect"},"p5.PeakDetect":{"name":"p5.PeakDetect","shortname":"p5.PeakDetect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10312,"description":"

              PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n

              \n

              \nTo use p5.PeakDetect, call update in the draw loop\nand pass in a p5.FFT object.\n

              \n

              \nYou can listen for a specific part of the frequency spectrum by\nsetting the range between freq1 and freq2.\n

              \n\n

              threshold is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.

              \n\n

              \nThe update method is meant to be run in the draw loop, and\nframes determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n framesPerPeak = 60 / (estimatedBPM / 60 );\n

              \n\n

              \nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by Felix Turner.\n

              ","is_constructor":1,"params":[{"name":"freq1","description":"

              lowFrequency - defaults to 20Hz

              \n","type":"Number","optional":true},{"name":"freq2","description":"

              highFrequency - defaults to 20000 Hz

              \n","type":"Number","optional":true},{"name":"threshold","description":"

              Threshold for detecting a beat between 0 and 1\n scaled logarithmically where 0.1 is 1/2 the loudness\n of 1.0. Defaults to 0.35.

              \n","type":"Number","optional":true},{"name":"framesPerPeak","description":"

              Defaults to 20.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 10;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n\n // p5.PeakDetect requires a p5.FFT\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n}\n\nfunction draw() {\n background(0);\n text('click to play/pause', width/2, height/2);\n\n // peakDetect accepts an fft post-analysis\n fft.analyze();\n peakDetect.update(fft);\n\n if ( peakDetect.isDetected ) {\n ellipseWidth = 50;\n } else {\n ellipseWidth *= 0.95;\n }\n\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n }\n}\n
              "]},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10559,"description":"

              Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().

              \n

              The record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.

              ","is_constructor":1,"example":["\n
              \nlet mic, recorder, soundFile;\nlet state = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n textAlign(CENTER, CENTER);\n\n // create an audio in\n mic = new p5.AudioIn();\n\n // prompts user to enable their browser mic\n mic.start();\n\n // create a sound recorder\n recorder = new p5.SoundRecorder();\n\n // connect the mic to the recorder\n recorder.setInput(mic);\n\n // this sound file will be used to\n // playback & save the recording\n soundFile = new p5.SoundFile();\n\n text('tap to record', width/2, height/2);\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n // make sure user enabled the mic\n if (state === 0 && mic.enabled) {\n\n // record to our p5.SoundFile\n recorder.record(soundFile);\n\n background(255,0,0);\n text('Recording!', width/2, height/2);\n state++;\n }\n else if (state === 1) {\n background(0,255,0);\n\n // stop recorder and\n // send result to soundFile\n recorder.stop();\n\n text('Done! Tap to play and download', width/2, height/2, width - 20);\n state++;\n }\n\n else if (state === 2) {\n soundFile.play(); // play the result!\n save(soundFile, 'mySound.wav');\n state++;\n }\n}\n
              "]},"p5.Distortion":{"name":"p5.Distortion","shortname":"p5.Distortion","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10816,"description":"

              A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\nKevin Ennis

              \n

              This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.

              \n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"

              Unbounded distortion amount.\n Normal values range from 0-1.

              \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

              'none', '2x', or '4x'.

              \n","type":"String","optional":true,"optdefault":"'none'"}]},"p5.Gain":{"name":"p5.Gain","shortname":"p5.Gain","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":10973,"description":"

              A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.

              \n","is_constructor":1,"example":["\n
              \n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, mixGain;\nfunction preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');\n sound2 = loadSound('assets/beat');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n // create a 'mix' gain bus to which we will connect both soundfiles\n mixGain = new p5.Gain();\n mixGain.connect();\n sound1.disconnect(); // diconnect from p5 output\n sound1Gain = new p5.Gain(); // setup a gain node\n sound1Gain.setInput(sound1); // connect the first sound to its input\n sound1Gain.connect(mixGain); // connect its output to the final mix bus\n sound2.disconnect();\n sound2Gain = new p5.Gain();\n sound2Gain.setInput(sound2);\n sound2Gain.connect(mixGain);\n}\nfunction startSound() {\n sound1.loop();\n sound2.loop();\n loop();\n}\nfunction mouseReleased() {\n sound1.stop();\n sound2.stop();\n}\nfunction draw(){\n background(220);\n textAlign(CENTER);\n textSize(11);\n fill(0);\n if (!sound1.isPlaying()) {\n text('tap and drag to play', width/2, height/2);\n return;\n }\n // map the horizontal position of the mouse to values useable for volume * control of sound1\n var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1);\n var sound2Volume = 1-sound1Volume;\n sound1Gain.amp(sound1Volume);\n sound2Gain.amp(sound2Volume);\n // map the vertical position of the mouse to values useable for 'output * volume control'\n var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n mixGain.amp(outputVolume);\n text('output', width/2, height - outputVolume * height * 0.9)\n fill(255, 0, 255);\n textAlign(LEFT);\n text('sound1', 5, height - sound1Volume * height * 0.9);\n textAlign(RIGHT);\n text('sound2', width - 5, height - sound2Volume * height * 0.9);\n}\n
              "]},"p5.AudioVoice":{"name":"p5.AudioVoice","shortname":"p5.AudioVoice","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11149,"description":"

              Base class for monophonic synthesizers. Any extensions of this class\nshould follow the API and implement the methods below in order to\nremain compatible with p5.PolySynth();

              \n","is_constructor":1},"p5.MonoSynth":{"name":"p5.MonoSynth","shortname":"p5.MonoSynth","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11247,"description":"

              A MonoSynth is used as a single voice for sound synthesis.\nThis is a class to be used in conjunction with the PolySynth\nclass. Custom synthetisers should be built inheriting from\nthis class.

              \n","is_constructor":1,"example":["\n
              \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n
              "]},"p5.OnsetDetect":{"name":"p5.OnsetDetect","shortname":"p5.OnsetDetect","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11624,"description":"

              Listen for onsets (a sharp increase in volume) within a given\nfrequency range.

              \n","is_constructor":1,"params":[{"name":"freqLow","description":"

              Low frequency

              \n","type":"Number"},{"name":"freqHigh","description":"

              High frequency

              \n","type":"Number"},{"name":"threshold","description":"

              Amplitude threshold between 0 (no energy) and 1 (maximum)

              \n","type":"Number"},{"name":"callback","description":"

              Function to call when an onset is detected

              \n","type":"Function"}]},"p5.PolySynth":{"name":"p5.PolySynth","shortname":"p5.PolySynth","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11691,"description":"

              An AudioVoice is used as a single voice for sound synthesis.\nThe PolySynth class holds an array of AudioVoice, and deals\nwith voices allocations, with setting notes to be played, and\nparameters to be set.

              \n","is_constructor":1,"params":[{"name":"synthVoice","description":"

              A monophonic synth voice inheriting\n the AudioVoice class. Defaults to p5.MonoSynth

              \n","type":"Number","optional":true},{"name":"maxVoices","description":"

              Number of voices, defaults to 8;

              \n","type":"Number","optional":true}],"example":["\n
              \nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n
              "]}},"elements":{},"classitems":[{"file":"src/accessibility/describe.js","line":18,"description":"

              Creates a screen reader-accessible description of the canvas.

              \n

              The first parameter, text, is the description of the canvas.

              \n

              The second parameter, display, is optional. It determines how the\ndescription is displayed. If LABEL is passed, as in\ndescribe('A description.', LABEL), the description will be visible in\na div element next to the canvas. If FALLBACK is passed, as in\ndescribe('A description.', FALLBACK), the description will only be\nvisible to screen readers. This is the default mode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"describe","params":[{"name":"text","description":"

              description of the canvas.

              \n","type":"String"},{"name":"display","description":"

              either LABEL or FALLBACK.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas.\n describe('A pink square with a red heart in the bottom-right corner.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe('A pink square with a red heart in the bottom-right corner.', LABEL);\n}\n\n
              \n\n
              \n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);\n}\n\n
              \n\n
              \n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/describe.js","line":162,"description":"

              Creates a screen reader-accessible description of elements in the canvas.

              \n

              Elements are shapes or groups of shapes that create meaning together. For\nexample, a few overlapping circles could make an \"eye\" element.

              \n

              The first parameter, name, is the name of the element.

              \n

              The second parameter, text, is the description of the element.

              \n

              The third parameter, display, is optional. It determines how the\ndescription is displayed. If LABEL is passed, as in\ndescribe('A description.', LABEL), the description will be visible in\na div element next to the canvas. Using LABEL creates unhelpful\nduplicates for screen readers. Only use LABEL during development. If\nFALLBACK is passed, as in describe('A description.', FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"describeElement","params":[{"name":"name","description":"

              name of the element.

              \n","type":"String"},{"name":"text","description":"

              description of the element.

              \n","type":"String"},{"name":"display","description":"

              either LABEL or FALLBACK.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it.\n describeElement('Circle', 'A yellow circle in the top-left corner.');\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it.\n describeElement('Heart', 'A red heart in the bottom-right corner.');\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it. Display the\n // description for debugging.\n describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it. Display the\n // description for debugging.\n describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":10,"description":"

              Creates a screen reader-accessible description of shapes on the canvas.

              \n

              textOutput() adds a general description, list of shapes, and\ntable of shapes to the web page. The general description includes the\ncanvas size, canvas color, and number of shapes. For example,\nYour output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:.

              \n

              A list of shapes follows the general description. The list describes the\ncolor, location, and area of each shape. For example,\na red circle at middle covering 3% of the canvas. Each shape can be\nselected to get more details.

              \n

              textOutput() uses its table of shapes as a list. The table describes the\nshape, color, location, coordinates and area. For example,\nred circle location = middle area = 3%. This is different from\ngridOutput(), which uses its table as a grid.

              \n

              The display parameter is optional. It determines how the description is\ndisplayed. If LABEL is passed, as in textOutput(LABEL), the description\nwill be visible in a div element next to the canvas. Using LABEL creates\nunhelpful duplicates for screen readers. Only use LABEL during\ndevelopment. If FALLBACK is passed, as in textOutput(FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"textOutput","params":[{"name":"display","description":"

              either FALLBACK or LABEL.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n // Add the text description.\n textOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the text description.\n textOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":144,"description":"

              Creates a screen reader-accessible description of shapes on the canvas.

              \n

              gridOutput() adds a general description, table of shapes, and list of\nshapes to the web page. The general description includes the canvas size,\ncanvas color, and number of shapes. For example,\ngray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square.

              \n

              gridOutput() uses its table of shapes as a grid. Each shape in the grid\nis placed in a cell whose row and column correspond to the shape's location\non the canvas. The grid cells describe the color and type of shape at that\nlocation. For example, red circle. These descriptions can be selected\nindividually to get more details. This is different from\ntextOutput(), which uses its table as a list.

              \n

              A list of shapes follows the table. The list describes the color, type,\nlocation, and area of each shape. For example,\nred circle, location = middle, area = 3 %.

              \n

              The display parameter is optional. It determines how the description is\ndisplayed. If LABEL is passed, as in gridOutput(LABEL), the description\nwill be visible in a div element next to the canvas. Using LABEL creates\nunhelpful duplicates for screen readers. Only use LABEL during\ndevelopment. If FALLBACK is passed, as in gridOutput(FALLBACK), the\ndescription will only be visible to screen readers. This is the default\nmode.

              \n

              Read\nWriting accessible canvas descriptions\nto learn more about making sketches accessible.

              \n","itemtype":"method","name":"gridOutput","params":[{"name":"display","description":"

              either FALLBACK or LABEL.

              \n","type":"Constant","optional":true}],"example":["\n
              \n\nfunction setup() {\n // Add the grid description.\n gridOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the grid description.\n gridOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              \n\n
              \n\nfunction draw() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/color/color_conversion.js","line":8,"description":"

              Conversions adapted from http://www.easyrgb.com/en/math.php.

              \n

              In these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":18,"description":"

              Convert an HSBA array to HSLA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":44,"description":"

              Convert an HSBA array to RGBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":99,"description":"

              Convert an HSLA array to HSBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":122,"description":"

              Convert an HSLA array to RGBA.

              \n

              We need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":186,"description":"

              Convert an RGBA array to HSBA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":225,"description":"

              Convert an RGBA array to HSLA.

              \n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"

              Gets the alpha (transparency) value of a color.

              \n

              alpha() extracts the alpha value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(0, 126, 255, 102);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [0, 126, 255, 102];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the left rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgba(0, 126, 255, 0.4)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":117,"description":"

              Gets the blue value of a color.

              \n

              blue() extracts the blue value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, blue() returns a color's blue value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the blue value in the given range.

              \n","itemtype":"method","name":"blue","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 86.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":253,"description":"

              Gets the brightness value of a color.

              \n

              brightness() extracts the HSB brightness value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, brightness() returns a color's HSB brightness in the range 0\nto 100. If the colorMode() is set to HSB, it\nreturns the brightness value in the given range.

              \n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color with values in the range 0-255.\n colorMode(HSB, 255);\n\n // Create a p5.Color object.\n let c = color(0, 127, 255);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 255.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":398,"description":"

              Creates a p5.Color object.

              \n

              By default, the parameters are interpreted as RGB values. Calling\ncolor(255, 204, 0) will return a bright yellow color. The way these\nparameters are interpreted may be changed with the\ncolorMode() function.

              \n

              The version of color() with one parameter interprets the value one of two\nways. If the parameter is a number, it's interpreted as a grayscale value.\nIf the parameter is a string, it's interpreted as a CSS color string.

              \n

              The version of color() with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.

              \n

              The version of color() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current colorMode().

              \n

              The version of color() with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current colorMode(). The last parameter\nsets the alpha (transparency) value.

              \n","itemtype":"method","name":"color","return":{"description":"resulting color.","type":"p5.Color"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(255, 204, 0);\n\n // Draw the square.\n fill(c);\n noStroke();\n square(30, 20, 55);\n\n describe('A yellow square on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(255, 204, 0);\n\n // Draw the left circle.\n fill(c1);\n noStroke();\n circle(25, 25, 80);\n\n // Create a p5.Color object using a grayscale value.\n let c2 = color(65);\n\n // Draw the right circle.\n fill(c2);\n circle(75, 75, 80);\n\n describe(\n 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a named color.\n let c = color('magenta');\n\n // Draw the square.\n fill(c);\n noStroke();\n square(20, 20, 60);\n\n describe('A magenta square on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a hex color code.\n let c1 = color('#0f0');\n\n // Draw the left rectangle.\n fill(c1);\n noStroke();\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a hex color code.\n let c2 = color('#00ff00');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two bright green rectangles on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a RGB color string.\n let c1 = color('rgb(0, 0, 255)');\n\n // Draw the top-left square.\n fill(c1);\n square(10, 10, 35);\n\n // Create a p5.Color object using a RGB color string.\n let c2 = color('rgb(0%, 0%, 100%)');\n\n // Draw the top-right square.\n fill(c2);\n square(55, 10, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c3 = color('rgba(0, 0, 255, 1)');\n\n // Draw the bottom-left square.\n fill(c3);\n square(10, 55, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c4 = color('rgba(0%, 0%, 100%, 1)');\n\n // Draw the bottom-right square.\n fill(c4);\n square(55, 55, 35);\n\n describe('Four blue squares in the corners of a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSL color string.\n let c1 = color('hsl(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSLA color string.\n let c2 = color('hsla(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSB color string.\n let c1 = color('hsb(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSBA color string.\n let c2 = color('hsba(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(50, 55, 100);\n\n // Draw the left rectangle.\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Switch the color mode to HSB.\n colorMode(HSB, 100);\n\n // Create a p5.Color object using HSB values.\n let c2 = color(50, 55, 100);\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":398,"params":[{"name":"gray","description":"

              number specifying value between white and black.

              \n","type":"Number"},{"name":"alpha","description":"

              alpha value relative to current color range\n (default is 0-255).

              \n","type":"Number","optional":true}],"return":{"description":"resulting color.","type":"p5.Color"}},{"line":652,"params":[{"name":"v1","description":"

              red or hue value relative to\n the current color range.

              \n","type":"Number"},{"name":"v2","description":"

              green or saturation value\n relative to the current color range.

              \n","type":"Number"},{"name":"v3","description":"

              blue or brightness value\n relative to the current color range.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":664,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":670,"params":[{"name":"values","description":"

              an array containing the red, green, blue,\n and alpha components of the color.

              \n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":677,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":692,"description":"

              Gets the green value of a color.

              \n

              green() extracts the green value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, green() returns a color's green value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the green value in the given range.

              \n","itemtype":"method","name":"green","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 39.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":828,"description":"

              Gets the hue value of a color.

              \n

              hue() extracts the hue value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              Hue describes a color's position on the color wheel. By default, hue()\nreturns a color's HSL hue in the range 0 to 360. If the\ncolorMode() is set to HSB or HSL, it returns the hue\nvalue in the given mode.

              \n","itemtype":"method","name":"hue","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":949,"description":"

              Blends two colors to find a third color between them.

              \n

              The amt parameter specifies the amount to interpolate between the two\nvalues. 0 is equal to the first color, 0.1 is very near the first color,\n0.5 is halfway between the two colors, and so on. Negative numbers are set\nto 0. Numbers greater than 1 are set to 1. This differs from the behavior of\nlerp. It's necessary because numbers outside of the\ninterval [0, 1] will produce strange and unexpected colors.

              \n

              The way that colors are interpolated depends on the current\ncolorMode().

              \n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"

              interpolate from this color.

              \n","type":"p5.Color"},{"name":"c2","description":"

              interpolate to this color.

              \n","type":"p5.Color"},{"name":"amt","description":"

              number between 0 and 1.

              \n","type":"Number"}],"return":{"description":"interpolated color.","type":"p5.Color"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Color objects to interpolate between.\n let from = color(218, 165, 32);\n let to = color(72, 61, 139);\n\n // Create intermediate colors.\n let interA = lerpColor(from, to, 0.33);\n let interB = lerpColor(from, to, 0.66);\n\n // Draw the left rectangle.\n noStroke();\n fill(from);\n rect(10, 20, 20, 60);\n\n // Draw the left-center rectangle.\n fill(interA);\n rect(30, 20, 20, 60);\n\n // Draw the right-center rectangle.\n fill(interB);\n rect(50, 20, 20, 60);\n\n // Draw the right rectangle.\n fill(to);\n rect(70, 20, 20, 60);\n\n describe(\n 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'\n );\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1071,"description":"

              Gets the lightness value of a color.

              \n

              lightness() extracts the HSL lightness value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, lightness() returns a color's HSL lightness in the range 0\nto 100. If the colorMode() is set to HSL, it\nreturns the lightness value in the given range.

              \n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 100, 75];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 191.5.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1216,"description":"

              Gets the red value of a color.

              \n

              red() extracts the red value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              By default, red() returns a color's red value in the range 0\nto 255. If the colorMode() is set to RGB, it\nreturns the red value in the given range.

              \n","itemtype":"method","name":"red","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 69.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":1352,"description":"

              Gets the saturation value of a color.

              \n

              saturation() extracts the saturation value from a\np5.Color object, an array of color components, or\na CSS color string.

              \n

              Saturation is scaled differently in HSB and HSL. By default, saturation()\nreturns a color's HSL saturation in the range 0 to 100. If the\ncolorMode() is set to HSB or HSL, it returns the\nsaturation value in the given mode.

              \n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"

              p5.Color object, array of\n color components, or CSS color string.

              \n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 50.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 255.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":14,"description":"

              CSS named colors.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":168,"description":"

              These regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.

              \n

              Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":181,"description":"

              Full color string patterns. The capture groups are necessary.

              \n","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":362,"description":"

              Returns the color formatted as a String.

              \n

              Calling myColor.toString() can be useful for debugging, as in\nprint(myColor.toString()). It's also helpful for using p5.js with other\nlibraries.

              \n

              The parameter, format, is optional. If a format string is passed, as in\nmyColor.toString('#rrggbb'), it will determine how the color string is\nformatted. By default, color strings are formatted as 'rgba(r, g, b, a)'.

              \n","itemtype":"method","name":"toString","params":[{"name":"format","description":"

              how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.

              \n","type":"String","optional":true}],"return":{"description":"the formatted string.\n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n\n
              ","type":"String"},"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":571,"description":"

              Sets the red component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"

              the new red value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":613,"description":"

              Sets the green component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"

              the new green value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":655,"description":"

              Sets the blue component of a color.

              \n

              The range depends on the colorMode(). In the\ndefault RGB mode it's between 0 and 255.

              \n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"

              the new blue value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":697,"description":"

              Sets the alpha (transparency) value of a color.

              \n

              The range depends on the\ncolorMode(). In the default RGB mode it's\nbetween 0 and 255.

              \n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"

              the new alpha value.

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n\n
              "],"class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":789,"description":"

              Hue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":820,"description":"

              Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":1048,"description":"

              For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.

              \n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"

              Starts defining a shape that will mask any shapes drawn afterward.

              \n

              Any shapes drawn between beginClip() and\nendClip() will add to the mask shape. The mask\nwill apply to anything drawn after endClip().

              \n

              The parameter, options, is optional. If an object with an invert\nproperty is passed, as in beginClip({ invert: true }), it will be used to\nset the masking mode. { invert: true } inverts the mask, creating holes\nin shapes that are masked. invert is false by default.

              \n

              Masks can be contained between the\npush() and pop() functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.

              \n

              Masks can also be defined in a callback function that's passed to\nclip().

              \n","itemtype":"method","name":"beginClip","params":[{"name":"options","description":"

              an object containing clip settings.

              \n","type":"Object","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":190,"description":"

              Ends defining a mask that was started with\nbeginClip().

              \n","itemtype":"method","name":"endClip","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":222,"description":"

              Defines a shape that will mask any shapes drawn afterward.

              \n

              The first parameter, callback, is a function that defines the mask.\nAny shapes drawn in callback will add to the mask shape. The mask\nwill apply to anything drawn after clip() is called.

              \n

              The second parameter, options, is optional. If an object with an invert\nproperty is passed, as in beginClip({ invert: true }), it will be used to\nset the masking mode. { invert: true } inverts the mask, creating holes\nin shapes that are masked. invert is false by default.

              \n

              Masks can be contained between the\npush() and pop() functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.

              \n

              Masks can also be defined with beginClip()\nand endClip().

              \n","itemtype":"method","name":"clip","params":[{"name":"callback","description":"

              a function that draws the mask shape.

              \n","type":"Function"},{"name":"options","description":"

              an object containing clip settings.

              \n","type":"Object","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":414,"description":"

              Sets the color used for the background of the canvas.

              \n

              By default, the background is transparent. background() is typically used\nwithin draw() to clear the display window at the\nbeginning of each frame. It can also be used inside\nsetup() to set the background on the first frame\nof animation.

              \n

              The version of background() with one parameter interprets the value one\nof four ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color string.\nRGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the\nparameter is a p5.Color object, it will be used as\nthe background color. If the parameter is a\np5.Image object, it will be used as the background\nimage.

              \n

              The version of background() with two parameters interprets the first one\nas a grayscale value. The second parameter sets the alpha (transparency)\nvalue.

              \n

              The version of background() with three parameters interprets them as RGB,\nHSB, or HSL colors, depending on the current\ncolorMode(). By default, colors are specified\nin RGB values. Calling background(255, 204, 0) sets the background a bright\nyellow color.

              \n","itemtype":"method","name":"background","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value.\n background(51);\n\n describe('A canvas with a dark charcoal gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value and an alpha value.\n background(51, 0.4);\n describe('A canvas with a transparent gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // R, G & B values.\n background(255, 204, 0);\n\n describe('A canvas with a yellow background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n background(255, 204, 100);\n\n describe('A canvas with a royal blue background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A CSS named color.\n background('red');\n\n describe('A canvas with a red background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Three-digit hex RGB notation.\n background('#fae');\n\n describe('A canvas with a pink background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Six-digit hex RGB notation.\n background('#222222');\n\n describe('A canvas with a black background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGB notation.\n background('rgb(0, 255, 0)');\n\n describe('A canvas with a bright green background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGBA notation.\n background('rgba(0, 255, 0, 0.25)');\n\n describe('A canvas with a transparent green background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGB notation.\n background('rgb(100%, 0%, 10%)');\n\n describe('A canvas with a red background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGBA notation.\n background('rgba(100%, 0%, 100%, 0.5)');\n\n describe('A canvas with a transparent purple background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n background(c);\n\n describe('A canvas with a blue background.');\n}\n\n
              \n"],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":414,"params":[{"name":"color","description":"

              any value created by the color() function

              \n","type":"p5.Color"}],"chainable":1},{"line":608,"params":[{"name":"colorstring","description":"

              color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex.

              \n","type":"String"},{"name":"a","description":"

              opacity of the background relative to current\n color range (default is 0-255).

              \n","type":"Number","optional":true}],"chainable":1},{"line":618,"params":[{"name":"gray","description":"

              specifies a value between white and black.

              \n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":625,"params":[{"name":"v1","description":"

              red value if color mode is RGB, or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB, or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB, or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":634,"params":[{"name":"values","description":"

              an array containing the red, green, blue\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":641,"params":[{"name":"image","description":"

              image created with loadImage()\n or createImage(),\n to set as background.\n (must be same size as the sketch window).

              \n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":655,"description":"

              Clears the pixels on the canvas.

              \n

              clear() makes every pixel 100% transparent. Calling clear() doesn't\nclear objects created by createX() functions such as\ncreateGraphics(),\ncreateVideo(), and\ncreateImg(). These objects will remain\nunchanged after calling clear() and can be redrawn.

              \n

              In WebGL mode, this function can clear the screen to a specific color. It\ninterprets four numeric parameters as normalized RGBA color values. It also\nclears the depth buffer. If you are not using the WebGL renderer, these\nparameters will have no effect.

              \n","itemtype":"method","name":"clear","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');\n}\n\nfunction draw() {\n circle(mouseX, mouseY, 20);\n}\n\nfunction mousePressed() {\n clear();\n background(200);\n}\n\n
              \n\n
              \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n pg = createGraphics(60, 60);\n pg.background(200);\n pg.noStroke();\n pg.circle(pg.width / 2, pg.height / 2, 15);\n image(pg, 20, 20);\n\n describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n clear();\n image(pg, 20, 20);\n}\n\n
              "],"params":[{"name":"r","description":"

              normalized red value.

              \n","type":"Number","optional":true},{"name":"g","description":"

              normalized green value.

              \n","type":"Number","optional":true},{"name":"b","description":"

              normalized blue value.

              \n","type":"Number","optional":true},{"name":"a","description":"

              normalized alpha value.

              \n","type":"Number","optional":true}],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":733,"description":"

              Changes the way color values are interpreted.

              \n

              By default, the Number parameters for fill(),\nstroke(),\nbackground(), and\ncolor() are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to calling\ncolorMode(RGB, 255). Pure red is color(255, 0, 0) in this model.

              \n

              Calling colorMode(RGB, 100) sets colors to use RGB color values\nbetween 0 and 100. Pure red is color(100, 0, 0) in this model.

              \n

              Calling colorMode(HSB) or colorMode(HSL) changes to HSB or HSL system\ninstead of RGB. Pure red is color(0, 100, 100) in HSB and\ncolor(0, 100, 50) in HSL.

              \n

              p5.Color objects remember the mode that they were\ncreated in. Changing modes doesn't affect their appearance.

              \n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Fill with pure red.\n fill(255, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Fill with pure red.\n fill(100, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Fill with pure red.\n fill(0, 100, 100);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Fill with pure red.\n fill(0, 100, 50);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 0);\n point(x, y);\n }\n }\n\n describe(\n 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color with values in the range 0-100.\n colorMode(HSB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 100);\n point(x, y);\n }\n }\n\n describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let myColor = color(180, 175, 230);\n background(myColor);\n\n // Use RGB color with values in the range 0-1.\n colorMode(RGB, 1);\n\n // Get the red, green, and blue color components.\n let redValue = red(myColor);\n let greenValue = green(myColor);\n let blueValue = blue(myColor);\n\n // Round the color components for display.\n redValue = round(redValue, 2);\n greenValue = round(greenValue, 2);\n blueValue = round(blueValue, 2);\n\n // Display the color components.\n text(`Red: ${redValue}`, 10, 10, 80, 80);\n text(`Green: ${greenValue}`, 10, 40, 80, 80);\n text(`Blue: ${blueValue}`, 10, 70, 80, 80);\n\n describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Use RGB color with alpha values in the range 0-1.\n colorMode(RGB, 255, 255, 255, 1);\n\n noFill();\n strokeWeight(4);\n stroke(255, 0, 10, 0.3);\n circle(40, 40, 50);\n circle(50, 60, 50);\n\n describe('Two overlapping translucent pink circle outlines.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":733,"params":[{"name":"mode","description":"

              either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness).

              \n","type":"Constant"},{"name":"max","description":"

              range for all values.

              \n","type":"Number","optional":true}],"chainable":1},{"line":938,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"

              range for the red or hue depending on the\n current color mode.

              \n","type":"Number"},{"name":"max2","description":"

              range for the green or saturation depending\n on the current color mode.

              \n","type":"Number"},{"name":"max3","description":"

              range for the blue or brightness/lightness\n depending on the current color mode.

              \n","type":"Number"},{"name":"maxA","description":"

              range for the alpha.

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":982,"description":"

              Sets the color used to fill shapes.

              \n

              Calling fill(255, 165, 0) or fill('orange') means all shapes drawn\nafter the fill command will be filled with the color orange.

              \n

              The version of fill() with one parameter interprets the value one of\nthree ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color\nstring. A p5.Color object can also be provided to\nset the fill color.

              \n

              The version of fill() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current\ncolorMode(). The default color space is RGB,\nwith each value in the range from 0 to 255.

              \n","itemtype":"method","name":"fill","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n fill(51);\n square(20, 20, 60);\n\n describe('A dark charcoal gray square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n fill(255, 204, 0);\n square(20, 20, 60);\n\n describe('A yellow square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n fill(255, 204, 100);\n square(20, 20, 60);\n\n describe('A royal blue square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n fill('red');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n fill('#fae');\n square(20, 20, 60);\n\n describe('A pink square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n fill('#A251FA');\n square(20, 20, 60);\n\n describe('A purple square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n fill('rgb(0, 255, 0)');\n square(20, 20, 60);\n\n describe('A bright green square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n fill('rgba(0, 255, 0, 0.25)');\n square(20, 20, 60);\n\n describe('A soft green rectange with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n fill('rgb(100%, 0%, 10%)');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n fill('rgba(100%, 0%, 100%, 0.5)');\n square(20, 20, 60);\n\n describe('A dark fuchsia square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n fill(c);\n square(20, 20, 60);\n\n describe('A blue square with a black outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":982,"params":[{"name":"v1","description":"

              red value if color mode is RGB or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1187,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"chainable":1},{"line":1193,"params":[{"name":"gray","description":"

              a grayscale value.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1200,"params":[{"name":"values","description":"

              an array containing the red, green, blue &\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":1207,"params":[{"name":"color","description":"

              the fill color.

              \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":1219,"description":"

              Disables setting the fill color for shapes.

              \n

              Calling noFill() is the same as making the fill completely transparent,\nas in fill(0, 0). If both noStroke() and\nnoFill() are called, nothing will be drawn to the screen.

              \n","itemtype":"method","name":"noFill","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the top square.\n square(32, 10, 35);\n\n // Draw the bottom square.\n noFill();\n square(32, 55, 35);\n\n describe('A white square on above an empty square. Both squares have black outlines.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube wireframe spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noFill();\n stroke(100, 100, 240);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1279,"description":"

              Disables drawing points, lines, and the outlines of shapes.

              \n

              Calling noStroke() is the same as making the stroke completely transparent,\nas in stroke(0, 0). If both noStroke() and\nnoFill() are called, nothing will be drawn to the\nscreen.

              \n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n square(20, 20, 60);\n\n describe('A white square with no outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A pink cube with no edge outlines spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noStroke();\n fill(240, 150, 150);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1335,"description":"

              Sets the color used to draw points, lines, and the outlines of shapes.

              \n

              Calling stroke(255, 165, 0) or stroke('orange') means all shapes drawn\nafter calling stroke() will be filled with the color orange. The way\nthese parameters are interpreted may be changed with the\ncolorMode() function.

              \n

              The version of stroke() with one parameter interprets the value one of\nthree ways. If the parameter is a Number, it's interpreted as a grayscale\nvalue. If the parameter is a String, it's interpreted as a CSS color\nstring. A p5.Color object can also be provided to\nset the stroke color.

              \n

              The version of stroke() with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.

              \n

              The version of stroke() with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current colorMode().

              \n

              The version of stroke() with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current colorMode(). The last parameter\nsets the alpha (transparency) value.

              \n","itemtype":"method","name":"stroke","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n strokeWeight(4);\n stroke(51);\n square(20, 20, 60);\n\n describe('A white square with a dark charcoal gray outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n stroke(255, 204, 0);\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a yellow outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n strokeWeight(4);\n stroke(255, 204, 100);\n square(20, 20, 60);\n\n describe('A white square with a royal blue outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n stroke('red');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n stroke('#fae');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a pink outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n stroke('#222222');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a black outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n stroke('rgb(0, 255, 0)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A whiite square with a bright green outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n stroke('rgba(0, 255, 0, 0.25)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a soft green outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n stroke('rgb(100%, 0%, 10%)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n stroke('rgba(100%, 0%, 100%, 0.5)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a dark fuchsia outline.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n stroke(color(0, 0, 255));\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a blue outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":1335,"params":[{"name":"v1","description":"

              red value if color mode is RGB or hue value if color mode is HSB.

              \n","type":"Number"},{"name":"v2","description":"

              green value if color mode is RGB or saturation value if color mode is HSB.

              \n","type":"Number"},{"name":"v3","description":"

              blue value if color mode is RGB or brightness value if color mode is HSB.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1558,"params":[{"name":"value","description":"

              a color string.

              \n","type":"String"}],"chainable":1},{"line":1564,"params":[{"name":"gray","description":"

              a grayscale value.

              \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":1571,"params":[{"name":"values","description":"

              an array containing the red, green, blue,\n and alpha components of the color.

              \n","type":"Number[]"}],"chainable":1},{"line":1578,"params":[{"name":"color","description":"

              the stroke color.

              \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":1591,"description":"

              Starts using shapes to erase parts of the canvas.

              \n

              All drawing that follows erase() will subtract from the canvas, revealing\nthe web page underneath. The erased areas will become transparent, allowing\nthe content behind the canvas to show through. The\nfill(), stroke(), and\nblendMode() have no effect once erase() is\ncalled.

              \n

              The erase() function has two optional parameters. The first parameter\nsets the strength of erasing by the shape's interior. A value of 0 means\nthat no erasing will occur. A value of 255 means that the shape's interior\nwill fully erase the content underneath. The default value is 255\n(full strength).

              \n

              The second parameter sets the strength of erasing by the shape's edge. A\nvalue of 0 means that no erasing will occur. A value of 255 means that the\nshape's edge will fully erase the content underneath. The default value is\n255 (full strength).

              \n

              To cancel the erasing effect, use the noErase()\nfunction.

              \n

              erase() has no effect on drawing done with the\nimage() and\nbackground() functions.

              \n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"

              a number (0-255) for the strength of erasing under a shape's interior.\n Defaults to 255, which is full strength.

              \n","type":"Number","optional":true},{"name":"strengthStroke","description":"

              a number (0-255) for the strength of erasing under a shape's edge.\n Defaults to 255, which is full strength.

              \n","type":"Number","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n erase();\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n strokeWeight(5);\n erase(150, 255);\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":1678,"description":"

              Ends erasing that was started with erase().

              \n

              The fill(), stroke(), and\nblendMode() settings will return to what they\nwere prior to calling erase().

              \n","itemtype":"method","name":"noErase","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(235, 145, 15);\n\n // Draw the left rectangle.\n noStroke();\n fill(30, 45, 220);\n rect(30, 10, 10, 80);\n\n // Erase a circle.\n erase();\n circle(50, 50, 60);\n noErase();\n\n // Draw the right rectangle.\n rect(70, 10, 10, 80);\n\n describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');\n}\n\n
              "],"class":"p5","module":"Color","submodule":"Setting"},{"file":"src/core/friendly_errors/fes_core.js","line":1,"requires":["core\n\nThis is the main file for the Friendly Error System (FES)","containing\nthe core as well as miscellaneous functionality of the FES. Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either\n(1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","(4) helpForMisusedAtTopLevelCode","or (5) _fesErrorMonitor.\n\n_validateParameters is located in validate_params.js along with other code\nused for parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code\nused for dealing with file load errors.\nApart from this","there's also a file stacktrace.js","which contains the code\nto parse the error stack","borrowed from:\nhttps://github.com/stacktracejs/stacktrace.js\n\nFor more detailed information on the FES functions","including the call\nsequence of each function","please look at the FES Reference + Dev Notes:\nhttps://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":932,"description":"

              Prints out all the colors in the color pallete with white text.\nFor color blindness testing.

              \n","class":"p5","module":"Color"},{"file":"src/core/friendly_errors/file_errors.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/sketch_reader.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/stacktrace.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"

              This function does 3 things:

              \n
                \n

              1. Bounds the desired start/stop angles for an arc (in radians) so that:

                \n
                0 <= start < TWO_PI ;    start <= stop < start + TWO_PI\n
                \n

                This means that the arc rendering functions don't have to be concerned\nwith what happens if stop is smaller than start, or if the arc 'goes\nround more than once', etc.: they can just start at start and increase\nuntil stop and the correct arc will be drawn.

                \n
                2. \n

              2. Optionally adjusts the angles within each quadrant to counter the naive\nscaling of the underlying ellipse up from the unit circle. Without\nthis, the angles become arbitrary when width != height: 45 degrees\nmight be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\na 'tall' ellipse.

                \n
                3. \n

              3. Flags up when start and stop correspond to the same place on the\nunderlying ellipse. This is useful if you want to do something special\nthere (like rendering a whole ellipse instead).

                \n
                4. \n
              \n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"

              Draws an arc.

              \n

              An arc is a section of an ellipse defined by the x, y, w, and\nh parameters. x and y set the location of the arc's center. w and\nh set the arc's width and height. See\nellipse() and\nellipseMode() for more details.

              \n

              The fifth and sixth parameters, start and stop, set the angles\nbetween which to draw the arc. Arcs are always drawn clockwise from\nstart to stop. Angles are always given in radians.

              \n

              The seventh parameter, mode, is optional. It determines the arc's fill\nstyle. The fill modes are a semi-circle (OPEN), a closed semi-circle\n(CHORD), or a closed pie segment (PIE).

              \n

              The eighth parameter, detail, is also optional. It determines how many\nvertices are used to draw the arc in WebGL mode. The default value is 25.

              \n","itemtype":"method","name":"arc","params":[{"name":"x","description":"

              x-coordinate of the arc's ellipse.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the arc's ellipse.

              \n","type":"Number"},{"name":"w","description":"

              width of the arc's ellipse by default.

              \n","type":"Number"},{"name":"h","description":"

              height of the arc's ellipse by default.

              \n","type":"Number"},{"name":"start","description":"

              angle to start the arc, specified in radians.

              \n","type":"Number"},{"name":"stop","description":"

              angle to stop the arc, specified in radians.

              \n","type":"Number"},{"name":"mode","description":"

              optional parameter to determine the way of drawing\n the arc. either CHORD, PIE, or OPEN.

              \n","type":"Constant","optional":true},{"name":"detail","description":"

              optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25. Won't\n draw a stroke for a detail of more than 50.

              \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 80, 0, PI + HALF_PI);\n\n describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 40, 0, PI + HALF_PI);\n\n describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Bottom-right.\n arc(50, 55, 50, 50, 0, HALF_PI);\n\n noFill();\n\n // Bottom-left.\n arc(50, 55, 60, 60, HALF_PI, PI);\n\n // Top-left.\n arc(50, 55, 70, 70, PI, PI + QUARTER_PI);\n\n // Top-right.\n arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n describe(\n 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Default fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n describe('A white circle with the top-right third missing. The bottom is outlined in black.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // OPEN fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n describe(\n 'A white circle missing a section from the top-right. The bottom is outlined in black.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // CHORD fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n describe('A white circle with a black outline missing a section from the top-right.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // PIE fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode with 5 vertices.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A yellow circle on a black background. The circle opens and closes its mouth.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the arc.\n noStroke();\n fill(255, 255, 0);\n\n // Update start and stop angles.\n let biteSize = PI / 16;\n let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;\n let endAngle = TWO_PI - startAngle;\n\n // Draw the arc.\n arc(50, 50, 80, 80, startAngle, endAngle, PIE);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":373,"description":"

              Draws an ellipse (oval).

              \n

              An ellipse is a round shape defined by the x, y, w, and\nh parameters. x and y set the location of its center. w and\nh set its width and height. See\nellipseMode() for other ways to set\nits position.

              \n

              If no height is set, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is\ntaken.

              \n

              The fifth parameter, detail, is also optional. It determines how many\nvertices are used to draw the ellipse in WebGL mode. The default value is\n25.

              \n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 80);\n\n describe('A white circle on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80);\n\n describe('A white circle on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n ellipse(0, 0, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Use 6 vertices.\n ellipse(0, 0, 80, 40, 6);\n\n describe('A white hexagon on a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":373,"params":[{"name":"x","description":"

              x-coordinate of the center of the ellipse.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the center of the ellipse.

              \n","type":"Number"},{"name":"w","description":"

              width of the ellipse.

              \n","type":"Number"},{"name":"h","description":"

              height of the ellipse.

              \n","type":"Number","optional":true}],"chainable":1},{"line":474,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"

              optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the ellipse. Default value is 25. Won't\n draw a stroke for a detail of more than 50.

              \n","type":"Integer","optional":true}]}]},{"file":"src/core/shape/2d_primitives.js","line":490,"description":"

              Draws a circle.

              \n

              A circle is a round shape defined by the x, y, and d\nparameters. x and y set the location of its center. d sets its\nwidth and height (diameter). Every point on the circle's edge is the\nsame distance, d, from its center. See\nellipseMode() for other ways to set\nits position.

              \n","itemtype":"method","name":"circle","params":[{"name":"x","description":"

              x-coordinate of the center of the circle.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the center of the circle.

              \n","type":"Number"},{"name":"d","description":"

              diameter of the circle.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n circle(50, 50, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":574,"description":"

              Draws a straight line between two points.

              \n

              A line's default width is one pixel. The version of line() with four\nparameters draws the line in 2D. To color a line, use the\nstroke() function. To change its width, use the\nstrokeWeight() function. A line\ncan't be filled, so the fill() function won't\naffect the line's color.

              \n

              The version of line() with six parameters allows the line to be drawn in\n3D space. Doing so requires adding the WEBGL argument to\ncreateCanvas().

              \n","itemtype":"method","name":"line","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n stroke('magenta');\n strokeWeight(5);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(30, 20, 85, 20);\n\n // Right.\n stroke(126);\n line(85, 20, 85, 75);\n\n // Bottom.\n stroke(255);\n line(85, 75, 30, 75);\n\n describe(\n 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'\n );\n}\n\n
              ","\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n line(-20, -30, 35, 25);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black line connecting two spheres. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw a line.\n line(0, 0, 0, 30, 20, -10);\n\n // Draw the center sphere.\n sphere(10);\n\n // Translate to the second point.\n translate(30, 20, -10);\n\n // Draw the bottom-right sphere.\n sphere(10);\n}\n\n
              \n"],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":574,"params":[{"name":"x1","description":"

              the x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              the y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              the x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              the y-coordinate of the second point.

              \n","type":"Number"}],"chainable":1},{"line":706,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              the z-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              the z-coordinate of the second point.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":731,"description":"

              Draws a single point in space.

              \n

              A point's default width is one pixel. To color a point, use the\nstroke() function. To change its width, use the\nstrokeWeight() function. A point\ncan't be filled, so the fill() function won't\naffect the point's color.

              \n

              The version of point() with one parameter allows the point's location to\nbe set with its x- and y-coordinates, as in point(10, 20).

              \n

              The version of point() with three parameters allows the point to be drawn\nin 3D space with x-, y-, and z-coordinates, as in point(10, 20, 30).\nDoing so requires adding the WEBGL argument to\ncreateCanvas().

              \n

              The version of point() with one parameter allows the point's location to\nbe set with a p5.Vector object.

              \n","itemtype":"method","name":"point","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(85, 20);\n\n // Bottom-right.\n point(85, 75);\n\n // Bottom-left.\n point(30, 75);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(70, 20);\n\n // Style the next points.\n stroke('purple');\n strokeWeight(10);\n\n // Bottom-right.\n point(70, 80);\n\n // Bottom-left.\n point(30, 80);\n\n describe(\n 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let a = createVector(30, 20);\n point(a);\n\n // Top-right.\n let b = createVector(70, 20);\n point(b);\n\n // Bottom-right.\n let c = createVector(70, 80);\n point(c);\n\n // Bottom-left.\n let d = createVector(30, 80);\n point(d);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30);\n\n // Bottom-right.\n point(20, 30);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30, 0);\n\n // Bottom-right.\n point(20, 30, -50);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":731,"params":[{"name":"x","description":"

              the x-coordinate.

              \n","type":"Number"},{"name":"y","description":"

              the y-coordinate.

              \n","type":"Number"},{"name":"z","description":"

              the z-coordinate (for WebGL mode).

              \n","type":"Number","optional":true}],"chainable":1},{"line":895,"params":[{"name":"coordinateVector","description":"

              the coordinate vector.

              \n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":923,"description":"

              Draws a quadrilateral (four-sided shape).

              \n

              Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The\nfirst pair of parameters (x1, y1) sets the quad's first point. The next\nthree pairs of parameters set the coordinates for its next three points\n(x2, y2), (x3, y3), and (x4, y4). Points should be added in either\nclockwise or counter-clockwise order.

              \n

              The version of quad() with twelve parameters allows the quad to be drawn\nin 3D space. Doing so requires adding the WEBGL argument to\ncreateCanvas().

              \n

              The thirteenth and fourteenth parameters are optional. In WebGL mode, they\nset the number of segments used to draw the quadrilateral in the x- and\ny-directions. They're both 25 by default.

              \n","itemtype":"method","name":"quad","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 20, 80, 20, 80, 80, 20, 80);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 30, 80, 30, 80, 70, 20, 70);\n\n describe('A white rectangle with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(50, 62, 86, 50, 50, 38, 14, 50);\n\n describe('A white rhombus with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 50, 80, 30, 80, 70, 20, 70);\n\n describe('A white trapezoid with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n quad(-30, -30, 30, -30, 30, 30, -30, 30);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A wavy white surface spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the quad.\n quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":923,"params":[{"name":"x1","description":"

              the x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              the y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              the x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              the y-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"

              the x-coordinate of the third point.

              \n","type":"Number"},{"name":"y3","description":"

              the y-coordinate of the third point.

              \n","type":"Number"},{"name":"x4","description":"

              the x-coordinate of the fourth point.

              \n","type":"Number"},{"name":"y4","description":"

              the y-coordinate of the fourth point.

              \n","type":"Number"},{"name":"detailX","description":"

              number of segments in the x-direction.

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of segments in the y-direction.

              \n","type":"Integer","optional":true}],"chainable":1},{"line":1043,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              the z-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              the z-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              the z-coordinate of the third point.

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              the z-coordinate of the fourth point.

              \n","type":"Number"},{"name":"detailX","description":"","type":"Integer","optional":true},{"name":"detailY","description":"","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":1086,"description":"

              Draws a rectangle.

              \n

              A rectangle is a four-sided shape defined by the x, y, w, and h\nparameters. x and y set the location of its top-left corner. w sets\nits width and h sets its height. Every angle in the rectangle measures\n90˚. See rectMode() for other ways to define\nrectangles.

              \n

              The version of rect() with five parameters creates a rounded rectangle. The\nfifth parameter sets the radius for all four corners.

              \n

              The version of rect() with eight parameters also creates a rounded\nrectangle. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nrectangle. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.

              \n","itemtype":"method","name":"rect","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 40);\n\n describe('A white rectangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n rect(30, 20, 55, 50, 20);\n\n describe('A white rectangle with a black outline and round edges on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n rect(30, 20, 55, 50, 20, 15, 10, 5);\n\n describe('A white rectangle with a black outline and round edges of different radii.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n rect(-20, -30, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the rectangle.\n rect(-20, -30, 55, 55);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":1086,"params":[{"name":"x","description":"

              x-coordinate of the rectangle.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the rectangle.

              \n","type":"Number"},{"name":"w","description":"

              width of the rectangle.

              \n","type":"Number"},{"name":"h","description":"

              height of the rectangle.

              \n","type":"Number","optional":true},{"name":"tl","description":"

              optional radius of top-left corner.

              \n","type":"Number","optional":true},{"name":"tr","description":"

              optional radius of top-right corner.

              \n","type":"Number","optional":true},{"name":"br","description":"

              optional radius of bottom-right corner.

              \n","type":"Number","optional":true},{"name":"bl","description":"

              optional radius of bottom-left corner.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1209,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"

              number of segments in the x-direction (for WebGL mode).

              \n","type":"Integer","optional":true},{"name":"detailY","description":"

              number of segments in the y-direction (for WebGL mode).

              \n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":1224,"description":"

              Draws a square.

              \n

              A square is a four-sided shape defined by the x, y, and s\nparameters. x and y set the location of its top-left corner. s sets\nits width and height. Every angle in the square measures 90˚ and all its\nsides are the same length. See rectMode() for\nother ways to define squares.

              \n

              The version of square() with four parameters creates a rounded square.\nThe fourth parameter sets the radius for all four corners.

              \n

              The version of square() with seven parameters also creates a rounded\nsquare. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nsquare. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.

              \n","itemtype":"method","name":"square","params":[{"name":"x","description":"

              x-coordinate of the square.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the square.

              \n","type":"Number"},{"name":"s","description":"

              side size of the square.

              \n","type":"Number"},{"name":"tl","description":"

              optional radius of top-left corner.

              \n","type":"Number","optional":true},{"name":"tr","description":"

              optional radius of top-right corner.

              \n","type":"Number","optional":true},{"name":"br","description":"

              optional radius of bottom-right corner.

              \n","type":"Number","optional":true},{"name":"bl","description":"

              optional radius of bottom-left corner.

              \n","type":"Number","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n square(30, 20, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n square(30, 20, 55, 20);\n\n describe(\n 'A white square with a black outline and round edges on a gray canvas.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n square(30, 20, 55, 20, 15, 10, 5);\n\n describe('A white square with a black outline and round edges of different radii.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n square(-20, -30, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the square.\n square(-20, -30, 55);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":1371,"description":"

              Draws a triangle.

              \n

              A triangle is a three-sided shape defined by three points. The\nfirst two parameters specify the triangle's first point (x1, y1). The\nmiddle two parameters specify its second point (x2, y2). And the last two\nparameters specify its third point (x3, y3).

              \n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"

              x-coordinate of the first point.

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate of the first point.

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate of the second point.

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate of the second point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the third point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the third point.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n triangle(30, 75, 58, 20, 86, 75);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n triangle(-20, 25, 8, -30, 36, 25);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white triangle spins around on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the triangle.\n triangle(-20, 25, 8, -30, 36, 25);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"

              Changes where ellipses, circles, and arcs are drawn.

              \n

              By default, the first two parameters of\nellipse(), circle(),\nand arc()\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\nellipseMode(CENTER).

              \n

              ellipseMode(RADIUS) also uses the first two parameters to set the x- and\ny-coordinates of the shape's center. The next parameters are half of the\nshapes's width and height. Calling ellipse(0, 0, 10, 15) draws a shape\nwith a width of 20 and height of 30.

              \n

              ellipseMode(CORNER) uses the first two parameters as the upper-left\ncorner of the shape. The next parameters are its width and height.

              \n

              ellipseMode(CORNERS) uses the first two parameters as the location of one\ncorner of the ellipse's bounding box. The next parameters are the location\nof the opposite corner.

              \n

              The argument passed to ellipseMode() must be written in ALL CAPS because\nthe constants CENTER, RADIUS, CORNER, and CORNERS are defined this\nway. JavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"

              either CENTER, RADIUS, CORNER, or CORNERS

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(RADIUS);\n fill(255);\n ellipse(50, 50, 30, 30);\n\n // Gray ellipse.\n ellipseMode(CENTER);\n fill(100);\n ellipse(50, 50, 30, 30);\n\n describe('A white circle with a gray circle at its center. Both circles have black outlines.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(CORNER);\n fill(255);\n ellipse(25, 25, 50, 50);\n\n // Gray ellipse.\n ellipseMode(CORNERS);\n fill(100);\n ellipse(25, 25, 50, 50);\n\n describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":100,"description":"

              Draws certain features with jagged (aliased) edges.

              \n

              smooth() is active by default. In 2D mode,\nnoSmooth() is helpful for scaling up images without blurring. The\nfunctions don't affect shapes or fonts.

              \n

              In WebGL mode, noSmooth() causes all shapes to be drawn with jagged\n(aliased) edges. The functions don't affect images or fonts.

              \n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n
              \n\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"

              Changes where rectangles and squares are drawn.

              \n

              By default, the first two parameters of\nrect() and square(),\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\nrectMode(CORNER).

              \n

              rectMode(CORNERS) also uses the first two parameters as the location of\none of the corners. The next parameters are the location of the opposite\ncorner. This mode only works for rect().

              \n

              rectMode(CENTER) uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are its width and\nheight.

              \n

              rectMode(RADIUS) also uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are\nhalf of the shape's width and height.

              \n

              The argument passed to rectMode() must be written in ALL CAPS because the\nconstants CENTER, RADIUS, CORNER, and CORNERS are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"

              either CORNER, CORNERS, CENTER, or RADIUS

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n rect(25, 25, 50, 50);\n\n rectMode(CORNERS);\n fill(100);\n rect(25, 25, 50, 50);\n\n describe('A small gray square drawn at the top-left corner of a white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n rect(50, 50, 30, 30);\n\n rectMode(CENTER);\n fill(100);\n rect(50, 50, 30, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n square(25, 25, 50);\n\n describe('A white square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n square(50, 50, 30);\n\n rectMode(CENTER);\n fill(100);\n square(50, 50, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":303,"description":"

              Draws certain features with smooth (antialiased) edges.

              \n

              smooth() is active by default. In 2D mode,\nnoSmooth() is helpful for scaling up images\nwithout blurring. The functions don't affect shapes or fonts.

              \n

              In WebGL mode, noSmooth() causes all shapes to\nbe drawn with jagged (aliased) edges. The functions don't affect images or\nfonts.

              \n","itemtype":"method","name":"smooth","chainable":1,"example":["\n
              \n\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":387,"description":"

              Sets the style for rendering the ends of lines.

              \n

              The caps for line endings are either rounded (ROUND), squared\n(SQUARE), or extended (PROJECT). The default cap is ROUND.

              \n

              The argument passed to strokeCap() must be written in ALL CAPS because\nthe constants ROUND, SQUARE, and PROJECT are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"

              either ROUND, SQUARE, or PROJECT

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(12);\n\n // Top.\n strokeCap(ROUND);\n line(20, 30, 80, 30);\n\n // Middle.\n strokeCap(SQUARE);\n line(20, 50, 80, 50);\n\n // Bottom.\n strokeCap(PROJECT);\n line(20, 70, 80, 70);\n\n describe(\n 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":441,"description":"

              Sets the style of the joints that connect line segments.

              \n

              Joints are either mitered (MITER), beveled (BEVEL), or rounded\n(ROUND). The default joint is MITER in 2D mode and ROUND in WebGL\nmode.

              \n

              The argument passed to strokeJoin() must be written in ALL CAPS because\nthe constants MITER, BEVEL, and ROUND are defined this way.\nJavaScript is a case-sensitive language.

              \n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"

              either MITER, BEVEL, or ROUND

              \n","type":"Constant"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(MITER);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(BEVEL);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a flat tip in center of canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(ROUND);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":540,"description":"

              Sets the width of the stroke used for points, lines, and the outlines of\nshapes.

              \n

              Note: strokeWeight() is affected by transformations, especially calls to\nscale().

              \n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"

              the weight of the stroke (in pixels).

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Middle.\n strokeWeight(4);\n line(20, 40, 80, 40);\n\n // Bottom.\n strokeWeight(10);\n line(20, 70, 80, 70);\n\n describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Scale by a factor of 5.\n scale(5);\n\n // Bottom. Coordinates are adjusted for scaling.\n line(4, 8, 16, 8);\n\n describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"

              Draws a Bézier curve.

              \n

              Bézier curves can form shapes and curves that slope gently. They're defined\nby two anchor points and two control points. Bézier curves provide more\ncontrol than the spline curves created with the\ncurve() function.

              \n

              The first two parameters, x1 and y1, set the first anchor point. The\nfirst anchor point is where the curve starts.

              \n

              The next four parameters, x2, y2, x3, and y3, set the two control\npoints. The control points \"pull\" the curve towards them.

              \n

              The seventh and eighth parameters, x4 and y4, set the last anchor\npoint. The last anchor point is where the curve ends.

              \n

              Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezier() has twelve arguments because each point has x-, y-,\nand z-coordinates.

              \n","itemtype":"method","name":"bezier","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
              \n\n
              \n\n// Click the mouse near the red dot in the top-left corner\n// and drag to change the curve's shape.\n\nlet x2 = 10;\nlet y2 = 10;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, x2, y2, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, x2, y2);\n line(15, 80, 90, 90);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n bezier(50, 60, 5, 15, 95, 15, 50, 60);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);\n\n // Draw the balloon string.\n line(0, 0, 0, 0, 20, 0);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves","overloads":[{"line":13,"params":[{"name":"x1","description":"

              x-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate of the first control point.

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate of the first control point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the second control point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the second control point.

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate of the second anchor point.

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate of the second anchor point.

              \n","type":"Number"}],"chainable":1},{"line":191,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              z-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate of the first control point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate of the second control point.

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate of the second anchor point.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":221,"description":"

              Sets the number of segments used to draw Bézier curves in WebGL mode.

              \n

              In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.

              \n

              The parameter, detail, is the number of segments to use while drawing a\nBézier curve. For example, calling bezierDetail(5) will use 5 segments to\ndraw curves with the bezier() function. By\ndefault,detail is 20.

              \n

              Note: bezierDetail() has no effect in 2D mode.

              \n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"

              number of segments to use. Defaults to 20.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Draw the original curve.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
              \n\n
              \n\n// Draw the curve with less detail.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 5.\n bezierDetail(5);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(35, -30, 0);\n point(-35, 30, 0);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-40, -40, 0);\n point(40, 40, 0);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(35, -30, -40, -40);\n line(-35, 30, 40, 40);\n\n describe(\n 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":324,"description":"

              Calculates coordinates along a Bézier curve using interpolation.

              \n

              bezierPoint() calculates coordinates along a Bézier curve using the\nanchor and control points. It expects points in the same order as the\nbezier() function. bezierPoint() works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.

              \n

              The first parameter, a, is the coordinate of the first anchor point.

              \n

              The second and third parameters, b and c, are the coordinates of the\ncontrol points.

              \n

              The fourth parameter, d, is the coordinate of the last anchor point.

              \n

              The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

              \n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"

              coordinate of first control point.

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first anchor point.

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second anchor point.

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second control point.

              \n","type":"Number"},{"name":"t","description":"

              amount to interpolate between 0 and 1.

              \n","type":"Number"}],"return":{"description":"coordinate of the point on the curve.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top-right.\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom-left.\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Draw the curve.\n noFill();\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":450,"description":"

              Calculates coordinates along a line that's tangent to a Bézier curve.

              \n

              Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.

              \n

              bezierTangent() calculates coordinates along a tangent line using the\nBézier curve's anchor and control points. It expects points in the same\norder as the bezier() function. bezierTangent()\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.

              \n

              The first parameter, a, is the coordinate of the first anchor point.

              \n

              The second and third parameters, b and c, are the coordinates of the\ncontrol points.

              \n

              The fourth parameter, d, is the coordinate of the last anchor point.

              \n

              The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

              \n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"

              coordinate of first anchor point.

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first control point.

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second control point.

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second anchor point.

              \n","type":"Number"},{"name":"t","description":"

              amount to interpolate between 0 and 1.

              \n","type":"Number"}],"return":{"description":"coordinate of a point on the tangent line.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top-right circle.\n stroke(0);\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top-right tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);\n let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom-left circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom-left tangent.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":570,"description":"

              Draws a curve using a Catmull-Rom spline.

              \n

              Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points.

              \n

              The first two parameters, x1 and y1, set the first control point. This\npoint isn’t drawn and can be thought of as the curve’s starting point.

              \n

              The next four parameters, x2, y2, x3, and y3, set the two anchor\npoints. The anchor points are the start and end points of the curve’s\nvisible segment.

              \n

              The seventh and eighth parameters, x4 and y4, set the last control\npoint. This point isn’t drawn and can be thought of as the curve’s ending\npoint.

              \n

              Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\ncurve() has twelve arguments because each point has x-, y-, and\nz-coordinates.

              \n","itemtype":"method","name":"curve","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
              \n\n
              \n\nlet x1 = 5;\nlet y1 = 26;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(x1, y1, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(x1, y1, x1, y1, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(15, 65);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n curve(-150, 275, 50, 60, 50, 60, 250, 275);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);\n\n // Draw the balloon string.\n line(0, 10, 0, 0, 30, 0);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves","overloads":[{"line":570,"params":[{"name":"x1","description":"

              x-coordinate of the first control point.

              \n","type":"Number"},{"name":"y1","description":"

              y-coordinate of the first control point.

              \n","type":"Number"},{"name":"x2","description":"

              x-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the second anchor point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the second anchor point.

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate of the second control point.

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate of the second control point.

              \n","type":"Number"}],"chainable":1},{"line":746,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

              z-coordinate of the first control point.

              \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate of the first anchor point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate of the second anchor point.

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate of the second control point.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":772,"description":"

              Sets the number of segments used to draw spline curves in WebGL mode.

              \n

              In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.

              \n

              The parameter, detail, is the number of segments to use while drawing a\nspline curve. For example, calling curveDetail(5) will use 5 segments to\ndraw curves with the curve() function. By\ndefault,detail is 20.

              \n

              Note: curveDetail() has no effect in 2D mode.

              \n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"

              number of segments to use. Defaults to 20.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 3.\n curveDetail(3);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);\n curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(23, -26);\n point(23, 11);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-45, -24);\n point(-35, 15);\n\n describe(\n 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":875,"description":"

              Adjusts the way curve() and\ncurveVertex() draw.

              \n

              Spline curves are like cables that are attached to a set of points.\ncurveTightness() adjusts how tightly the cable is attached to the points.

              \n

              The parameter, tightness, determines how the curve fits to the vertex\npoints. By default, tightness is set to 0. Setting tightness to 1,\nas in curveTightness(1), connects the curve's points using straight\nlines. Values in the range from –5 to 5 deform curves while leaving them\nrecognizable.

              \n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"

              amount of tightness.

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Move the mouse left and right to see the curve change.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');\n}\n\nfunction draw() {\n background(200);\n\n // Set the curve's tightness using the mouse.\n let t = map(mouseX, 0, 100, -5, 5, true);\n curveTightness(t);\n\n // Draw the curve.\n noFill();\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":930,"description":"

              Calculates coordinates along a spline curve using interpolation.

              \n

              curvePoint() calculates coordinates along a spline curve using the\nanchor and control points. It expects points in the same order as the\ncurve() function. curvePoint() works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.

              \n

              The first parameter, a, is the coordinate of the first control point.

              \n

              The second and third parameters, b and c, are the coordinates of the\nanchor points.

              \n

              The fourth parameter, d, is the coordinate of the last control point.

              \n

              The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

              \n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"

              coordinate of first anchor point.

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first control point.

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second control point.

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second anchor point.

              \n","type":"Number"},{"name":"t","description":"

              amount to interpolate between 0 and 1.

              \n","type":"Number"}],"return":{"description":"coordinate of a point on the curve.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top.\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom.\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = curvePoint(x1, x2, x3, x4, t);\n let y = curvePoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":1054,"description":"

              Calculates coordinates along a line that's tangent to a spline curve.

              \n

              Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.

              \n

              curveTangent() calculates coordinates along a tangent line using the\nspline curve's anchor and control points. It expects points in the same\norder as the curve() function. curveTangent()\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.

              \n

              The first parameter, a, is the coordinate of the first control point.

              \n

              The second and third parameters, b and c, are the coordinates of the\nanchor points.

              \n

              The fourth parameter, d, is the coordinate of the last control point.

              \n

              The fifth parameter, t, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.

              \n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"

              coordinate of first control point.

              \n","type":"Number"},{"name":"b","description":"

              coordinate of first anchor point.

              \n","type":"Number"},{"name":"c","description":"

              coordinate of second anchor point.

              \n","type":"Number"},{"name":"d","description":"

              coordinate of second control point.

              \n","type":"Number"},{"name":"t","description":"

              amount to interpolate between 0 and 1.

              \n","type":"Number"}],"return":{"description":"coordinate of a point on the tangent line.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top circle.\n stroke(0);\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);\n let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black curve on a gray square. A white circle moves back and forth along the curve.'\n );\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/vertex.js","line":20,"description":"

              Begins creating a hole within a flat shape.

              \n

              The beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices to a negative space and\nendContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().

              \n

              Transformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use\nother shapes, such as ellipse() or\nrect(), between beginContour() and\nendContour().

              \n

              Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.

              \n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":129,"description":"

              Begins adding vertices to a custom shape.

              \n

              The beginShape() and endShape() functions\nallow for creating custom shapes in 2D or 3D. beginShape() begins adding\nvertices to a custom shape and endShape() stops\nadding them.

              \n

              The parameter, kind, sets the kind of shape to make. By default, any\nirregular polygon can be drawn. The available modes for kind are:

              \n
                \n
              • POINTS to draw a series of points.
                • \n
              • LINES to draw a series of unconnected line segments.
                • \n
              • TRIANGLES to draw a series of separate triangles.
                • \n
              • TRIANGLE_FAN to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
                • \n
              • TRIANGLE_STRIP to draw a series of connected triangles in strip fashion.
                • \n
              • QUADS to draw a series of separate quadrilaterals (quads).
                • \n
              • QUAD_STRIP to draw quad strip using adjacent edges to form the next quad.
                • \n
              • TESS to create a filling curve by explicit tessellation (WebGL only).
                • \n
              \n

              After calling beginShape(), shapes can be built by calling\nvertex(),\nbezierVertex(),\nquadraticVertex(), and/or\ncurveVertex(). Calling\nendShape() will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.

              \n

              Transformations such as translate(),\nrotate(), and\nscale() don't work between beginShape() and\nendShape(). It's also not possible to use\nother shapes, such as ellipse() or\nrect(), between beginShape() and\nendShape().

              \n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"

              either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.

              \n","type":"Constant","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw the vertices (points).\n beginShape(POINTS);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw lines between alternating pairs of vertices.\n beginShape(LINES);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two horizontal black lines on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three black lines form a sideways U shape on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A black outline of a square drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLES);\n\n // Left triangle.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n\n // Right triangle.\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white triangles drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLE_STRIP);\n\n // Add vertices.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n vertex(90, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Five white triangles that are interleaved drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles that share their first vertex.\n beginShape(TRIANGLE_FAN);\n\n // Add vertices.\n vertex(57.5, 50);\n vertex(57.5, 15);\n vertex(92, 50);\n vertex(57.5, 85);\n vertex(22, 50);\n vertex(57.5, 15);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four white triangles form a square are drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUADS);\n\n // Left rectangle.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 75);\n vertex(50, 20);\n\n // Right rectangle.\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 75);\n vertex(85, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white rectangles drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUAD_STRIP);\n\n // Add vertices.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 20);\n vertex(50, 75);\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 20);\n vertex(85, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three white rectangles that share edges are drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A blocky C shape drawn in white on a gray background.');\n}\n\n
              \n\n
              \n\n// Click and drag with the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A blocky C shape drawn in red, blue, and green on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n fill('red');\n stroke('red');\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n fill('green');\n stroke('green');\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n fill('blue');\n stroke('blue');\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":543,"description":"

              Adds a Bézier curve segment to a custom shape.

              \n

              bezierVertex() adds a curved segment to custom shapes. The Bézier curves\nit creates are defined like those made by the\nbezier() function. bezierVertex() must be\ncalled between the\nbeginShape() and\nendShape() functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to vertex() before bezierVertex() can\nbe used.

              \n

              The first four parameters, x2, y2, x3, and y3, set the curve’s two\ncontrol points. The control points \"pull\" the curve towards them.

              \n

              The fifth and sixth parameters, x4, and y4, set the last anchor point.\nThe last anchor point is where the curve ends.

              \n

              Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezierVertex() has eight arguments because each point has x-, y-, and\nz-coordinates.

              \n

              Note: bezierVertex() won’t work when an argument is passed to\nbeginShape().

              \n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A black C curve on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(80, 0);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, 80, 0);\n line(30, 75, 80, 75);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\n
              \n\n
              \n\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 0;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(x2, y2, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, x2, y2);\n line(30, 75, 80, 75);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertices.\n bezierVertex(80, 0, 80, 75, 30, 75);\n bezierVertex(50, 80, 60, 25, 30, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A crescent moon shape drawn in white on a gray background.');\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');\n}\n\nfunction draw() {\n background('midnightblue');\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the moons.\n noStroke();\n fill('lemonchiffon');\n\n // Draw the first moon.\n beginShape();\n vertex(-20, -30, 0);\n bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);\n bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);\n endShape();\n\n // Draw the second moon.\n beginShape();\n vertex(-20, -30, -20);\n bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);\n bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":543,"params":[{"name":"x2","description":"

              x-coordinate of the first control point.

              \n","type":"Number"},{"name":"y2","description":"

              y-coordinate of the first control point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the second control point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the second control point.

              \n","type":"Number"},{"name":"x4","description":"

              x-coordinate of the anchor point.

              \n","type":"Number"},{"name":"y4","description":"

              y-coordinate of the anchor point.

              \n","type":"Number"}],"chainable":1},{"line":792,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

              z-coordinate of the first control point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate of the second control point.

              \n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"

              z-coordinate of the anchor point.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":832,"description":"

              Adds a spline curve segment to a custom shape.

              \n

              curveVertex() adds a curved segment to custom shapes. The spline curves\nit creates are defined like those made by the\ncurve() function. curveVertex() must be called\nbetween the beginShape() and\nendShape() functions.

              \n

              Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points. curveVertex() must be called at\nleast four times between\nbeginShape() and\nendShape() in order to draw a curve:

              \n\nbeginShape();\n\n

              // Add the first control point.\ncurveVertex(84, 91);

              \n

              // Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);

              \n

              // Add the second control point.\ncurveVertex(32, 91);

              \n

              endShape();\n

              \n

              The code snippet above would only draw the curve between the anchor points,\nsimilar to the curve() function. The segments\nbetween the control and anchor points can be drawn by calling\ncurveVertex() with the coordinates of the control points:

              \n\nbeginShape();\n\n

              // Add the first control point and draw a segment to it.\ncurveVertex(84, 91);\ncurveVertex(84, 91);

              \n

              // Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);

              \n

              // Add the second control point.\ncurveVertex(32, 91);

              \n

              // Uncomment the next line to draw the segment to the second control point.\n// curveVertex(32, 91);

              \n

              endShape();\n

              \n

              The first two parameters, x and y, set the vertex’s location. For\nexample, calling curveVertex(10, 10) adds a point to the curve at\n(10, 10).

              \n

              Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\ncurveVertex() has three arguments because each point has x-, y-, and\nz-coordinates. By default, the vertex’s z-coordinate is set to 0.

              \n

              Note: curveVertex() won’t work when an argument is passed to\nbeginShape().

              \n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point.\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\n
              \n\n
              \n\n// Click the mouse near the red dot in the bottom-left corner\n// and drag to change the curve's shape.\n\nlet x1 = 32;\nlet y1 = 91;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(x1, y1);\n curveVertex(x1, y1);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(84, 91);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A ghost shape drawn in white on a gray background.');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":832,"params":[{"name":"x","description":"

              x-coordinate of the vertex

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the vertex

              \n","type":"Number"}],"chainable":1},{"line":1160,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"

              z-coordinate of the vertex.

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":1224,"description":"

              Stops creating a hole within a flat shape.

              \n

              The beginContour() and endContour()\nfunctions allow for creating negative space within custom shapes that are\nflat. beginContour() begins adding vertices\nto a negative space and endContour() stops adding them.\nbeginContour() and endContour() must be\ncalled between beginShape() and\nendShape().

              \n

              Transformations such as translate(),\nrotate(), and scale()\ndon't work between beginContour() and\nendContour(). It's also not possible to use other shapes, such as\nellipse() or rect(),\nbetween beginContour() and endContour().

              \n

              Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.

              \n","itemtype":"method","name":"endContour","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":1344,"description":"

              Begins adding vertices to a custom shape.

              \n

              The beginShape() and endShape() functions\nallow for creating custom shapes in 2D or 3D.\nbeginShape() begins adding vertices to a\ncustom shape and endShape() stops adding them.

              \n

              The first parameter, mode, is optional. By default, the first and last\nvertices of a shape aren't connected. If the constant CLOSE is passed, as\nin endShape(CLOSE), then the first and last vertices will be connected.

              \n

              The second parameter, count, is also optional. In WebGL mode, it’s more\nefficient to draw many copies of the same shape using a technique called\ninstancing.\nThe count parameter tells WebGL mode how many copies to draw. For\nexample, calling endShape(CLOSE, 400) after drawing a custom shape will\nmake it efficient to draw 400 copies. This feature requires\nwriting a custom shader.

              \n

              After calling beginShape(), shapes can be\nbuilt by calling vertex(),\nbezierVertex(),\nquadraticVertex(), and/or\ncurveVertex(). Calling\nendShape() will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.

              \n

              Transformations such as translate(),\nrotate(), and\nscale() don't work between\nbeginShape() and endShape(). It's also not\npossible to use other shapes, such as ellipse() or\nrect(), between\nbeginShape() and endShape().

              \n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"

              use CLOSE to close the shape

              \n","type":"Constant","optional":true},{"name":"count","description":"

              number of times you want to draw/instance the shape (for WebGL mode).

              \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shapes.\n noFill();\n\n // Left triangle.\n beginShape();\n vertex(20, 20);\n vertex(45, 20);\n vertex(45, 80);\n endShape(CLOSE);\n\n // Right triangle.\n beginShape();\n vertex(50, 20);\n vertex(75, 20);\n vertex(75, 80);\n endShape();\n\n describe(\n 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'\n );\n}\n\n
              \n\n
              \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // Copy the instance ID to the fragment shader.\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance.\n // Using gl_InstanceID allows us to move each instance separately.\n // Here we move each instance horizontally by ID * 23.\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // Apply the offset to the final position.\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance ID.\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance ID.\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n background(220);\n\n // Compile and apply the p5.Shader.\n shader(myShader);\n\n // Set the numInstances uniform.\n myShader.setUniform('numInstances', 4);\n\n // Translate the origin to help align the drawing.\n translate(25, -10);\n\n // Style the shapes.\n noStroke();\n\n // Draw the shapes.\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n describe('A row of four squares. Their colors transition from purple on the left to red on the right');\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":1569,"description":"

              Adds a quadratic Bézier curve segment to a custom shape.

              \n

              quadraticVertex() adds a curved segment to custom shapes. The Bézier\ncurve segments it creates are similar to those made by the\nbezierVertex() function.\nquadraticVertex() must be called between the\nbeginShape() and\nendShape() functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to vertex() before quadraticVertex() can\nbe used.

              \n

              The first two parameters, cx and cy, set the curve’s control point.\nThe control point \"pulls\" the curve towards its.

              \n

              The last two parameters, x3, and y3, set the last anchor point. The\nlast anchor point is where the curve ends.

              \n

              Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\nbezierVertex() has eight arguments because each point has x-, y-, and\nz-coordinates.

              \n

              Note: quadraticVertex() won’t work when an argument is passed to\nbeginShape().

              \n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the curve.\n noFill();\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, 80, 20);\n line(50, 50, 80, 20);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(80, 20);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n\n
              \n\n
              \n\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 20;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(x2, y2, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, x2, y2);\n line(50, 50, x2, y2);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(x2, y2);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the curved segments.\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n quadraticVertex(20, 80, 80, 80);\n\n // Add the straight segments.\n vertex(80, 10);\n vertex(20, 10);\n vertex(20, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A white puzzle piece drawn on a gray background.');\n}\n\n
              \n\n
              \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the first puzzle piece.\n noStroke();\n fill(255);\n\n // Draw the first puzzle piece.\n beginShape();\n vertex(-30, -30, 0);\n quadraticVertex(30, -30, 0, 0, 0, 0);\n quadraticVertex(-30, 30, 0, 30, 30, 0);\n vertex(30, -40, 0);\n vertex(-30, -40, 0);\n vertex(-30, -30, 0);\n endShape();\n\n // Style the second puzzle piece.\n stroke(255);\n noFill();\n\n // Draw the second puzzle piece.\n beginShape();\n vertex(-30, -30, -20);\n quadraticVertex(30, -30, -20, 0, 0, -20);\n quadraticVertex(-30, 30, -20, 30, 30, -20);\n vertex(30, -40, -20);\n vertex(-30, -40, -20);\n vertex(-30, -30, -20);\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":1569,"params":[{"name":"cx","description":"

              x-coordinate of the control point.

              \n","type":"Number"},{"name":"cy","description":"

              y-coordinate of the control point.

              \n","type":"Number"},{"name":"x3","description":"

              x-coordinate of the anchor point.

              \n","type":"Number"},{"name":"y3","description":"

              y-coordinate of the anchor point.

              \n","type":"Number"}],"chainable":1},{"line":1801,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"

              z-coordinate of the control point.

              \n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"

              z-coordinate of the anchor point.

              \n","type":"Number"}]}]},{"file":"src/core/shape/vertex.js","line":1850,"description":"

              Adds a vertex to a custom shape.

              \n

              vertex() sets the coordinates of vertices drawn between the\nbeginShape() and\nendShape() functions.

              \n

              The first two parameters, x and y, set the x- and y-coordinates of the\nvertex.

              \n

              The third parameter, z, is optional. It sets the z-coordinate of the\nvertex in WebGL mode. By default, z is 0.

              \n

              The fourth and fifth parameters, u and v, are also optional. They set\nthe u- and v-coordinates for the vertex’s texture when used with\nendShape(). By default, u and v are both 0.

              \n","itemtype":"method","name":"vertex","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n strokeWeight(3);\n\n // Start drawing the shape.\n // Only draw the vertices.\n beginShape(POINTS);\n\n // Add the vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around slowly on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n\n
              \n\n
              \n\nlet img;\n\n// Load an image to apply as a texture.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A photograph of a ceiling rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the shape.\n noStroke();\n\n // Apply the texture.\n texture(img);\n textureMode(NORMAL);\n\n // Start drawing the shape\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0, 0, 0);\n vertex(35, -30, 0, 1, 0);\n vertex(35, 25, 0, 1, 1);\n vertex(-20, 25, 0, 0, 1);\n\n // Stop drawing the shape.\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":1850,"params":[{"name":"x","description":"

              x-coordinate of the vertex.

              \n","type":"Number"},{"name":"y","description":"

              y-coordinate of the vertex.

              \n","type":"Number"}],"chainable":1},{"line":2021,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"

              z-coordinate of the vertex. Defaults to 0.

              \n","type":"Number","optional":true}],"chainable":1},{"line":2028,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true},{"name":"u","description":"

              u-coordinate of the vertex's texture. Defaults to 0.

              \n","type":"Number","optional":true},{"name":"v","description":"

              v-coordinate of the vertex's texture. Defaults to 0.

              \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":2066,"description":"

              Sets the normal vector for vertices in a custom 3D shape.

              \n

              3D shapes created with beginShape() and\nendShape() are made by connecting sets of\npoints called vertices. Each vertex added with\nvertex() has a normal vector that points away\nfrom it. The normal vector controls how light reflects off the shape.

              \n

              normal() can be called two ways with different parameters to define the\nnormal vector's components.

              \n

              The first way to call normal() has three parameters, x, y, and z.\nIf Numbers are passed, as in normal(1, 2, 3), they set the x-, y-, and\nz-components of the normal vector.

              \n

              The second way to call normal() has one parameter, vector. If a\np5.Vector object is passed, as in\nnormal(myVector), its components will be used to set the normal vector.

              \n

              normal() changes the normal vector of vertices added to a custom shape\nwith vertex(). normal() must be called between\nthe beginShape() and\nendShape() functions, just like\nvertex(). The normal vector set by calling\nnormal() will affect all following vertices until normal() is called\nagain:

              \n\nbeginShape();\n\n

              // Set the vertex normal.\nnormal(-0.4, -0.4, 0.8);

              \n

              // Add a vertex.\nvertex(-30, -30, 0);

              \n

              // Set the vertex normal.\nnormal(0, 0, 1);

              \n

              // Add vertices.\nvertex(30, -30, 0);\nvertex(30, 30, 0);

              \n

              // Set the vertex normal.\nnormal(0.4, -0.4, 0.8);

              \n

              // Add a vertex.\nvertex(-30, 30, 0);

              \n

              endShape();\n

              \n","itemtype":"method","name":"normal","chainable":1,"example":["\n
              \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n beginShape();\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
              \n\n
              \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(-0.4, -0.4, 0.8);\n vertex(-30, -30, 0);\n\n normal(0, 0, 1);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(0.4, -0.4, 0.8);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
              \n\n
              \n\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Create p5.Vector objects.\n let n1 = createVector(-0.4, -0.4, 0.8);\n let n2 = createVector(0, 0, 1);\n let n3 = createVector(0.4, -0.4, 0.8);\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(n1);\n vertex(-30, -30, 0);\n\n normal(n2);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(n3);\n vertex(-30, 30, 0);\n endShape();\n}\n\n
              "],"class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":2066,"params":[{"name":"vector","description":"

              vertex normal as a p5.Vector object.

              \n","type":"p5.Vector"}],"chainable":1},{"line":2241,"params":[{"name":"x","description":"

              x-component of the vertex normal.

              \n","type":"Number"},{"name":"y","description":"

              y-component of the vertex normal.

              \n","type":"Number"},{"name":"z","description":"

              z-component of the vertex normal.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/constants.js","line":9,"description":"

              Version of this p5.js.

              \n","itemtype":"property","name":"VERSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":18,"description":"

              The default, two-dimensional renderer.

              \n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":24,"description":"

              One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.

              \n

              WEBGL differs from the default P2D renderer in the following ways:

              \n\n

              To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the \"Learn\" section of this website, or read the wiki article \"Getting started with WebGL in p5\".

              \n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":45,"description":"

              One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),\nwhich can be used to determine what capabilities the rendering environment\nhas.

              \n","itemtype":"property","name":"WEBGL2","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":55,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":60,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":65,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":70,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":75,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":80,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":88,"description":"

              A Number constant that's approximately 1.5708.

              \n

              HALF_PI is half the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(HALF_PI) rotates the coordinate system HALF_PI radians, which is\na quarter turn (90˚).

              \n

              Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

              \n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to HALF_PI.\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n describe('The bottom-right quarter of a circle drawn in white on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a quarter turn.\n rotate(HALF_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":178,"description":"

              A Number constant that's approximately 3.1416.

              \n

              PI is the mathematical constant π. It's useful for many tasks that\ninvolve rotation and oscillation. For example, calling rotate(PI) rotates\nthe coordinate system PI radians, which is a half turn (180˚).

              \n

              Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

              \n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to PI.\n arc(50, 50, 80, 80, 0, PI);\n\n describe('The bottom half of a circle drawn in white on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a half turn.\n rotate(PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('A horizontal black line on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":267,"description":"

              A Number constant that's approximately 0.7854.

              \n

              QUARTER_PI is one-fourth the value of the mathematical constant π. It's\nuseful for many tasks that involve rotation and oscillation. For example,\ncalling rotate(QUARTER_PI) rotates the coordinate system QUARTER_PI\nradians, which is an eighth of a turn (45˚).

              \n

              Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

              \n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to QUARTER_PI.\n arc(50, 50, 80, 80, 0, QUARTER_PI);\n\n describe('A one-eighth slice of a circle drawn in white on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate an eighth turn.\n rotate(QUARTER_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines that form a \"V\" opening towards the bottom-right corner of a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":357,"description":"

              A Number constant that's approximately 6.2382.

              \n

              TAU is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(TAU) rotates the coordinate system TAU radians, which is one\nfull turn (360˚). TAU and TWO_PI are equal.

              \n

              Note: TAU radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

              \n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TAU.\n arc(50, 50, 80, 80, 0, TAU);\n\n describe('A white circle drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TAU);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TAU);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":452,"description":"

              A Number constant that's approximately 6.2382.

              \n

              TWO_PI is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\nrotate(TWO_PI) rotates the coordinate system TWO_PI radians, which is\none full turn (360˚). TWO_PI and TAU are equal.

              \n

              Note: TWO_PI radians equals 360˚, PI radians equals 180˚, HALF_PI\nradians equals 90˚, and QUARTER_PI radians equals 45˚.

              \n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TWO_PI.\n arc(50, 50, 80, 80, 0, TWO_PI);\n\n describe('A white circle drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TWO_PI);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":547,"description":"

              A String constant that's used to set the\nangleMode().

              \n

              By default, functions such as rotate() and\nsin() expect angles measured in units of radians.\nCalling angleMode(DEGREES) ensures that angles are measured in units of\ndegrees.

              \n

              Note: TWO_PI radians equals 360˚.

              \n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a red arc from 0 to HALF_PI radians.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a blue arc from 90˚ to 180˚.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, 90, 180);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":587,"description":"

              A String constant that's used to set the\nangleMode().

              \n

              By default, functions such as rotate() and\nsin() expect angles measured in units of radians.\nCalling angleMode(RADIANS) ensures that angles are measured in units of\nradians. Doing so can be useful if the\nangleMode() has been set to\nDEGREES.

              \n

              Note: TWO_PI radians equals 360˚.

              \n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a red arc from 0˚ to 90˚.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, 90);\n\n // Use radians.\n angleMode(RADIANS);\n\n // Draw a blue arc from HALF_PI to PI.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, HALF_PI, PI);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n\n
              "],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":635,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":640,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":645,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":650,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":655,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":660,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":665,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":670,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":675,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":681,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":687,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":693,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":699,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":705,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":711,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":717,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":723,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":728,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":734,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":740,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":745,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":750,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":755,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":760,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":766,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":772,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":777,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":782,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":789,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":794,"description":"

              HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\nHSB.

              \n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":803,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":810,"description":"

              AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the size function as AUTO, at a time.

              \n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":820,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":826,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":831,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":836,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":841,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":846,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":851,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":856,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":861,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":866,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":871,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":876,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":881,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":886,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":893,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":899,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":905,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":913,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":918,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":924,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":929,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":934,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":939,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":944,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":949,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":955,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":960,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":965,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":970,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":976,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":984,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":989,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":994,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":999,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1004,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1009,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1014,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1019,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1026,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1031,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1036,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1041,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1046,"itemtype":"property","name":"CHAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1051,"itemtype":"property","name":"WORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1063,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1068,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1073,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1078,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1085,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1090,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1095,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1100,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1108,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1116,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1121,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1126,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1131,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1138,"itemtype":"property","name":"FLAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1143,"itemtype":"property","name":"SMOOTH","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1150,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1155,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1165,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1171,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1177,"itemtype":"property","name":"LABEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1182,"itemtype":"property","name":"FALLBACK","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1188,"itemtype":"property","name":"CONTAIN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1194,"itemtype":"property","name":"COVER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1200,"itemtype":"property","name":"UNSIGNED_BYTE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1206,"itemtype":"property","name":"UNSIGNED_INT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1212,"itemtype":"property","name":"FLOAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1218,"itemtype":"property","name":"HALF_FLOAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":1224,"itemtype":"property","name":"RGBA","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":21,"description":"

              Displays text in the web browser's console.

              \n

              print() is helpful for printing values while debugging. Each call to\nprint() creates a new line of text.

              \n

              Note: Call print('\\n') to print a blank line. Calling print() without\nan argument opens the browser's dialog for printing documents.

              \n","itemtype":"method","name":"print","params":[{"name":"contents","description":"

              content to print to the console.

              \n","type":"Any"}],"example":["\n
              \n\nfunction setup() {\n // Prints \"hello, world\" to the console.\n print('hello, world');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let name = 'ada';\n // Prints \"hello, ada\" to the console.\n print(`hello, ${name}`);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":69,"description":"

              A Number variable that tracks the number of frames drawn since the sketch\nstarted.

              \n

              frameCount's value is 0 inside setup(). It\nincrements by 1 each time the code in draw()\nfinishes executing.

              \n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the value of\n // frameCount.\n textSize(30);\n textAlign(CENTER, CENTER);\n text(frameCount, 50, 50);\n\n describe('The number 0 written in black in the middle of a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n textSize(30);\n textAlign(CENTER, CENTER);\n\n describe('A number written in black in the middle of a gray square. Its value increases rapidly.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the value of\n // frameCount.\n text(frameCount, 50, 50);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":124,"description":"

              A Number variable that tracks the number of milliseconds it took to draw\nthe last frame.

              \n

              deltaTime contains the amount of time it took\ndraw() to execute during the previous frame. It's\nuseful for simulating physics.

              \n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n
              \n\nlet x = 0;\nlet speed = 0.05;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');\n}\n\nfunction draw() {\n background(200);\n\n // Use deltaTime to calculate\n // a change in position.\n let deltaX = speed * deltaTime;\n\n // Update the x variable.\n x += deltaX;\n\n // Reset x to 0 if it's\n // greater than 100.\n if (x > 100) {\n x = 0;\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":174,"description":"

              A Boolean variable that's true if the browser is focused and false if\nnot.

              \n

              Note: The browser window can only receive input if it's focused.

              \n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n
              \n\n// Open this example in two separate browser\n// windows placed side-by-side to demonstrate.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square changes color from green to red when the browser window is out of focus.');\n}\n\nfunction draw() {\n // Change the background color\n // when the browser window\n // goes in/out of focus.\n if (focused === true) {\n background(0, 255, 0);\n } else {\n background(255, 0, 0);\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":209,"description":"

              Changes the cursor's appearance.

              \n

              The first parameter, type, sets the type of cursor to display. The\nbuilt-in options are ARROW, CROSS, HAND, MOVE, TEXT, and WAIT.\ncursor() also recognizes standard CSS cursor properties passed as\nstrings: 'help', 'wait', 'crosshair', 'not-allowed', 'zoom-in',\nand 'grab'. If the path to an image is passed, as in\ncursor('assets/target.png'), then the image will be used as the cursor.\nImages must be in .cur, .gif, .jpg, .jpeg, or .png format and should be at most 32 by 32 pixels large.

              \n

              The parameters x and y are optional. If an image is used for the\ncursor, x and y set the location pointed to within the image. They are\nboth 0 by default, so the cursor points to the image's top-left corner. x\nand y must be less than the image's width and height, respectively.

              \n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"

              Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.\n Native CSS properties: 'grab', 'progress', and so on.\n Path to cursor image.

              \n","type":"String|Constant"},{"name":"x","description":"

              horizontal active spot of the cursor.

              \n","type":"Number","optional":true},{"name":"y","description":"

              vertical active spot of the cursor.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. The cursor appears as crosshairs.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the cursor to crosshairs: +\n cursor(CROSS);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas into quadrants.\n line(50, 0, 50, 100);\n line(0, 50, 100, 50);\n\n // Change cursor based on mouse position.\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n } else {\n cursor('grab');\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Change the cursor's active spot\n // when the mouse is pressed.\n if (mouseIsPressed === true) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);\n } else {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":330,"description":"

              Sets the number of frames to draw per second.

              \n

              Calling frameRate() with one numeric argument, as in frameRate(30),\nattempts to draw 30 frames per second (FPS). The target frame rate may not\nbe achieved depending on the sketch's processing needs. Most computers\ndefault to a frame rate of 60 FPS. Frame rates of 24 FPS and above are\nfast enough for smooth animations.

              \n

              Calling frameRate() without an argument returns the current frame rate.\nThe value returned is an approximation.

              \n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the x variable based\n // on the current frameCount.\n let x = frameCount % 100;\n\n // If the mouse is pressed,\n // decrease the frame rate.\n if (mouseIsPressed === true) {\n frameRate(10);\n } else {\n frameRate(60);\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // If the mouse is pressed, do lots\n // of math to slow down drawing.\n if (mouseIsPressed === true) {\n for (let i = 0; i < 1000000; i += 1) {\n random();\n }\n }\n\n // Get the current frame rate\n // and display it.\n let fps = frameRate();\n text(fps, 50, 50);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":330,"params":[{"name":"fps","description":"

              number of frames to draw per second.

              \n","type":"Number"}],"chainable":1},{"line":404,"params":[],"return":{"description":"current frame rate.","type":"Number"}}]},{"file":"src/core/environment.js","line":447,"description":"

              Returns the target frame rate.

              \n

              The value is either the system frame rate or the last value passed to\nframeRate().

              \n","itemtype":"method","name":"getTargetFrameRate","return":{"description":"_targetFrameRate","type":"Number"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The number 20 written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the frame rate to 20.\n frameRate(20);\n\n // Get the target frame rate and\n // display it.\n let fps = getTargetFrameRate();\n text(fps, 43, 54);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":482,"description":"

              Hides the cursor from view.

              \n","itemtype":"method","name":"noCursor","example":["\n
              \n\nfunction setup() {\n // Hide the cursor.\n noCursor();\n}\n\nfunction draw() {\n background(200);\n\n circle(mouseX, mouseY, 10);\n\n describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":508,"description":"

              A String variable with the WebGL version in use.

              \n

              webglVersion's value equals one of the following string constants:

              \n
                \n
              • WEBGL2 whose value is 'webgl2',
                • \n
              • WEBGL whose value is 'webgl', or
                • \n
              • P2D whose value is 'p2d'. This is the default for 2D sketches.
                • \n
              \n

              See setAttributes() for ways to set the\nWebGL version.

              \n","itemtype":"property","name":"webglVersion","type":"String","readonly":"","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the current WebGL version.\n text(webglVersion, 42, 54);\n\n describe('The text \"p2d\" written in black on a gray background.');\n}\n\n
              \n\n
              \n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -15, 5);\n\n describe('The text \"webgl2\" written in black on a gray background.');\n}\n\n
              \n\n
              \n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n\n // Set WebGL to version 1.\n setAttributes({ version: 1 });\n\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -14, 5);\n\n describe('The text \"webgl\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":590,"description":"

              A Number variable that stores the width of the screen display.

              \n

              displayWidth is useful for running full-screen programs. Its value\ndepends on the current pixelDensity().

              \n

              Note: The actual screen width can be computed as\ndisplayWidth * pixelDensity().

              \n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":621,"description":"

              A Number variable that stores the height of the screen display.

              \n

              displayHeight is useful for running full-screen programs. Its value\ndepends on the current pixelDensity().

              \n

              Note: The actual screen height can be computed as\ndisplayHeight * pixelDensity().

              \n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":652,"description":"

              A Number variable that stores the width of the browser's viewport.

              \n

              The layout viewport\nis the area within the browser that's available for drawing.

              \n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":680,"description":"

              A Number variable that stores the height of the browser's viewport.

              \n

              The layout viewport\nis the area within the browser that's available for drawing.

              \n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n
              \n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":708,"description":"

              A function that's called when the browser window is resized.

              \n

              Code placed in the body of windowResized() will run when the\nbrowser window's size changes. It's a good place to call\nresizeCanvas() or make other\nadjustments to accommodate the new window size.

              \n

              The event parameter is optional. If added to the function declaration, it\ncan be used for debugging or other purposes.

              \n","itemtype":"method","name":"windowResized","params":[{"name":"event","description":"

              optional resize Event.

              \n","type":"UIEvent","optional":true}],"example":["\n
              \n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center.\n circle(width / 2, height / 2, 50);\n}\n\n// Resize the canvas when the\n// browser's size changes.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":803,"description":"

              A Number variable that stores the width of the canvas in pixels.

              \n

              width's default value is 100. Calling\ncreateCanvas() or\nresizeCanvas() changes the value of\nwidth. Calling noCanvas() sets its value to\n0.

              \n","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(50, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 21, 54);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// width.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(50, 100);\n background(200);\n text(width, 21, 54);\n }\n}\n\n
              "],"itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":872,"description":"

              A Number variable that stores the height of the canvas in pixels.

              \n

              height's default value is 100. Calling\ncreateCanvas() or\nresizeCanvas() changes the value of\nheight. Calling noCanvas() sets its value to\n0.

              \n","example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 27);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// height.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(100, 50);\n background(200);\n text(height, 42, 27);\n }\n}\n\n
              "],"itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":941,"description":"

              Toggles full-screen mode or returns the current mode.

              \n

              Calling fullscreen(true) makes the sketch full-screen. Calling\nfullscreen(false) makes the sketch its original size.

              \n

              Calling fullscreen() without an argument returns true if the sketch\nis in full-screen mode and false if not.

              \n

              Note: Due to browser restrictions, fullscreen() can only be called with\nuser input such as a mouse press.

              \n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"

              whether the sketch should be in fullscreen mode.

              \n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state.","type":"Boolean"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n describe('A gray canvas that switches between default and full-screen display when clicked.');\n}\n\n// If the mouse is pressed,\n// toggle full-screen mode.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":996,"description":"

              Sets the pixel density or returns the current density.

              \n

              Computer displays are grids of little lights called pixels. A\ndisplay's pixel density describes how many pixels it packs into an\narea. Displays with smaller pixels have a higher pixel density and create\nsharper images.

              \n

              pixelDensity() sets the pixel scaling for high pixel density displays.\nBy default, the pixel density is set to match the display's density.\nCalling pixelDensity(1) turn this off.

              \n

              Calling pixelDensity() without an argument returns the current pixel\ndensity.

              \n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle on a gray canvas.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Set the pixel density to 3.\n pixelDensity(3);\n\n // Create a canvas, paint the\n // background, and draw a\n // circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A sharp white circle on a gray canvas.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":996,"params":[{"name":"val","description":"

              desired pixel density.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1050,"params":[],"return":{"description":"current pixel density of the sketch.","type":"Number"}}]},{"file":"src/core/environment.js","line":1069,"description":"

              Returns the display's current pixel density.

              \n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display.","type":"Number"},"example":["\n
              \n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n // Get the current display density.\n let d = displayDensity();\n\n // Use the display density to set\n // the sketch's pixel density.\n pixelDensity(d);\n\n // Paint the background and\n // draw a circle.\n background(200);\n circle(50, 50, 70);\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1140,"description":"

              Returns the sketch's current\nURL\nas a String.

              \n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // and display it.\n let url = getURL();\n textWrap(CHAR);\n text(url, 0, 40, 100);\n\n describe('The URL \"https://p5js.org/reference/#/p5/getURL\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1166,"description":"

              Returns the current\nURL\npath as an Array of Strings.

              \n

              For example, consider a sketch hosted at the URL\nhttps://example.com/sketchbook. Calling getURLPath() returns\n['sketchbook']. For a sketch hosted at the URL\nhttps://example.com/sketchbook/monday, getURLPath() returns\n['sketchbook', 'monday'].

              \n","itemtype":"method","name":"getURLPath","return":{"description":"path components.","type":"String[]"},"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL path\n // and display the first\n // part.\n let path = getURLPath();\n text(path[0], 25, 54);\n\n describe('The word \"reference\" written in black on a gray background.');\n}\n\n
              "],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":1199,"description":"

              Returns the current\nURL parameters\nin an Object.

              \n

              For example, calling getURLParams() in a sketch hosted at the URL\nhttp://p5js.org?year=2014&month=May&day=15 returns\n{ year: 2014, month: 'May', day: 15 }.

              \n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n
              \n\n// Imagine this sketch is hosted at the following URL:\n// https://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // parameters and display\n // them.\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n\n describe('The text \"15\", \"May\", and \"2014\" written in black on separate lines.');\n}\n\n
              "],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/helpers.js","line":1,"requires":["constants"],"class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":30,"description":"

              This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":126,"description":"

              Set up our translation function, with loaded languages

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":171,"description":"

              Returns a list of languages we have translations loaded for

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":178,"description":"

              Returns the current language selected for translation

              \n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":185,"description":"

              Sets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.

              \n","class":"p5","module":"Environment"},{"file":"src/core/legacy.js","line":1,"requires":["core\nThese are functions that are part of the Processing API but are not part of\nthe p5.js API. In some cases they have a new name","in others","they are\nremoved completely. Not all unsupported Processing functions are listed here\nbut we try to include ones that a user coming from Processing might likely\ncall."],"class":"p5","module":"Environment"},{"file":"src/core/main.js","line":41,"description":"

              Called directly before setup(), the preload() function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, setup() will wait until any load calls within have\nfinished. Nothing besides load calls (loadImage, loadJSON, loadFont,\nloadStrings, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in setup()\nor anywhere else with the use of a callback parameter.

              \n

              By default the text \"loading...\" will be displayed. To make your own\nloading page, include an HTML element with id \"p5_loading\" in your\npage. More information here.

              \n","itemtype":"method","name":"preload","example":["\n
              \nlet img;\nlet c;\nfunction preload() {\n // preload() runs once\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n // setup() waits until preload() is done\n img.loadPixels();\n // get color of middle pixel\n c = img.get(img.width / 2, img.height / 2);\n}\n\nfunction draw() {\n background(c);\n image(img, 25, 25, 50, 50);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":82,"description":"

              The setup() function is called once when the program starts. It's used to\ndefine initial environment properties such as screen size and background\ncolor and to load media such as images and fonts as the program starts.\nThere can only be one setup() function for each program and it shouldn't\nbe called again after its initial execution.

              \n

              Note: Variables declared within setup() are not accessible within other\nfunctions, including draw().

              \n","itemtype":"method","name":"setup","example":["\n
              \nlet a = 0;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(102);\n}\n\nfunction draw() {\n rect(a++ % width, 10, 2, 80);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":113,"description":"

              Called directly after setup(), the draw() function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\nstill be executed once before stopping. draw() is called automatically and\nshould never be called explicitly.

              \n

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

              \n

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

              \n

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

              \n

              It is important to note that the drawing coordinate system will be reset\nat the beginning of each draw() call. If any transformations are performed\nwithin draw() (ex: scale, rotate, translate), their effects will be\nundone at the beginning of draw(), so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.

              \n","itemtype":"method","name":"draw","example":["\n
              \nlet yPos = 0;\nfunction setup() {\n // setup() runs once\n frameRate(30);\n}\nfunction draw() {\n // draw() loops forever, until stopped\n background(204);\n yPos = yPos - 1;\n if (yPos < 0) {\n yPos = height;\n }\n line(0, yPos, width, yPos);\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":450,"description":"

              Removes the entire p5 sketch. This will remove the canvas and any\nelements created by p5.js. It will also stop the draw loop and unbind\nany properties or methods from the window global scope. It will\nleave a variable p5 in case you wanted to create a new p5 sketch.\nIf you like, you can set p5 = null to erase it. While all functions and\nvariables and objects created by the p5 library will be removed, any\nother global variables created by your code will remain.

              \n","itemtype":"method","name":"remove","example":["\n
              \nfunction draw() {\n ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n remove(); // remove whole sketch on mouse press\n}\n
              "],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":751,"description":"

              Turn off some features of the friendly error system (FES), which can give\na significant boost to performance when needed.

              \n

              Note that this will disable the parts of the FES that cause performance\nslowdown (like argument checking). Friendly errors that have no performance\ncost (like giving a descriptive error if a file load fails, or warning you\nif you try to override p5.js functions in the global space),\nwill remain in place.

              \n

              See \ndisabling the friendly error system.

              \n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n
              \np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 50);\n}\n
              "],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":56,"description":"

              The element's underlying HTMLElement object.

              \n

              The\nHTMLElement\nobject's properties and methods can be used directly.

              \n","example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the border style for the\n // canvas.\n cnv.elt.style.border = '5px dashed deeppink';\n\n describe('A gray square with a pink border drawn with dashed lines.');\n}\n\n
              "],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":94,"description":"

              A Number property that stores the element's width.

              \n","type":"{Number}","itemtype":"property","name":"width","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":102,"description":"

              A Number property that stores the element's height.

              \n","type":"{Number}","itemtype":"property","name":"height","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":112,"description":"

              Attaches the element to a parent element.

              \n

              For example, a <div></div> element may be used as a box to\nhold two pieces of text, a header and a paragraph. The\n<div></div> is the parent element of both the header and\nparagraph.

              \n

              The parameter parent can have one of three types. parent can be a\nstring with the parent element's ID, as in\nmyElement.parent('container'). It can also be another\np5.Element object, as in\nmyElement.parent(myDiv). Finally, parent can be an HTMLElement\nobject, as in myElement.parent(anotherElement).

              \n

              Calling myElement.parent() without an argument returns the element's\nparent.

              \n","itemtype":"method","name":"parent","chainable":1,"example":["\n
              \n\nfunction setup() {\n background(200);\n\n // Create a div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color to white\n div.style('background-color', 'white');\n\n // Align any text to the center.\n div.style('text-align', 'center');\n\n // Set its ID to \"container\".\n div.id('container');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using its ID \"container\".\n p.parent('container');\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent.\n p.parent(div);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using the underlying\n // HTMLElement.\n p.parent(div.elt);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":112,"params":[{"name":"parent","description":"

              ID, p5.Element,\n or HTMLElement of desired parent element.

              \n","type":"String|p5.Element|Object"}],"chainable":1},{"line":233,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":254,"description":"

              Sets the element's ID using a given string.

              \n

              Calling myElement.id() without an argument returns its ID as a string.

              \n","itemtype":"method","name":"id","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the canvas' ID\n // to \"mycanvas\".\n cnv.id('mycanvas');\n\n // Get the canvas' ID.\n let id = cnv.id();\n text(id, 24, 54);\n\n describe('The text \"mycanvas\" written in black on a gray background.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":254,"params":[{"name":"id","description":"

              ID of the element.

              \n","type":"String"}],"chainable":1},{"line":286,"params":[],"return":{"description":"ID of the element.","type":"String"}}]},{"file":"src/core/p5.Element.js","line":301,"description":"

              Adds a\nclass attribute\nto the element using a given string.

              \n

              Calling myElement.class() without an argument returns a string with its current classes.

              \n","itemtype":"method","name":"class","chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Add the class \"small\" to the\n // canvas element.\n cnv.class('small');\n\n // Get the canvas element's class\n // and display it.\n let c = cnv.class();\n text(c, 35, 54);\n\n describe('The word \"small\" written in black on a gray canvas.');\n\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":301,"params":[{"name":"class","description":"

              class to add.

              \n","type":"String"}],"chainable":1},{"line":337,"params":[],"return":{"description":"element's classes, if any.","type":"String"}}]},{"file":"src/core/p5.Element.js","line":350,"description":"

              Calls a function when the mouse is pressed over the element.

              \n

              Calling myElement.mousePressed(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the canvas\n // is pressed.\n cnv.mousePressed(randomColor);\n\n describe('A gray square changes color when the mouse is pressed.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":405,"description":"

              Calls a function when the mouse is pressed twice over the element.

              \n

              Calling myElement.doubleClicked(false) disables the function.

              \n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"

              function to call when the mouse is\n double clicked over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // canvas is double-clicked.\n cnv.doubleClicked(randomColor);\n\n describe('A gray square changes color when the user double-clicks the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":447,"description":"

              Calls a function when the mouse wheel scrolls over the element.

              \n

              The callback function, fxn, is passed an event object. event has\ntwo numeric properties, deltaY and deltaX. event.deltaY is\nnegative if the mouse wheel rotates away from the user. It's positive if\nthe mouse wheel rotates toward the user. event.deltaX is positive if\nthe mouse wheel moves to the right. It's negative if the mouse wheel moves\nto the left.

              \n

              Calling myElement.mouseWheel(false) disables the function.

              \n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"

              function to call when the mouse wheel is\n scrolled over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse wheel moves.\n cnv.mouseWheel(randomColor);\n\n describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call changeBackground() when the\n // mouse wheel moves.\n cnv.mouseWheel(changeBackground);\n\n describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');\n}\n\nfunction changeBackground(event) {\n // Change the background color\n // based on deltaY.\n if (event.deltaY > 0) {\n background('deeppink');\n } else if (event.deltaY < 0) {\n background('cornflowerblue');\n } else {\n background(200);\n }\n\n // Draw a shape based on deltaX.\n if (event.deltaX > 0) {\n circle(50, 50, 20);\n } else if (event.deltaX < 0) {\n square(40, 40, 20);\n }\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":533,"description":"

              Calls a function when the mouse is released over the element.

              \n

              Calling myElement.mouseReleased(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseReleased(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":578,"description":"

              Calls a function when the mouse is pressed and released over the element.

              \n

              Calling myElement.mouseReleased(false) disables the function.

              \n

              Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.

              \n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"

              function to call when the mouse is\n pressed and released over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseClicked(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":623,"description":"

              Calls a function when the mouse moves over the element.

              \n

              Calling myElement.mouseMoved(false) disables the function.

              \n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves.\n cnv.mouseMoved(randomColor);\n\n describe('A gray square changes color when the mouse moves over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":665,"description":"

              Calls a function when the mouse moves onto the element.

              \n

              Calling myElement.mouseOver(false) disables the function.

              \n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves onto the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves onto the canvas.\n cnv.mouseOver(randomColor);\n\n describe('A gray square changes color when the mouse moves onto the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":707,"description":"

              Calls a function when the mouse moves off the element.

              \n

              Calling myElement.mouseOut(false) disables the function.

              \n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"

              function to call when the mouse\n moves off the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves off the canvas.\n cnv.mouseOut(randomColor);\n\n describe('A gray square changes color when the mouse moves off the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":749,"description":"

              Calls a function when the element is touched.

              \n

              Calling myElement.touchStarted(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"

              function to call when the touch\n starts.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas.\n cnv.touchStarted(randomColor);\n\n describe('A gray square changes color when the user touches the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":793,"description":"

              Calls a function when the user touches the element and moves.

              \n

              Calling myElement.touchMoved(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"

              function to call when the touch\n moves over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas\n // and moves.\n cnv.touchMoved(randomColor);\n\n describe('A gray square changes color when the user touches the canvas and moves.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":837,"description":"

              Calls a function when the user stops touching the element.

              \n

              Calling myElement.touchMoved(false) disables the function.

              \n

              Note: Touch functions only work on mobile devices.

              \n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"

              function to call when the touch\n ends.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas,\n // then lifts their finger.\n cnv.touchEnded(randomColor);\n\n describe('A gray square changes color when the user touches the canvas, then lifts their finger.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":881,"description":"

              Calls a function when a file is dragged over the element.

              \n

              Calling myElement.dragOver(false) disables the function.

              \n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"

              function to call when the file is\n dragged over the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\n// Drag a file over the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call helloFile() when a\n // file is dragged over\n // the canvas.\n cnv.dragOver(helloFile);\n\n describe('A gray square. The text \"hello, file\" appears when a file is dragged over the square.');\n}\n\nfunction helloFile() {\n text('hello, file', 50, 50);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":923,"description":"

              Calls a function when a file is dragged off the element.

              \n

              Calling myElement.dragLeave(false) disables the function.

              \n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"

              function to call when the file is\n dragged off the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\n// Drag a file over, then off\n// the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call byeFile() when a\n // file is dragged over,\n // then off the canvas.\n cnv.dragLeave(byeFile);\n\n describe('A gray square. The text \"bye, file\" appears when a file is dragged over, then off the square.');\n}\n\nfunction byeFile() {\n text('bye, file', 50, 50);\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":1015,"description":"

              Helper fxn for sharing pixel methods

              \n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":83,"description":"

              Resets certain values such as those modified by functions in the Transform category\nand in the Lights category that are not automatically reset\nwith graphics buffer objects. Calling this in draw() will copy the behavior\nof the standard canvas.

              \n","itemtype":"method","name":"reset","example":["\n\n
              \nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n background(0);\n pg = createGraphics(50, 100);\n pg.fill(0);\n frameRate(5);\n}\n\nfunction draw() {\n image(pg, width / 2, 0);\n pg.background(255);\n // p5.Graphics object behave a bit differently in some cases\n // The normal canvas on the left resets the translate\n // with every loop through draw()\n // the graphics object on the right doesn't automatically reset\n // so translate() is additive and it moves down the screen\n rect(0, 0, width / 2, 5);\n pg.rect(0, 0, width / 2, 5);\n translate(0, 5, 0);\n pg.translate(0, 5, 0);\n}\nfunction mouseClicked() {\n // if you click you will see that\n // reset() resets the translate back to the initial state\n // of the Graphics object\n pg.reset();\n}\n
              "],"alt":"A white line on a black background stays still on the top-left half.\nA black line animates from top to bottom on a white background on the right half.\nWhen clicked, the black line starts back over at the top.","class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Graphics.js","line":135,"description":"

              Removes a Graphics object from the page and frees any resources\nassociated with it.

              \n","itemtype":"method","name":"remove","example":["\n
              \nlet bg;\nfunction setup() {\n bg = createCanvas(100, 100);\n bg.background(0);\n image(bg, 0, 0);\n bg.remove();\n}\n
              \n\n
              \nlet bg;\nfunction setup() {\n pixelDensity(1);\n createCanvas(100, 100);\n stroke(255);\n fill(0);\n\n // create and draw the background image\n bg = createGraphics(100, 100);\n bg.background(200);\n bg.ellipse(50, 50, 80, 80);\n}\nfunction draw() {\n let t = millis() / 1000;\n // draw the background\n if (bg) {\n image(bg, frameCount % 100, 0);\n image(bg, frameCount % 100 - 100, 0);\n }\n // draw the foreground\n let p = p5.Vector.fromAngle(t, 35).add(50, 50);\n ellipse(p.x, p.y, 30);\n}\nfunction mouseClicked() {\n // remove the background\n if (bg) {\n bg.remove();\n bg = null;\n }\n}\n
              "],"alt":"no image\na multi-colored circle moving back and forth over a scrolling background.","class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Graphics.js","line":203,"description":"

              Creates and returns a new p5.Framebuffer\ninside a p5.Graphics WebGL context.

              \n

              This takes the same parameters as the global\ncreateFramebuffer function.

              \n","itemtype":"method","name":"createFramebuffer","return":{"description":"","type":"p5.Framebuffer"},"class":"p5.Graphics","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":120,"description":"

              Resize our canvas element.

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":468,"description":"

              Helper function to check font type (system or otf)

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":520,"description":"

              Helper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178

              \n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":6,"description":"

              p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer

              \n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":535,"description":"

              Generate a cubic Bezier representing an arc on the unit circle of total\nangle size radians, beginning start radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.

              \n

              See ecridge.com/bezier.pdf for an explanation of the method.

              \n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":7,"description":"

              Declares a new variable.

              \n

              A variable is a container for a value. For example, a variable might\ncontain a creature's x-coordinate as a Number or its name as a\nString. Variables can change value by reassigning them as follows:

              \n\n// Declare the variable x and assign it the value 10.\nlet x = 10;\n\n

              // Reassign x to 50.\nx = 50;\n

              \n

              Variables have block scope. When a variable is declared between curly\nbraces {}, it only exists within the block defined by those braces. For\nexample, the following code would throw a ReferenceError because x is\ndeclared within the setup() function's block:

              \n\nfunction setup() {\n createCanvas(100, 100);\n\n

              let x = 50;\n}

              \n

              function draw() {\n background(200);

              \n

              // x was declared in setup(), so it can't be referenced here.\n circle(x, 50, 20);\n}\n

              \n

              Variables declared outside of all curly braces {} are in the global\nscope. A variable that's in the global scope can be used and changed\nanywhere in a sketch:

              \n\nlet x = 50;\n\n

              function setup() {\n createCanvas(100, 100);\n}

              \n

              function draw() {\n background(200);

              \n

              // Change the value of x.\n x += 10;

              \n

              circle(x, 50, 20);\n}\n

              \n","itemtype":"property","name":"let","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, 🌍!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n\n
              \n\n
              \n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":110,"description":"

              A way to choose whether to run a block of code.

              \n

              if statements are helpful for running a block of code based on a\ncondition. For example, an if statement makes it easy to express the\nidea \"Draw a circle if the mouse is pressed.\":

              \n\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

              The statement header begins with the keyword if. The expression in\nparentheses mouseIsPressed === true is a Boolean expression that's\neither true or false. The code between the curly braces {} is the if\nstatement's body. The body only runs if the Boolean expression is true.

              \n

              The mouseIsPressed system variable is\nalways true or false, so the code snippet above could also be written\nas follows:

              \n\nif (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

              An if-else statement adds a block of code that runs if the Boolean\nexpression is false. For example, here's an if-else statement that\nexpresses the idea \"Draw a circle if the mouse is pressed. Otherwise,\ndisplay a message.\":

              \n\nif (mouseIsPressed === true) {\n // When true.\n circle(mouseX, mouseY, 20);\n} else {\n // When false.\n text('Click me!', 50, 50);\n}\n\n\n

              There are two possible paths, or branches, in this code snippet. The\nprogram must follow one branch or the other.

              \n

              An else-if statement makes it possible to add more branches.\nelse-if statements run different blocks of code under different\nconditions. For example, an else-if statement makes it easy to express\nthe idea \"If the mouse is on the left, paint the canvas white. If the mouse\nis in the middle, paint the canvas gray. Otherwise, paint the canvas\nblack.\":

              \n\nif (mouseX < 33) {\n background(255);\n} else if (mouseX < 67) {\n background(200);\n} else {\n background(0);\n}\n\n\n

              if statements can add as many else-if statements as needed. However,\nthere can only be one else statement and it must be last.

              \n

              if statements can also check for multiple conditions at once. For\nexample, the Boolean operator && (AND) checks whether two expressions\nare both true:

              \n\nif (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n\n\n

              If the user is pressing a key AND that key is 'p', then a message will\ndisplay.

              \n

              The Boolean operator || (OR) checks whether at least one of two\nexpressions is true:

              \n\nif (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n\n\n

              If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.

              \n

              The body of an if statement can contain another if statement. This is\ncalled a \"nested if statement.\" For example, nested if statements make\nit easy to express the idea \"If a key is pressed, then check if the key is\n'r'. If it is, then set the fill to red.\":

              \n\nif (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n}\n\n\n

              See Boolean and Number\nto learn more about these data types and the operations they support.

              \n","itemtype":"property","name":"if","example":["\n
              \n\n// Click the mouse to show the circle.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
              \n\n
              \n\n// Click the mouse to show different shapes.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(50, 50, 20);\n } else {\n ellipse(50, 50, 20, 50);\n }\n}\n\n
              \n\n
              \n\n// Move the mouse to change the background color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A square changes color from white to black as the user moves the mouse from left to right.'\n );\n}\n\nfunction draw() {\n if (mouseX < 33) {\n background(255);\n } else if (mouseX < 67) {\n background(200);\n } else {\n background(0);\n }\n}\n\n
              \n\n
              \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The circle changes color to red when the user presses the \"r\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n }\n\n circle(50, 50, 40);\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":317,"description":"

              A named group of statements.

              \n

              Functions\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":

              \n\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n

              // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n

              \n

              The function header begins with the keyword function. The function's\nname, drawFlower, is followed by parentheses () and curly braces {}.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:

              \n\ndrawFlower();\n\n\n

              Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the drawFlower() function could include\na parameter for the flower's size:

              \n\nfunction drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n

              // Use the size parameter.\n textSize(size);

              \n

              // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n

              \n

              Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:

              \n\n// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n\n\n

              Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the drawFlower() function could accept\nNumber parameters for the flower's x- and y-coordinates along with its\nsize:

              \n\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n

              // Use the size parameter.\n textSize(size);

              \n

              // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n

              \n

              Functions can also produce outputs by adding a return statement:

              \n\nfunction double(x) {\n let answer = 2 * x;\n return answer;\n}\n\n\n

              The expression following return can produce an output that's used\nelsewhere. For example, the output of the double() function can be\nassigned to a variable:

              \n\nlet six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n","itemtype":"property","name":"function","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, 🌍!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('🌍');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":502,"description":"

              A value that's either true or false.

              \n

              Boolean values help to make decisions in code. They appear any time a\nlogical condition is checked. For example, the condition\n\"Is a mouse button being pressed?\" must be either true or\nfalse:

              \n\n// If the user presses the mouse, draw a circle at\n// the mouse's location.\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

              The if statement checks whether\nmouseIsPressed is true and draws a\ncircle if it is. Boolean expressions such as mouseIsPressed === true\nevaluate to one of the two possible Boolean values: true or false.

              \n

              The === operator (EQUAL) checks whether two values are equal. If they\nare, the expression evaluates to true. Otherwise, it evaluates to\nfalse.

              \n

              Note: There's also a == operator with two = instead of three. Don't use\nit.

              \n

              The mouseIsPressed system variable is\nalways true or false, so the code snippet above could also be written\nas follows:

              \n\nif (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n\n\n

              The !== operator (NOT EQUAL) checks whether two values are not equal, as\nin the following example:

              \n\nif (2 + 2 !== 4) {\n text('War is peace.', 50, 50);\n}\n\n\n

              Starting from the left, the arithmetic expression 2 + 2 produces the\nvalue 4. The Boolean expression 4 !== 4 evaluates to false because\n4 is equal to itself. As a result, the if statement's body is skipped.

              \n

              Note: There's also a != operator with one = instead of two. Don't use\nit.

              \n

              The Boolean operator && (AND) checks whether two expressions are both\ntrue:

              \n\nif (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n\n\n

              If the user is pressing a key AND that key is 'p', then a message will\ndisplay.

              \n

              The Boolean operator || (OR) checks whether at least one of two\nexpressions is true:

              \n\nif (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n\n\n

              If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.

              \n

              The following truth table summarizes a few common scenarios with && and\n||:

              \n\ntrue && true // true\ntrue && false // false\nfalse && false // false\ntrue || true // true\ntrue || false // true\nfalse || false // true\n\n\n

              The relational operators >, <, >=, and <= also produce Boolean\nvalues:

              \n\n2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n\n\n

              See Number for more information about Numbers.

              \n","itemtype":"property","name":"Boolean","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n\n
              \n\n
              \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square that turns pink when the user presses the mouse or a key.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, change the background color.\n if (mouseIsPressed === true || keyIsPressed === true) {\n background('deeppink');\n }\n}\n\n
              \n\n\n
              \n// Click the canvas to begin detecting key presses.\n\n// Create a Boolean variable.\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'The message \"Begin?\\nY or N\" written in green on a black background. The message \"Good luck!\" appears when they press the \"y\" key.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n fill(0, 255, 0);\n\n // Display a different message when the user begins playing.\n if (isPlaying === false) {\n text('Begin?', 50, 40);\n text('Y or N', 50, 60);\n } else {\n text('Good luck!', 50, 50);\n }\n}\n\n// Start playing when the user presses the 'y' key.\nfunction keyPressed() {\n if (key === 'y') {\n isPlaying = true;\n }\n}\n
              \n              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":709,"description":"

              A sequence of text characters.

              \n

              The String data type is helpful for working with text. For example, a\nstring could contain a welcome message:

              \n\n// Use a string literal.\ntext('Hello!', 10, 10);\n\n\n\n// Create a string variable.\nlet message = 'Hello!';\n\n

              // Use the string variable.\ntext(message, 10, 10);\n

              \n

              The most common way to create strings is to use some form of quotations as\nfollows:

              \n\ntext(\"hi\", 50, 50);\n\n\n\ntext('hi', 50, 50);\n\n\n\ntext(`hi`, 50, 50);\n\n\n

              \"hi\", 'hi', and hi are all string literals. A \"literal\" means a\nvalue was actually written, as in text('hi', 50, 50). By contrast,\ntext(message, 50, 50) uses the variable message, so it isn't a string\nliteral.

              \n

              Single quotes '' and double quotes \"\" mean the same thing. It's nice to\nhave the option for cases when a string contains one type of quote:

              \n\ntext(\"What's up?\", 50, 50);\n\n\n\ntext('Air quotes make you look \"cool.\"', 50, 50);\n\n\n

              Backticks ```` create template literals. Template literals have many uses.\nFor example, they can contain both single and double quotes as needed:

              \n\ntext(`\"Don't you forget about me\"`, 10, 10); \n\n\n

              Template literals are helpful when strings are created from variables like\nso:

              \n\nlet size = random(10, 20);\ncircle(50, 50, size);\n\n

              text(The circle's diameter is ${size} pixels., 10, 10);\n

              \n

              The size variable's value will replace ${size} when the string is\ncreated. ${} is a placeholder for any value. That means an expression can\nbe used, as in ${round(PI, 3)}. All of the following are valid template\nliterals:

              \n\ntext(`π is about ${round(PI, 2)} pixels.`, 10, 10);\ntext(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);\n\n\n

              Template literals can include several variables:

              \n\nlet x = random(0, 100);\nlet y = random(0, 100);\nlet size = random(10, 20);\ncircle(x, y, size);\n\n

              text(The circle at (${x}, ${y}) has a diameter of ${size} pixels., 10, 10);\n

              \n

              Template literals are also helpful for creating multi-line text like so:

              \n\nlet poem = `My sketch doesn't run;\nit waits for me patiently\nwhile bugs point the way.`;\n\n

              text(poem, 10, 10);\n

              \n","itemtype":"property","name":"String","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Display a welcome message.\n text('Hello!', 50, 50);\n\n describe('The text \"Hello!\" written on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Create a string variable.\n let world = '🌍';\n\n // Display a welcome message using a template string.\n text(`Hello, ${world}!`, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":852,"description":"

              A number that can be positive, negative, or zero.

              \n

              The Number data type is useful for describing values such as position,\nsize, and color. A number can be an integer such as 20 or a decimal number\nsuch as 12.34. For example, a circle's position and size can be described\nby three numbers:

              \n\ncircle(50, 50, 20);\n\n\n\ncircle(50, 50, 12.34);\n\n\n

              Numbers support basic arithmetic and follow the standard order of\noperations: Parentheses, Exponents, Multiplication, Division, Addition,\nand Subtraction (PEMDAS). For example, it's common to use arithmetic\noperators with p5.js' system variables that are numbers:

              \n\n// Draw a circle at the center.\ncircle(width / 2, height / 2, 20);\n\n\n\n// Draw a circle that moves from left to right.\ncircle(frameCount * 0.01, 50, 20);\n\n\n

              Here's a quick overview of the arithmetic operators:

              \n\n1 + 2 // Add\n1 - 2 // Subtract\n1 * 2 // Multiply\n1 / 2 // Divide\n1 % 2 // Remainder\n1 ** 2 // Exponentiate\n\n\n

              It's common to update a number variable using arithmetic. For example, an\nobject's location can be updated like so:

              \n\nx = x + 1;\n\n\n

              The statement above adds 1 to a variable x using the + operator. The\naddition assignment operator += expresses the same idea:

              \n\nx += 1;\n\n\n

              Here's a quick overview of the assignment operators:

              \n\nx += 2 // Addition assignment\nx -= 2 // Subtraction assignment\nx *= 2 // Multiplication assignment\nx /= 2 // Division assignment\nx %= 2 // Remainder assignment\n\n\n

              Numbers can be compared using the\nrelational operators\n>, <, >=, <=, ===, and !==. For example, a sketch's\nframeCount can be used as a timer:

              \n\nif (frameCount > 1000) {\n text('Game over!', 50, 50);\n}\n\n\n

              An expression such as frameCount > 1000 evaluates to a Boolean value\nthat's either true or false. The relational operators all produce\nBoolean values:

              \n\n2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n2 === 2 // true\n2 !== 2 // false\n\n\n

              See Boolean for more information about comparisons and conditions.

              \n

              Note: There are also == and != operators with one fewer =. Don't use them.

              \n

              Expressions with numbers can also produce special values when something\ngoes wrong:

              \n\nsqrt(-1) // NaN\n1 / 0 // Infinity\n\n\n

              The value NaN stands for\nNot-A-Number.\nNaN appears when calculations or conversions don't work. Infinity is a\nvalue that's larger than any number. It appears during certain\ncalculations.

              \n","itemtype":"property","name":"Number","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle at the center.\n circle(50, 50, 70);\n\n // Draw a smaller circle at the center.\n circle(width / 2, height / 2, 30);\n\n describe('Two concentric, white circles drawn on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle travels from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n circle(frameCount * 0.01, 50, 20);\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":998,"description":"

              A container for data that's stored as key-value pairs.

              \n

              Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.

              \n

              For example, an object could contain the location, size, and appearance of\na dog:

              \n\n// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '🐶' };\n\n

              // Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);

              \n

              // Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n

              \n

              The variable dog is assigned an object with four properties. Objects\nare declared with curly braces {}. Values can be accessed using the dot\noperator, as in dog.size. In the example above, the key size\ncorresponds to the value 20. Objects can also be empty to start:

              \n\n// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n

              // Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '🐱';

              \n

              // Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);

              \n

              // Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n

              \n

              An object's data can be updated while a sketch runs. For example, the cat\ncould run away from the dog by updating its location:

              \n\n// Run to the right.\ncat.x += 5;\n\n\n

              If needed, an object's values can be accessed using square brackets []\nand strings instead of dot notation:

              \n\n// Run to the right.\ncat[\"x\"] += 5;\n\n\n

              This syntax can be helpful when the key's name has spaces, as in\ncat['height (m)'].

              \n","itemtype":"property","name":"Object","example":["\n
              \n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n circle(data.x, data.y, data.d);\n}\n\n
              \n\n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n}\n\n\n
              \n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n\n // Update the object's x and y properties.\n data.x += random(-1, 1);\n data.y += random(-1, 1);\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":1137,"description":"

              A list that keeps several pieces of data in order.

              \n

              Arrays are helpful for storing related data. They can contain data of any\ntype. For example, an array could contain a list of someone's favorite\ncolors as strings. Arrays are created as follows:

              \n\nlet colors = ['deeppink', 'darkorchid', 'magenta'];\n\n\n

              Each piece of data in an array is called an element. Each element has an\naddress, or index, within its array. The variable colors refers to an\narray with three String> elements, 'deeppink',\n'darkorchid', and 'magenta'. Arrays are zero-indexed, which means\nthat 'deeppink' is at index 0, 'darkorchid' is at index 1, and\n'magenta' is at index 2. Array elements can be accessed using their\nindices as follows:

              \n\nlet zeroth = colors[0]; // 'deeppink'\nlet first = colors[1]; // 'darkorchid'\nlet second = colors[2]; // 'magenta'\n\n\n

              Elements can be added to the end of an array by calling the push()\nmethod as follows:

              \n\ncolors.push('lavender');\n\n

              let third = colors[3]; // 'lavender'\n

              \n

              See MDN\nfor more information about arrays.

              \n","itemtype":"property","name":"Array","example":["\n
              \n\n// Declare the variable xCoordinates and assign it an array\n// with three numeric elements.\nlet xCoordinates = [25, 50, 75];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Three white circles drawn in a horizontal line on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 25.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 50.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 75.\n circle(xCoordinates[2], 50, 20);\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an array with three numeric elements.\nlet xCoordinates = [20, 40, 60];\n\n// Add another element to the end of the array.\nxCoordinates.push(80);\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 20.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 40.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 60.\n circle(xCoordinates[2], 50, 20);\n\n // Access the element at index 3, which is 80.\n circle(xCoordinates[3], 50, 20);\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe(\n 'Four white circles in a horizontal line on a gray background. The circles move randomly.'\n );\n}\n\nfunction draw() {\n background(200);\n\n for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element at index i.\n xCoordinates[i] += random(-1, 1);\n\n // Use the element at index i to draw a circle.\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":1325,"description":"

              A template for creating objects of a particular type.

              \n

              Classes can make it easier to program with objects. For example, a Frog\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a Frog\nclass:

              \n\nlet fifi = new Frog(50, 50, 20);\n\n\n

              The variable fifi refers to an instance of the Frog class. The keyword\nnew is used to call the Frog class' constructor in the statement\nnew Frog(). Altogether, a new Frog object was created and assigned to\nthe variable fifi. Classes are templates, so they can be used to create\nmore than one instance:

              \n\n// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n

              // Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n

              \n

              A simple Frog class could be declared as follows:

              \n\nclass Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n

              show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }

              \n

              hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}\n

              \n

              Class declarations begin with the keyword class followed by the class\nname, such as Frog, and curly braces {}. Class names should use\nPascalCase and can't have spaces in their names. For example, naming a\nclass Kermit The Frog with spaces between each word would throw a\nSyntaxError. The code between the curly braces {} defines the class.

              \n

              Functions that belong to a class are called methods. constructor(),\nshow(), and hop() are methods in the Frog class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the function keyword.

              \n

              constructor() is a special method that's called once when an instance of\nthe class is created. The statement new Frog() calls the Frog class'\nconstructor() method.

              \n

              A class definition is a template for instances. The keyword this refers\nto an instance's data and methods. For example, each Frog instance has\nunique coordinates stored in this.x and this.y. The show() method\nuses those coordinates to draw the frog. The hop() method updates those\ncoordinates when called. Once a Frog instance is created, its data and\nmethods can be accessed using the dot operator . as follows:

              \n\n// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n

              // Show the Frog.\nfifi.show();

              \n

              // Hop.\nfifi.hop();\n

              \n","itemtype":"property","name":"class","example":["\n
              \n\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
              \n\n
              \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
              \n\n
              \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a gray background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n\n
              \n\n
              \n\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a gray background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n\n
              \n\n
              \n\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a gray background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":1684,"description":"

              A way to repeat a block of code when the number of iterations is known.

              \n

              for loops are helpful for repeating statements a certain number of times.\nFor example, a for loop makes it easy to express the idea\n\"draw five lines\" like so:

              \n\nfor (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n}\n\n\n

              The loop's header begins with the keyword for. Loops generally count up\nor count down as they repeat, or iterate. The statements in parentheses\nlet x = 10; x < 100; x += 20 tell the loop how it should repeat:

              \n
                \n
              • let x = 10 tells the loop to start counting at 10 and keep track of iterations using the variable x.
                • \n
              • x < 100 tells the loop to count up to, but not including, 100.
                • \n
              • x += 20 tells the loop to count up by 20 at the end of each iteration.
                • \n
              \n

              The code between the curly braces {} is the loop's body. Statements in the\nloop body are repeated during each iteration of the loop.

              \n

              It's common to create infinite loops accidentally. When this happens,\nsketches may become unresponsive and the web browser may display a warning.\nFor example, the following loop never stops iterating because it doesn't\ncount up:

              \n\nfor (let x = 10; x < 100; x = 20) {\n line(x, 25, x, 75);\n}\n\n\n

              The statement x = 20 keeps the variable x stuck at 20, which is\nalways less than 100.

              \n

              for loops can also count down:

              \n\nfor (let d = 100; d > 0; d -= 10) {\n circle(50, 50, d);\n}\n\n\n

              for loops can also contain other loops. The following nested loop draws a\ngrid of points:

              \n\n// Loop from left to right.\nfor (let x = 10; x < 100; x += 10) {\n\n

              // Loop from top to bottom.\n for (let y = 10; y < 100; y += 10) {\n point(x, y);\n }

              \n

              }\n

              \n

              for loops are also helpful for iterating through the elements of an\narray. For example, it's common to iterate through an array that contains\ninformation about where or what to draw:

              \n\n// Create an array of x-coordinates.\nlet xCoordinates = [20, 40, 60];\n\n

              for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element.\n xCoordinates[i] += random(-1, 1);

              \n

              // Draw a circle.\n circle(xCoordinates[i], 50, 20);\n}\n

              \n

              If the array's values aren't modified, the for...of statement can\nsimplify the code. They're similar to for loops in Python and for-each\nloops in C++ and Java. The following loops have the same effect:

              \n\n// Draw circles with a for loop.\nlet xCoordinates = [20, 40, 60];\n\n

              for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n}\n

              \n\n// Draw circles with a for...of statement.\nlet xCoordinates = [20, 40, 60];\n\n

              for (let x of xCoordinates) {\n circle(x, 50, 20);\n}\n

              \n

              In the code snippets above, the variables i and x have different roles.

              \n

              In the first snippet, i counts from 0 up to 2, which is one less than\nxCoordinates.length. i is used to access the element in xCoordinates\nat index i.

              \n

              In the second code snippet, x isn't keeping track of the loop's progress\nor an index. During each iteration, x contains the next element of\nxCoordinates. x starts from the beginning of xCoordinates (20) and\nupdates its value to 40 and then 60 during the next iterations.

              \n","itemtype":"property","name":"for","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw vertical lines using a loop.\n for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five white concentric circles drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw concentric circles using a loop.\n for (let d = 100; d > 0; d -= 20) {\n circle(50, 50, d);\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A grid of black dots on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the spacing for points on the grid.\n let space = 10;\n\n // Increase the stroke weight.\n strokeWeight(3);\n\n // Loop from the left to the right.\n for (let x = space; x < 100; x += space) {\n // Loop from the top to the bottom.\n for (let y = space; y < 100; y += space) {\n point(x, y);\n }\n }\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n\n
              \n\n
              \n\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":1908,"description":"

              A way to repeat a block of code.

              \n

              while loops are helpful for repeating statements while a condition is\ntrue. They're like if statements that repeat. For example, a while\nloop makes it easy to express the idea \"draw several lines\" like so:

              \n\n// Declare a variable to keep track of iteration.\nlet x = 10;\n\n

              // Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);

              \n

              // Increment by 20.\n x += 20;\n}\n

              \n

              The loop's header begins with the keyword while. Loops generally count up\nor count down as they repeat, or iterate. The statement in parentheses\nx < 100 is a condition the loop checks each time it iterates. If the\ncondition is true, the loop runs the code between the curly braces {},\nThe code between the curly braces is called the loop's body. If the\ncondition is false, the body is skipped and the loop is stopped.

              \n

              It's common to create infinite loops accidentally. For example, the\nfollowing loop never stops iterating because it doesn't count up:

              \n\n// Declare a variable to keep track of iteration.\nlet x = 10;\n\n

              // Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n}

              \n

              // This should be in the loop's body!\nx += 20;\n

              \n

              The statement x += 20 appears after the loop's body. That means the\nvariable x is stuck at 10, which is always less than 100.

              \n

              while loops are useful when the number of iterations isn't known in\nadvance. For example, concentric circles could be drawn at random\nincrements:

              \n\nlet d = 100;\nlet minSize = 5;\n\n

              while (d > minSize) {\n circle(50, 50, d);\n d -= random(10);\n}\n

              \n","itemtype":"property","name":"while","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Declare a variable to keep track of iteration.\n let x = 10;\n\n // Repeat as long as x < 100\n while (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20\n }\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n \"A gray square with several concentric circles at the center. The circles' sizes decrease at random increments.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n let d = 100;\n let minSize = 5;\n\n while (d > minSize) {\n circle(50, 50, d);\n d -= random(5, 15);\n }\n}\n\n
              "],"class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":2024,"description":"

              Prints a message to the web browser's console.

              \n

              The console\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a console.log() statement while studying how a section of\ncode works:

              \n\nif (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n

              // Game logic.\n}\n

              \n

              console.error() is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:

              \n\n// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n

              // Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n

              \n","params":[{"name":"message","description":"

              message to print to the console.

              \n","type":"String|Expression|Object"}],"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Prints \"Hello!\" to the console.\n console.log('Hello!');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Try to load an image from a fake URL.\n // Call handleError() if the image fails to load.\n loadImage('https://example.com/cat.jpg', handleImage, handleError);\n}\n\n// Displays the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('A cat on a gray background.');\n}\n\n// Prints the error.\nfunction handleError(error) {\n console.error('Oops!', error);\n\n describe('A gray square.');\n}\n\n
              "],"class":"console","module":"Foundation","submodule":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"

              Creates a canvas element in the document and sets its dimensions\nin pixels. This method should be called only once at the start of setup().\nCalling createCanvas more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use createGraphics()\n(hidden by default but it can be shown).

              \n

              Important note: in 2D mode (i.e. when p5.Renderer is not set) the origin (0,0)\nis positioned at the top left of the screen. In 3D mode (i.e. when p5.Renderer\nis set to WEBGL), the origin is positioned at the center of the canvas.\nSee this issue for more information.

              \n

              A WebGL canvas will use a WebGL2 context if it is supported by the browser.\nCheck the webglVersion property to check what\nversion is being used, or call setAttributes({ version: 1 })\nto create a WebGL1 context.

              \n

              The system variables width and height are set by the parameters passed to this\nfunction. If createCanvas() is not used, the\nwindow will be given a default size of 100×100 pixels.

              \n

              Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('').\nIf specified, avoid using setAttributes() afterwards, as this will remove and recreate the existing canvas.

              \n

              For more ways to position the canvas, see the\n\npositioning the canvas wiki page.

              \n","itemtype":"method","name":"createCanvas","return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 50);\n background(153);\n line(0, 0, width, height);\n}\n\n
              "],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":15,"params":[{"name":"w","description":"

              width of the canvas

              \n","type":"Number"},{"name":"h","description":"

              height of the canvas

              \n","type":"Number"},{"name":"renderer","description":"

              either P2D or WEBGL

              \n","type":"Constant","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}],"return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"}},{"line":64,"params":[{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"canvas","description":"","type":"HTMLCanvasElement","optional":true}],"return":{"description":"pointer to p5.Renderer holding canvas","type":"p5.Renderer"}}]},{"file":"src/core/rendering.js","line":166,"description":"

              Resizes the canvas to given width and height. The canvas will be cleared\nand draw will be called immediately, allowing the sketch to re-render itself\nin the resized canvas.

              \n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"

              width of the canvas

              \n","type":"Number"},{"name":"h","description":"

              height of the canvas

              \n","type":"Number"},{"name":"noRedraw","description":"

              don't redraw the canvas immediately

              \n","type":"Boolean","optional":true}],"example":["\n
              \nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
              "],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":232,"description":"

              Removes the default canvas for a p5 sketch that doesn't require a canvas

              \n","itemtype":"method","name":"noCanvas","example":["\n
              \n\nfunction setup() {\n noCanvas();\n}\n\n
              "],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":253,"description":"

              Creates and returns a new p5.Graphics object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.

              \n

              A WebGL p5.Graphics will use a WebGL2 context if it is supported by the browser.\nCheck the pg.webglVersion property of the renderer\nto check what version is being used, or call pg.setAttributes({ version: 1 })\nto create a WebGL1 context.

              \n

              Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('').\nBy default this canvas will be hidden (offscreen buffer), to make visible, set element's style to display:block;

              \n","itemtype":"method","name":"createGraphics","return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n
              \n\nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n pg = createGraphics(100, 100);\n}\n\nfunction draw() {\n background(200);\n pg.background(100);\n pg.noStroke();\n pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\n image(pg, 50, 50);\n image(pg, 0, 0, 50, 50);\n}\n\n
              "],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":253,"params":[{"name":"w","description":"

              width of the offscreen graphics buffer

              \n","type":"Number"},{"name":"h","description":"

              height of the offscreen graphics buffer

              \n","type":"Number"},{"name":"renderer","description":"

              either P2D or WEBGL\n undefined defaults to p2d

              \n","type":"Constant","optional":true},{"name":"canvas","description":"

              existing html canvas element

              \n","type":"HTMLCanvasElement","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"}},{"line":296,"params":[{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"canvas","description":"","type":"HTMLCanvasElement","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"}}]},{"file":"src/core/rendering.js","line":304,"description":"

              args[0] is expected to be renderer\nargs[1] is expected to be canvas

              \n","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":316,"description":"

              Creates and returns a new p5.Framebuffer, a\nhigh-performance WebGL object that you can draw to and then use as a texture.

              \n

              Options can include:

              \n
                \n
              • format: The data format of the texture, either UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. The default is UNSIGNED_BYTE.
                • \n
              • channels: What color channels to store, either RGB or RGBA. The default is to match the channels in the main canvas (with alpha unless disabled with setAttributes.)
                • \n
              • depth: A boolean, whether or not to include a depth buffer. Defaults to true.
                • \n
              • depthFormat: The data format for depth information, either UNSIGNED_INT or FLOAT. The default is FLOAT if available, or UNSIGNED_INT otherwise.
                • \n
              • stencil: A boolean, whether or not to include a stencil buffer, which can be used for masking. This may only be used if also using a depth buffer. Defaults to the value of depth, which is true if not provided.
                • \n
              • antialias: Boolean or Number, whether or not to render with antialiased edges, and if so, optionally the number of samples to use. Defaults to whether or not the main canvas is antialiased, using a default of 2 samples if so. Antialiasing is only supported when WebGL 2 is available.
                • \n
              • width: The width of the texture. Defaults to matching the main canvas.
                • \n
              • height: The height of the texture. Defaults to matching the main canvas.
                • \n
              • density: The pixel density of the texture. Defaults to the pixel density of the main canvas.
                • \n
              • textureFiltering: Either LINEAR (nearby pixels will be interpolated when reading values from the color texture) or NEAREST (no interpolation.) Generally, use LINEAR when using the texture as an image, and use NEAREST if reading the texture as data. Defaults to LINEAR.
                • \n
              \n

              If width, height, or density are specified, then the framebuffer will\nkeep that size until manually changed. Otherwise, it will be autosized, and\nit will update to match the main canvas's size and density when the main\ncanvas changes.

              \n","itemtype":"method","name":"createFramebuffer","params":[{"name":"options","description":"

              An optional object with configuration

              \n","type":"Object","optional":true}],"return":{"description":"","type":"p5.Framebuffer"},"example":["\n
              \n\nlet prev, next;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n prev = createFramebuffer({ format: FLOAT });\n next = createFramebuffer({ format: FLOAT });\n noStroke();\n}\n\nfunction draw() {\n // Swap prev and next so that we can use the previous\n // frame as a texture when drawing the current frame\n [prev, next] = [next, prev];\n\n // Draw to the framebuffer\n next.begin();\n background(255);\n\n push();\n tint(255, 253);\n image(prev, -width/2, -height/2);\n // Make sure the image plane doesn't block you from seeing any part\n // of the scene\n clearDepth();\n pop();\n\n push();\n normalMaterial();\n translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(12);\n pop();\n next.end();\n\n image(next, -width/2, -height/2);\n}\n\n
              "],"alt":"A red, green, and blue box (using normalMaterial) moves and rotates around\nthe canvas, leaving a trail behind it that slowly grows and fades away.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":391,"description":"

              This makes the canvas forget how far from the camera everything that has\nbeen drawn was. Use this if you want to make sure the next thing you draw\nwill not draw behind anything that is already on the canvas.

              \n

              This is useful for things like feedback effects, where you want the previous\nframe to act like a background for the next frame, and not like a plane in\n3D space in the scene.

              \n

              This method is only available in WebGL mode. Since 2D mode does not have\n3D depth, anything you draw will always go on top of the previous content on\nthe canvas anyway.

              \n","itemtype":"method","name":"clearDepth","params":[{"name":"depth","description":"

              The value, between 0 and 1, to reset the depth to, where\n0 corresponds to a value as close as possible to the camera before getting\nclipped, and 1 corresponds to a value as far away from the camera as possible.\nThe default value is 1.

              \n","type":"Number","optional":true}],"example":["\n
              \n\nlet prev, next;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n prev = createFramebuffer({ format: FLOAT });\n next = createFramebuffer({ format: FLOAT });\n noStroke();\n}\n\nfunction draw() {\n // Swap prev and next so that we can use the previous\n // frame as a texture when drawing the current frame\n [prev, next] = [next, prev];\n\n // Draw to the framebuffer\n next.begin();\n background(255);\n\n push();\n tint(255, 253);\n image(prev, -width/2, -height/2);\n // Make sure the image plane doesn't block you from seeing any part\n // of the scene\n clearDepth();\n pop();\n\n push();\n normalMaterial();\n translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(12);\n pop();\n next.end();\n\n image(next, -width/2, -height/2);\n}\n\n
              "],"alt":"A red, green, and blue box (using normalMaterial) moves and rotates around\nthe canvas, leaving a trail behind it that slowly grows and fades away.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":461,"description":"

              Blends the pixels in the display window according to the defined mode.\nThere is a choice of the following modes to blend the source pixels (A)\nwith the ones of pixels already in the display window (B):

              \n
                \n
              • BLEND - linear interpolation of colours: C =\nA*factor + B. This is the default blending mode.
                • \n
              • ADD - sum of A and B
                • \n
              • DARKEST - only the darkest colour succeeds: C =\nmin(A*factor, B).
                • \n
              • LIGHTEST - only the lightest colour succeeds: C =\nmax(A*factor, B).
                • \n
              • DIFFERENCE - subtract colors from underlying image.\n(2D)
                • \n
              • EXCLUSION - similar to DIFFERENCE, but less\nextreme.
                • \n
              • MULTIPLY - multiply the colors, result will always be\ndarker.
                • \n
              • SCREEN - opposite multiply, uses inverse values of the\ncolors.
                • \n
              • REPLACE - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.
                • \n
              • REMOVE - removes pixels from B with the alpha strength of A.
                • \n
              • OVERLAY - mix of MULTIPLY and SCREEN\n. Multiplies dark values, and screens light values. (2D)
                • \n
              • HARD_LIGHT - SCREEN when greater than 50%\ngray, MULTIPLY when lower. (2D)
                • \n
              • SOFT_LIGHT - mix of DARKEST and\nLIGHTEST. Works like OVERLAY, but not as harsh. (2D)\n
                • \n
              • DODGE - lightens light tones and increases contrast,\nignores darks. (2D)
                • \n
              • BURN - darker areas are applied, increasing contrast,\nignores lights. (2D)
                • \n
              • SUBTRACT - remainder of A and B (3D)
                • \n
              \n\n

              (2D) indicates that this blend mode only works in the 2D renderer.
              \n(3D) indicates that this blend mode only works in the WEBGL renderer.

              \n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"

              blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT

              \n","type":"Constant"}],"example":["\n
              \n\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
              \n\n
              \n\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
              "],"alt":"translucent image thick red & blue diagonal rounded lines intersecting center\nThick red & blue diagonal rounded lines intersecting center. dark at overlap","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":545,"description":"

              The p5.js API provides a lot of functionality for creating graphics, but there is\nsome native HTML5 Canvas functionality that is not exposed by p5. You can still call\nit directly using the variable drawingContext, as in the example shown. This is\nthe equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');.\nSee this\n\nreference for the native canvas API for possible drawing functions you can call.

              \n","itemtype":"property","name":"drawingContext","example":["\n
              \n\nfunction setup() {\n drawingContext.shadowOffsetX = 5;\n drawingContext.shadowOffsetY = -5;\n drawingContext.shadowBlur = 10;\n drawingContext.shadowColor = 'black';\n background(200);\n ellipse(width / 2, height / 2, 50, 50);\n}\n\n
              "],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/structure.js","line":9,"description":"

              Stops p5.js from continuously executing the code within draw().\nIf loop() is called, the code in draw()\nbegins to run continuously again. If using noLoop()\nin setup(), it should be the last line inside the block.

              \n

              When noLoop() is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\nmousePressed() or\nkeyPressed(). Instead, use those functions to\ncall redraw() or loop(),\nwhich will run draw(), which can update the screen\nproperly. This means that when noLoop() has been\ncalled, no drawing can happen, and functions like saveFrames()\nor loadPixels() may not be used.

              \n

              Note that if the sketch is resized, redraw() will\nbe called to update the sketch, even after noLoop()\nhas been specified. Otherwise, the sketch would enter an odd state until\nloop() was called.

              \n

              Use isLooping() to check the current state of loop().

              \n","itemtype":"method","name":"noLoop","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n noLoop();\n}\n\nfunction draw() {\n line(10, 10, 90, 90);\n}\n\n
              \n\n
              \n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n noLoop();\n}\n\nfunction mouseReleased() {\n loop();\n}\n\n
              "],"alt":"113 pixel long line extending from top-left to bottom right of canvas.\nhorizontal line moves slowly from left. Loops but stops on mouse press.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":82,"description":"

              By default, p5.js loops through draw() continuously, executing the code within\nit. However, the draw() loop may be stopped by calling\nnoLoop(). In that case, the draw()\nloop can be resumed with loop().

              \n

              Avoid calling loop() from inside setup().

              \n

              Use isLooping() to check the current state of loop().

              \n","itemtype":"method","name":"loop","example":["\n
              \n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n loop();\n}\n\nfunction mouseReleased() {\n noLoop();\n}\n\n
              "],"alt":"horizontal line moves slowly from left. Loops but stops on mouse press.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":133,"description":"

              By default, p5.js loops through draw() continuously,\nexecuting the code within it. If the sketch is stopped with\nnoLoop() or resumed with loop(),\nisLooping() returns the current state for use within custom event handlers.

              \n","itemtype":"method","name":"isLooping","return":{"description":"","type":"Boolean"},"example":["\n
              \n\nlet checkbox, button, colBG, colFill;\n\nfunction setup() {\n createCanvas(100, 100);\n\n button = createButton('Colorize if loop()');\n button.position(0, 120);\n button.mousePressed(changeBG);\n\n checkbox = createCheckbox('loop()', true);\n checkbox.changed(checkLoop);\n\n colBG = color(0);\n colFill = color(255);\n}\n\nfunction changeBG() {\n if (isLooping()) {\n colBG = color(random(255), random(255), random(255));\n colFill = color(random(255), random(255), random(255));\n }\n}\n\nfunction checkLoop() {\n if (this.checked()) {\n loop();\n } else {\n noLoop();\n }\n}\n\nfunction draw() {\n background(colBG);\n fill(colFill);\n ellipse(frameCount % width, height / 2, 50);\n}\n\n
              "],"alt":"Ellipse moves slowly from left. Checkbox toggles loop()/noLoop().\nButton colorizes sketch if isLooping().","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":192,"description":"

              The push() function saves the current drawing style\nsettings and transformations, while pop() restores these\nsettings. Note that these functions are always used together. They allow you to\nchange the style and transformation settings and later return to what you had.\nWhen a new state is started with push(), it builds on\nthe current style and transform information. The push()\nand pop() functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)

              \n

              push() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().

              \n

              In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: setCamera(),\nambientLight(),\ndirectionalLight(),\npointLight(), texture(),\nspecularMaterial(),\nshininess(),\nnormalMaterial()\nand shader().

              \n","itemtype":"method","name":"push","example":["\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\ntranslate(50, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              \n\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              "],"alt":"Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":290,"description":"

              The push() function saves the current drawing style\nsettings and transformations, while pop() restores\nthese settings. Note that these functions are always used together. They allow\nyou to change the style and transformation settings and later return to what\nyou had. When a new state is started with push(), it\nbuilds on the current style and transform information. The push()\nand pop() functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)

              \n

              push() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().

              \n

              In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\nsetCamera(),\nambientLight(),\ndirectionalLight(),\npointLight(),\ntexture(),\nspecularMaterial(),\nshininess(),\nnormalMaterial() and\nshader().

              \n","itemtype":"method","name":"pop","example":["\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\ntranslate(50, 0);\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              \n\n
              \n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
              "],"alt":"Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":391,"description":"

              Executes the code within draw() one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by mousePressed()\nor keyPressed() occurs.

              \n

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

              \n

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

              \n

              In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.

              \n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"

              Redraw for n-times. The default value is 1.

              \n","type":"Integer","optional":true}],"example":["\n
              \nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n x += 1;\n redraw();\n}\n\n
              \n\n
              \n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x += 1;\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n redraw(5);\n}\n\n
              "],"alt":"black line on far left of canvas\nblack line on far left of canvas","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/structure.js","line":494,"description":"

              The p5() constructor enables you to activate \"instance mode\" instead of normal\n\"global mode\". This is an advanced topic. A short description and example is\nincluded below. Please see\n\nDan Shiffman's Coding Train video tutorial or this\ntutorial page\nfor more info.

              \n

              By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply ellipse(), fill(), etc. However, this\nmight be inconvenient if you are mixing with other JS libraries (synchronously or\nasynchronously) or writing long programs of your own. p5.js currently supports a\nway around this problem called \"instance mode\". In instance mode, all p5 functions\nare bound up in a single variable instead of polluting your global namespace.

              \n

              Optionally, you can specify a default container for the canvas and any other elements\nto append to with a second argument. You can give the ID of an element in your html,\nor an html node itself.

              \n

              Note that creating instances like this also allows you to have more than one p5 sketch on\na single web page, as they will each be wrapped up with their own set up variables. Of\ncourse, you could also use iframes to have multiple sketches in global mode.

              \n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"

              a function containing a p5.js sketch

              \n","type":"Object"},{"name":"node","description":"

              ID or pointer to HTML DOM node to contain sketch in

              \n","type":"String|Object"}],"example":["\n
              \nconst s = p => {\n let x = 100;\n let y = 100;\n\n p.setup = function() {\n p.createCanvas(700, 410);\n };\n\n p.draw = function() {\n p.background(0);\n p.fill(255);\n p.rect(x, y, 50, 50);\n };\n};\n\nnew p5(s); // invoke p5\n
              "],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"

              Applies a transformation matrix to the coordinate system.

              \n

              Transformations such as\ntranslate(),\nrotate(), and\nscale()\nuse matrix-vector multiplication behind the scenes. A table of numbers,\ncalled a matrix, encodes each transformation. The values in the matrix\nthen multiply each point on the canvas, which is represented by a vector.

              \n

              applyMatrix() allows for many transformations to be applied at once. See\nWikipedia\nand MDN\nfor more details about transformations.

              \n

              There are two ways to call applyMatrix() in two and three dimensions.

              \n

              In 2D mode, the parameters a, b, c, d, e, and f, correspond to\nelements in the following transformation matrix:

              \n
              \n

              \n
              \n

              The numbers can be passed individually, as in\napplyMatrix(2, 0, 0, 0, 2, 0). They can also be passed in an array, as in\napplyMatrix([2, 0, 0, 0, 2, 0]).

              \n

              In 3D mode, the parameters a, b, c, d, e, f, g, h, i,\nj, k, l, m, n, o, and p correspond to elements in the\nfollowing transformation matrix:

              \n

              \n

              The numbers can be passed individually, as in\napplyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1). They can\nalso be passed in an array, as in\napplyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]).

              \n

              By default, transformations accumulate. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\napplyMatrix() inside the draw() function won't\ncause shapes to transform continuously.

              \n","itemtype":"method","name":"applyMatrix","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n applyMatrix(1, 0, 0, 1, 50, 50);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n let m = [1, 0, 0, 1, 50, 50];\n applyMatrix(m);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n let angle = QUARTER_PI;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, sa, -sa, ca, 0, 0);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n applyMatrix(0.5, 0, 0, 0.5, 0, 0);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the shear factor.\n let angle = QUARTER_PI;\n let shearFactor = 1 / tan(HALF_PI - angle);\n\n // Shear the coordinate system along the x-axis.\n applyMatrix(1, 0, shearFactor, 1, 0, 0);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);\n\n // Draw a box.\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":11,"params":[{"name":"arr","description":"

              an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).

              \n","type":"Array"}],"chainable":1},{"line":206,"params":[{"name":"a","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"b","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"c","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"d","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"e","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"f","description":"

              an element of the transformation matrix.

              \n","type":"Number"}],"chainable":1},{"line":216,"params":[{"name":"a","description":"","type":"Number"},{"name":"b","description":"","type":"Number"},{"name":"c","description":"","type":"Number"},{"name":"d","description":"","type":"Number"},{"name":"e","description":"","type":"Number"},{"name":"f","description":"","type":"Number"},{"name":"g","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"h","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"i","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"j","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"k","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"l","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"m","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"n","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"o","description":"

              an element of the transformation matrix.

              \n","type":"Number"},{"name":"p","description":"

              an element of the transformation matrix.

              \n","type":"Number"}],"chainable":1}]},{"file":"src/core/transform.js","line":246,"description":"

              Clears all transformations applied to the coordinate system.

              \n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a red circle at the coordinates (25, 25).\n fill('blue');\n circle(25, 25, 20);\n\n // Clear all transformations.\n // The origin is now at the top-left corner.\n resetMatrix();\n\n // Draw a blue circle at the coordinates (25, 25).\n fill('red');\n circle(25, 25, 20);\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":289,"description":"

              Rotates the coordinate system.

              \n

              By default, the positive x-axis points to the right and the positive y-axis\npoints downward. The rotate() function changes this orientation by\nrotating the coordinate system about the origin. Everything drawn after\nrotate() is called will appear to be rotated.

              \n

              The first parameter, angle, is the amount to rotate. For example, calling\nrotate(1) rotates the coordinate system clockwise 1 radian which is\nnearly 57˚. rotate() interprets angle values using the current\nangleMode().

              \n

              The second parameter, axis, is optional. It's used to orient 3D rotations\nin WebGL mode. If a p5.Vector is passed, as in\nrotate(QUARTER_PI, myVector), then the coordinate system will rotate\nQUARTER_PI radians about myVector. If an array of vector components is\npassed, as in rotate(QUARTER_PI, [1, 0, 0]), then the coordinate system\nwill rotate QUARTER_PI radians about a vector with the components\n[1, 0, 0].

              \n

              By default, transformations accumulate. For example, calling rotate(1)\ntwice has the same effect as calling rotate(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nrotate(1) inside the draw() function won't cause\nshapes to spin.

              \n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"

              the angle of rotation, specified in radians\n or degrees, depending on current angleMode

              \n","type":"Number"},{"name":"axis","description":"

              (in 3d) the axis to rotate around

              \n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Rotate the coordinate system another 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(45);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotate(angle);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = createVector(1, 1, 0);\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = [1, 1, 0];\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":471,"description":"

              Rotates the coordinate system about the x-axis in WebGL mode.

              \n

              The parameter, angle, is the amount to rotate. For example, calling\nrotateX(1) rotates the coordinate system about the x-axis by 1 radian.\nrotateX() interprets angle values using the current\nangleMode().

              \n

              By default, transformations accumulate. For example, calling rotateX(1)\ntwice has the same effect as calling rotateX(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateX(1) inside the draw() function won't cause\nshapes to spin.

              \n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"

              angle of rotation in the current angleMode().

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(45);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateX(angle);\n\n // Draw a box.\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":607,"description":"

              Rotates the coordinate system about the y-axis in WebGL mode.

              \n

              The parameter, angle, is the amount to rotate. For example, calling\nrotateY(1) rotates the coordinate system about the y-axis by 1 radian.\nrotateY() interprets angle values using the current\nangleMode().

              \n

              By default, transformations accumulate. For example, calling rotateY(1)\ntwice has the same effect as calling rotateY(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateY(1) inside the draw() function won't cause\nshapes to spin.

              \n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"

              angle of rotation in the current angleMode().

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(45);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateY(angle);\n\n // Draw a box.\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":743,"description":"

              Rotates the coordinate system about the z-axis in WebGL mode.

              \n

              The parameter, angle, is the amount to rotate. For example, calling\nrotateZ(1) rotates the coordinate system about the z-axis by 1 radian.\nrotateZ() interprets angle values using the current\nangleMode().

              \n

              By default, transformations accumulate. For example, calling rotateZ(1)\ntwice has the same effect as calling rotateZ(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nrotateZ(1) inside the draw() function won't cause\nshapes to spin.

              \n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"

              angle of rotation in the current angleMode().

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(45);\n\n // Draw a box.\n box();\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateZ(angle);\n\n // Draw a box.\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":879,"description":"

              Scales the coordinate system.

              \n

              By default, shapes are drawn at their original scale. A rectangle that's 50\npixels wide appears to take up half the width of a 100 pixel-wide canvas.\nThe scale() function can shrink or stretch the coordinate system so that\nshapes appear at different sizes. There are two ways to call scale() with\nparameters that set the scale factor(s).

              \n

              The first way to call scale() uses numbers to set the amount of scaling.\nThe first parameter, s, sets the amount to scale each axis. For example,\ncalling scale(2) stretches the x-, y-, and z-axes by a factor of 2. The\nnext two parameters, y and z, are optional. They set the amount to\nscale the y- and z-axes. For example, calling scale(2, 0.5, 1) stretches\nthe x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and\nleaves the z-axis unchanged.

              \n

              The second way to call scale() uses a p5.Vector\nobject to set the scale factors. For example, calling scale(myVector)\nuses the x-, y-, and z-components of myVector to set the amount of\nscaling along the x-, y-, and z-axes. Doing so is the same as calling\nscale(myVector.x, myVector.y, myVector.z).

              \n

              By default, transformations accumulate. For example, calling scale(1)\ntwice has the same effect as calling scale(2) once. The\npush() and pop() functions\ncan be used to isolate transformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nscale(2) inside the draw() function won't cause\nshapes to grow continuously.

              \n","itemtype":"method","name":"scale","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n scale(0.5);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(0.5, 1.3);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Create a p5.Vector object.\n let v = createVector(0.5, 1.3);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(v);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n\n
              \n\n
              \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n box();\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis and\n // 2 along the z-axis.\n scale(0.5, 1.3, 2);\n\n // Draw the blue sphere.\n fill('blue');\n box();\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":879,"params":[{"name":"s","description":"

              amount to scale along the positive x-axis.

              \n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"

              amount to scale along the positive y-axis. Defaults to s.

              \n","type":"Number","optional":true},{"name":"z","description":"

              amount to scale along the positive z-axis. Defaults to y.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1040,"params":[{"name":"scales","description":"

              vector whose components should be used to scale.

              \n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":1070,"description":"

              Shears the x-axis so that shapes appear skewed.

              \n

              By default, the x- and y-axes are perpendicular. The shearX() function\ntransforms the coordinate system so that x-coordinates are translated while\ny-coordinates are fixed.

              \n

              The first parameter, angle, is the amount to shear. For example, calling\nshearX(1) transforms all x-coordinates using the formula\nx = x + y * tan(angle). shearX() interprets angle values using the\ncurrent angleMode().

              \n

              By default, transformations accumulate. For example, calling\nshearX(1) twice has the same effect as calling shearX(2) once. The\npush() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nshearX(1) inside the draw() function won't\ncause shapes to shear continuously.

              \n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"

              angle to shear by in the current angleMode().

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":1147,"description":"

              Shears the y-axis so that shapes appear skewed.

              \n

              By default, the x- and y-axes are perpendicular. The shearY() function\ntransforms the coordinate system so that y-coordinates are translated while\nx-coordinates are fixed.

              \n

              The first parameter, angle, is the amount to shear. For example, calling\nshearY(1) transforms all y-coordinates using the formula\ny = y + x * tan(angle). shearY() interprets angle values using the\ncurrent angleMode().

              \n

              By default, transformations accumulate. For example, calling\nshearY(1) twice has the same effect as calling shearY(2) once. The\npush() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\nshearY(1) inside the draw() function won't\ncause shapes to shear continuously.

              \n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"

              angle to shear by in the current angleMode().

              \n","type":"Number"}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":1224,"description":"

              Translates the coordinate system.

              \n

              By default, the origin (0, 0) is at the sketch's top-left corner in 2D\nmode and center in WebGL mode. The translate() function shifts the origin\nto a different position. Everything drawn after translate() is called\nwill appear to be shifted. There are two ways to call translate() with\nparameters that set the origin's position.

              \n

              The first way to call translate() uses numbers to set the amount of\ntranslation. The first two parameters, x and y, set the amount to\ntranslate along the positive x- and y-axes. For example, calling\ntranslate(20, 30) translates the origin 20 pixels along the x-axis and 30\npixels along the y-axis. The third parameter, z, is optional. It sets the\namount to translate along the positive z-axis. For example, calling\ntranslate(20, 30, 40) translates the origin 20 pixels along the x-axis,\n30 pixels along the y-axis, and 40 pixels along the z-axis.

              \n

              The second way to call translate() uses a\np5.Vector object to set the amount of\ntranslation. For example, calling translate(myVector) uses the x-, y-,\nand z-components of myVector to set the amount to translate along the x-,\ny-, and z-axes. Doing so is the same as calling\ntranslate(myVector.x, myVector.y, myVector.z).

              \n

              By default, transformations accumulate. For example, calling\ntranslate(10, 0) twice has the same effect as calling\ntranslate(20, 0) once. The push() and\npop() functions can be used to isolate\ntransformations within distinct drawing groups.

              \n

              Note: Transformations are reset at the beginning of the draw loop. Calling\ntranslate(10, 0) inside the draw() function won't\ncause shapes to move continuously.

              \n","itemtype":"method","name":"translate","chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw the red circle.\n fill('red');\n circle(0, 0, 40);\n\n // Translate the origin to the right.\n translate(25, 0);\n\n // Draw the blue circle.\n fill('blue');\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves slowly from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the x-coordinate.\n let x = frameCount * 0.2;\n\n // Translate the origin.\n translate(x, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector object.\n let v = createVector(50, 50);\n\n // Translate the origin by the vector.\n translate(v);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n sphere(10);\n\n // Translate the origin to the right.\n translate(30, 0, 0);\n\n // Draw the blue sphere.\n fill('blue');\n sphere(10);\n}\n\n
              "],"class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":1224,"params":[{"name":"x","description":"

              amount to translate along the positive x-axis.

              \n","type":"Number"},{"name":"y","description":"

              amount to translate along the positive y-axis.

              \n","type":"Number"},{"name":"z","description":"

              amount to translate along the positive z-axis.

              \n","type":"Number","optional":true}],"chainable":1},{"line":1395,"params":[{"name":"vector","description":"

              vector by which to translate.

              \n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"

              Stores a value in local storage under the key name.\n Local storage is saved in the browser and persists\n between browsing sessions and page reloads.\n The key can be the name of the variable but doesn't\n have to be. To retrieve stored items\n see getItem.\nSensitive data such as passwords or personal information\n should not be stored in local storage.

              \n","itemtype":"method","name":"storeItem","params":[{"name":"key","description":"","type":"String"},{"name":"value","description":"","type":"String|Number|Object|Boolean|p5.Color|p5.Vector"}],"example":["\n
              \n // Type to change the letter in the\n // center of the canvas.\n // If you reload the page, it will\n // still display the last key you entered\nlet myText;\nfunction setup() {\n createCanvas(100, 100);\n myText = getItem('myText');\n if (myText === null) {\n myText = '';\n }\n describe(`When you type the key name is displayed as black text on white background.\n If you reload the page, the last letter typed is still displaying.`);\n }\nfunction draw() {\n textSize(40);\n background(255);\n text(myText, width / 2, height / 2);\n }\nfunction keyPressed() {\n myText = key;\n storeItem('myText', myText);\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":99,"description":"

              Returns the value of an item that was stored in local storage\n using storeItem()

              \n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"

              name that you wish to use to store in local storage

              \n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n
              \n // Click the mouse to change\n // the color of the background\n // Once you have changed the color\n // it will stay changed even when you\n // reload the page.\nlet myColor;\nfunction setup() {\n createCanvas(100, 100);\n myColor = getItem('myColor');\n }\nfunction draw() {\n if (myColor !== null) {\n background(myColor);\n }\n describe(`If you click, the canvas changes to a random color.·\n If you reload the page, the canvas is still the color it was when the\n page was previously loaded.`);\n }\nfunction mousePressed() {\n myColor = color(random(255), random(255), random(255));\n storeItem('myColor', myColor);\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":173,"description":"

              Clears all local storage items set with storeItem()\n for the current domain.

              \n","itemtype":"method","name":"clearStorage","example":["\n
              \n \n function setup() {\n let myNum = 10;\n let myBool = false;\n storeItem('myNum', myNum);\n storeItem('myBool', myBool);\n print(getItem('myNum')); // logs 10 to the console\n print(getItem('myBool')); // logs false to the console\n clearStorage();\n print(getItem('myNum')); // logs null to the console\n print(getItem('myBool')); // logs null to the console\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":201,"description":"

              Removes an item that was stored with storeItem()

              \n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n
              \n \n function setup() {\n let myVar = 10;\n storeItem('myVar', myVar);\n print(getItem('myVar')); // logs 10 to the console\n removeItem('myVar');\n print(getItem('myVar')); // logs null to the console\n }\n
              "],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"

              Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.

              \n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n
              \n \n function setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n let anotherDictionary = createStringDict({ happy: 'coding' });\n print(anotherDictionary.hasKey('happy')); // logs true to console\n }\n
              "],"class":"p5","module":"Data","submodule":"Dictionary","overloads":[{"line":14,"params":[{"name":"key","description":"","type":"String"},{"name":"value","description":"","type":"String"}],"return":{"description":"","type":"p5.StringDict"}},{"line":37,"params":[{"name":"object","description":"

              object

              \n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"

              Creates a new instance of p5.NumberDict using the key-value pair\n or object you provide.

              \n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n
              \n \n function setup() {\n let myDictionary = createNumberDict(100, 42);\n print(myDictionary.hasKey(100)); // logs true to console\n let anotherDictionary = createNumberDict({ 200: 84 });\n print(anotherDictionary.hasKey(200)); // logs true to console\n }\n
              "],"class":"p5","module":"Data","submodule":"Dictionary","overloads":[{"line":48,"params":[{"name":"key","description":"","type":"Number"},{"name":"value","description":"","type":"Number"}],"return":{"description":"","type":"p5.NumberDict"}},{"line":71,"params":[{"name":"object","description":"

              object

              \n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":102,"description":"

              Returns the number of key-value pairs currently stored in the Dictionary.

              \n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(1, 10);\n myDictionary.create(2, 20);\n myDictionary.create(3, 30);\n print(myDictionary.size()); // logs 3 to the console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":123,"description":"

              Returns true if the given key exists in the Dictionary,\notherwise returns false.

              \n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"

              that you want to look up

              \n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":145,"description":"

              Returns the value stored at the given key.

              \n","itemtype":"method","name":"get","params":[{"name":"the","description":"

              key you want to access

              \n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n let myValue = myDictionary.get('p5');\n print(myValue === 'js'); // logs true to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":171,"description":"

              Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.

              \n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.set('p5', 'JS');\n myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":198,"description":"

              private helper function to handle the user passing in objects\nduring construction or calls to create()

              \n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":209,"description":"

              Creates a new key-value pair in the Dictionary.

              \n","itemtype":"method","name":"create","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":209,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":227,"params":[{"name":"obj","description":"

              key/value pair

              \n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":245,"description":"

              Removes all previously stored key-value pairs from the Dictionary.

              \n","itemtype":"method","name":"clear","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // prints 'true'\n myDictionary.clear();\n print(myDictionary.hasKey('p5')); // prints 'false'\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":266,"description":"

              Removes the key-value pair stored at the given key from the Dictionary.

              \n","itemtype":"method","name":"remove","params":[{"name":"key","description":"

              for the pair to remove

              \n","type":"Number|String"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n myDictionary.remove('p5');\n myDictionary.print();\n // above logs \"key: happy value: coding\" to console\n}\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":295,"description":"

              Logs the set of items currently stored in the Dictionary to the console.

              \n","itemtype":"method","name":"print","example":["\n
              \n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":319,"description":"

              Converts the Dictionary into a CSV file for local download.

              \n","itemtype":"method","name":"saveTable","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveTable('beatles');\n }\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":357,"description":"

              Converts the Dictionary into a JSON file for local download.

              \n","itemtype":"method","name":"saveJSON","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveJSON('beatles');\n }\n}\n\n
              "],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":388,"description":"

              private helper function to ensure that the user passed in valid\nvalues for the Dictionary type

              \n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":430,"description":"

              private helper function to ensure that the user passed in valid\nvalues for the Dictionary type

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":439,"description":"

              Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"add","params":[{"name":"Key","description":"

              for the value you wish to add to

              \n","type":"Number"},{"name":"Number","description":"

              to add to the value

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.add(2, 2);\n print(myDictionary.get(2)); // logs 7 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":466,"description":"

              Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"

              for the value you wish to subtract from

              \n","type":"Number"},{"name":"Number","description":"

              to subtract from the value

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.sub(2, 2);\n print(myDictionary.get(2)); // logs 3 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":489,"description":"

              Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"

              for value you wish to multiply

              \n","type":"Number"},{"name":"Amount","description":"

              to multiply the value by

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 4);\n myDictionary.mult(2, 2);\n print(myDictionary.get(2)); // logs 8 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":516,"description":"

              Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.

              \n","itemtype":"method","name":"div","params":[{"name":"Key","description":"

              for value you wish to divide

              \n","type":"Number"},{"name":"Amount","description":"

              to divide the value by

              \n","type":"Number"}],"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict(2, 8);\n myDictionary.div(2, 2);\n print(myDictionary.get(2)); // logs 4 to console.\n}\n
              \n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":543,"description":"

              private helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":567,"description":"

              Return the lowest number currently stored in the Dictionary.

              \n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let lowestValue = myDictionary.minValue(); // value is -10\n print(lowestValue);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":587,"description":"

              Return the highest number currently stored in the Dictionary.

              \n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let highestValue = myDictionary.maxValue(); // value is 3\n print(highestValue);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":607,"description":"

              private helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'

              \n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":629,"description":"

              Return the lowest key currently used in the Dictionary.

              \n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let lowestKey = myDictionary.minKey(); // value is 1.2\n print(lowestKey);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":649,"description":"

              Return the highest key currently used in the Dictionary.

              \n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n
              \n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let highestKey = myDictionary.maxKey(); // value is 4\n print(highestKey);\n}\n
              "],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"

              Searches the page for the first element that matches the given\nCSS selector string.

              \n

              The selector string can be an ID, class, tag name, or a combination.\nselect() returns a p5.Element object if it\nfinds a match and null if not.

              \n

              The second parameter, container, is optional. It specifies a container to\nsearch within. container can be CSS selector string, a\np5.Element object, or an\nHTMLElement object.

              \n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"

              CSS selector string of element to search for.

              \n","type":"String"},{"name":"container","description":"

              CSS selector string, p5.Element, or\n HTMLElement to search within.

              \n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"p5.Element containing the element.","type":"p5.Element|null"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n // Select the canvas by its tag.\n let cnv = select('canvas');\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Add a class attribute to the canvas.\n cnv.class('pinkborder');\n\n background(200);\n\n // Select the canvas by its class.\n cnv = select('.pinkborder');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Set the canvas' ID.\n cnv.id('mycanvas');\n\n background(200);\n\n // Select the canvas by its ID.\n cnv = select('#mycanvas');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":109,"description":"

              Searches the page for all elements that matches the given\nCSS selector string.

              \n

              The selector string can be an ID, class, tag name, or a combination.\nselectAll() returns an array of p5.Element\nobjects if it finds any matches and an empty array if none are found.

              \n

              The second parameter, container, is optional. It specifies a container to\nsearch within. container can be CSS selector string, a\np5.Element object, or an\nHTMLElement object.

              \n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"

              CSS selector string of element to search for.

              \n","type":"String"},{"name":"container","description":"

              CSS selector string, p5.Element, or\n HTMLElement to search within.

              \n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"array of p5.Elements containing any elements found.","type":"p5.Element[]"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create three buttons.\n createButton('1');\n createButton('2');\n createButton('3');\n\n // Select the buttons by their tag.\n let buttons = selectAll('button');\n\n // Position the buttons.\n for (let i = 0; i < 3; i += 1) {\n buttons[i].position(0, i * 30);\n }\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\".');\n}\n\n
              \n\n
              \n\nfunction setup() {\n // Create three buttons and position them.\n let b1 = createButton('1');\n b1.position(0, 0);\n let b2 = createButton('2');\n b2.position(0, 30);\n let b3 = createButton('3');\n b3.position(0, 60);\n\n // Add a class attribute to each button.\n b1.class('btn');\n b2.class('btn btn-pink');\n b3.class('btn');\n\n // Select the buttons by their class.\n let buttons = selectAll('.btn');\n let pinkButtons = selectAll('.btn-pink');\n\n // Style the selected buttons.\n buttons.forEach(setFont);\n pinkButtons.forEach(setColor);\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\". Buttons \"1\" and \"3\" are gray. Button \"2\" is pink.');\n}\n\n// Set a button's font to Comic Sans MS.\nfunction setFont(btn) {\n btn.style('font-family', 'Comic Sans MS');\n}\n\n// Set a button's background and font color.\nfunction setColor(btn) {\n btn.style('background', 'deeppink');\n btn.style('color', 'white');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":206,"description":"

              Helper function for select and selectAll

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":221,"description":"

              Helper function for getElement and getElements.

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":255,"description":"

              Removes all elements created by p5.js, including any event handlers.

              \n

              There are two exceptions:\ncanvas elements created by createCanvas()\nand p5.Render objects created by\ncreateGraphics().

              \n","itemtype":"method","name":"removeElements","example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place\n // it in the middle of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n describe('A gray square with the text \"p5*js\" written in its center. The text disappears when the mouse is pressed.');\n}\n\n// Remove all elements when the mouse is pressed.\nfunction mousePressed() {\n removeElements();\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a paragraph element and place\n // it at the top of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n // Create a slider element and place it\n // beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n describe('A gray square with the text \"p5*js\" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');\n}\n\nfunction draw() {\n // Use the slider value to change the background color.\n let g = slider.value();\n background(g);\n}\n\n// Remove all elements when the mouse is double-clicked.\nfunction doubleClicked() {\n removeElements();\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":329,"description":"

              Calls a function when the element changes.

              \n

              Calling myElement.changed(false) disables the function.

              \n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"

              function to call when the element changes.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nlet dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":404,"description":"

              Calls a function when the element receives input.

              \n

              myElement.input() is often used to with text inputs and sliders. Calling\nmyElement.input(false) disables the function.

              \n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"

              function to call when input is detected within\n the element.\n false disables the function.

              \n","type":"Function|Boolean"}],"chainable":1,"example":["\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":477,"description":"

              Helpers for create methods.

              \n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":490,"description":"

              Creates a <div></div> element.

              \n

              <div></div> elements are commonly used as containers for\nother elements.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <div></div>.

              \n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"

              inner HTML for the new <div></div> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and set its position.\n let div = createDiv('p5*js');\n div.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h3 element within the div.\n let div = createDiv('

              p5*js

              ');\n div.position(20, 5);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n              \n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":542,"description":"

              Creates a <p></p> element.

              \n

              <p></p> elements are commonly used for paragraph-length text.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <p></p>.

              \n","itemtype":"method","name":"createP","params":[{"name":"html","description":"

              inner HTML for the new <p></p> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its position.\n let p = createP('Tell me a story.');\n p.position(5, 0);\n\n describe('A gray square displaying the text \"Tell me a story.\" written in black.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":577,"description":"

              Creates a <span></span> element.

              \n

              <span></span> elements are commonly used as containers\nfor inline elements. For example, a <span></span>\ncan hold part of a sentence that's a\ndifferent style.

              \n

              The parameter html is optional. It accepts a string that sets the\ninner HTML of the new <span></span>.

              \n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"

              inner HTML for the new <span></span> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a span element and set its position.\n let span = createSpan('p5*js');\n span.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create a div element as a container.\n let div = createDiv();\n\n // Place the div at the center.\n div.position(25, 35);\n\n // Create a span element.\n let s1 = createSpan('p5');\n\n // Create a second span element.\n let s2 = createSpan('*');\n\n // Set the second span's font color.\n s2.style('color', 'deeppink');\n\n // Create a third span element.\n let s3 = createSpan('js');\n\n // Add all the spans to the container div.\n s1.parent(div);\n s2.parent(div);\n s3.parent(div);\n\n describe('A gray square with the text \"p5*js\" written in black at its center. The asterisk is pink.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":648,"description":"

              Creates an <img> element that can appear outside of the canvas.

              \n

              The first parameter, src, is a string with the path to the image file.\nsrc should be a relative path, as in 'assets/image.png', or a URL, as\nin 'https://example.com/image.png'.

              \n

              The second parameter, alt, is a string with the\nalternate text\nfor the image. An empty string '' can be used for images that aren't displayed.

              \n

              The third parameter, crossOrigin, is optional. It's a string that sets the\ncrossOrigin property\nof the image. Use 'anonymous' or 'use-credentials' to fetch the image\nwith cross-origin access.

              \n

              The fourth parameter, callback, is also optional. It sets a function to\ncall after the image loads. The new image is passed to the callback\nfunction as a p5.Element object.

              \n","itemtype":"method","name":"createImg","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n let img = createImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'The p5.js magenta asterisk.'\n );\n img.position(0, -10);\n\n describe('A gray square with a magenta asterisk in its center.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":648,"params":[{"name":"src","description":"

              relative path or URL for the image.

              \n","type":"String"},{"name":"alt","description":"

              alternate text for the image.

              \n","type":"String"}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":692,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"

              crossOrigin property to use when fetching the image.

              \n","type":"String","optional":true},{"name":"successCallback","description":"

              function to call once the image loads. The new image will be passed\n to the function as a p5.Element object.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":723,"description":"

              Creates an <a></a> element that links to another web page.

              \n

              The first parmeter, href, is a string that sets the URL of the linked\npage.

              \n

              The second parameter, html, is a string that sets the inner HTML of the\nlink. It's common to use text, images, or buttons as links.

              \n

              The third parameter, target, is optional. It's a string that tells the\nweb browser where to open the link. By default, links open in the current\nbrowser tab. Passing '_blank' will cause the link to open in a new\nbrowser tab. MDN describes a few\nother options.

              \n","itemtype":"method","name":"createA","params":[{"name":"href","description":"

              URL of linked page.

              \n","type":"String"},{"name":"html","description":"

              inner HTML of link element to display.

              \n","type":"String"},{"name":"target","description":"

              target where the new link should open,\n either '_blank', '_self', '_parent', or '_top'.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an anchor element that links to p5js.org.\n let a = createA('http://p5js.org/', 'p5*js');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n background(200);\n\n // Create an anchor tag that links to p5js.org.\n // Open the link in a new tab.\n let a = createA('http://p5js.org/', 'p5*js', '_blank');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":786,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":788,"description":"

              Creates a slider <input></input> element.

              \n

              Range sliders are useful for quickly selecting numbers from a given range.

              \n

              The first two parameters, min and max, are numbers that set the\nslider's minimum and maximum.

              \n

              The third parameter, value, is optional. It's a number that sets the\nslider's default value.

              \n

              The fourth parameter, step, is also optional. It's a number that sets the\nspacing between each value in the slider's range. Setting step to 0\nallows the slider to move smoothly from min to max.

              \n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"

              minimum value of the slider.

              \n","type":"Number"},{"name":"max","description":"

              maximum value of the slider.

              \n","type":"Number"},{"name":"value","description":"

              default value of the slider.

              \n","type":"Number","optional":true},{"name":"step","description":"

              size for each step in the slider's range.

              \n","type":"Number","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n slider = createSlider(0, 255);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n slider = createSlider(0, 255, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 50.\n slider = createSlider(0, 255, 0, 50);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 0 so that it moves smoothly.\n slider = createSlider(0, 255, 0, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":923,"description":"

              Creates a <button></button> element.

              \n

              The first parameter, label, is a string that sets the label displayed on\nthe button.

              \n

              The second parameter, value, is optional. It's a string that sets the\nbutton's value. See\nMDN\nfor more details.

              \n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"

              label displayed on the button.

              \n","type":"String"},{"name":"value","description":"

              value of the button.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and place it beneath the canvas.\n let button = createButton('click me');\n button.position(0, 100);\n\n // Call repaint() when the button is pressed.\n button.mousePressed(repaint);\n\n describe('A gray square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\n// Change the background color.\nfunction repaint() {\n let g = random(255);\n background(g);\n}\n\n
              \n\n
              \n\nlet button;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and set its value to 0.\n // Place the button beneath the canvas.\n button = createButton('click me', 'red');\n button.position(0, 100);\n\n // Call randomColor() when the button is pressed.\n button.mousePressed(randomColor);\n\n describe('A red square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\nfunction draw() {\n // Use the button's value to set the background color.\n let c = button.value();\n background(c);\n}\n\n// Set the button's value to a random color.\nfunction randomColor() {\n let c = random(['red', 'green', 'blue', 'yellow']);\n button.value(c);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1007,"description":"

              Creates a checkbox <input></input> element.

              \n

              Checkboxes extend the p5.Element class with a\nchecked() method. Calling myBox.checked() returns true if it the box\nis checked and false if not.

              \n

              The first parameter, label, is optional. It's a string that sets the label\nto display next to the checkbox.

              \n

              The second parameter, value, is also optional. It's a boolean that sets the\ncheckbox's value.

              \n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"

              label displayed after the checkbox.

              \n","type":"String","optional":true},{"name":"value","description":"

              value of the checkbox. Checked is true and unchecked is false.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox();\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\".\n checkbox = createCheckbox(' white');\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox labeled \"white\" beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              \n\n
              \n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\" and set its value to true.\n checkbox = createCheckbox(' white', true);\n checkbox.position(0, 100);\n\n describe('A white square with a checkbox labeled \"white\" beneath it. The square turns black when the box is unchecked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1158,"description":"

              Creates a dropdown menu <select></select> element.

              \n

              The parameter is optional. If true is passed, as in\nlet mySelect = createSelect(true), then the dropdown will support\nmultiple selections. If an existing <select></select> element\nis passed, as in let mySelect = createSelect(otherSelect), the existing\nelement will be wrapped in a new p5.Element\nobject.

              \n

              Dropdowns extend the p5.Element class with a few\nhelpful methods for managing options:

              \n
                \n
              • mySelect.option(name, [value]) adds an option to the menu. The first paremeter, name, is a string that sets the option's name and value. The second parameter, value, is optional. If provided, it sets the value that corresponds to the key name. If an option with name already exists, its value is changed to value.
                • \n
              • mySelect.value() returns the currently-selected option's value.
                • \n
              • mySelect.selected() returns the currently-selected option.
                • \n
              • mySelect.selected(option) selects the given option by default.
                • \n
              • mySelect.disable() marks the whole dropdown element as disabled.
                • \n
              • mySelect.disable(option) marks a given option as disabled.
                • \n
              • mySelect.enable() marks the whole dropdown element as enabled.
                • \n
              • mySelect.enable(option) marks a given option as enabled.
                • \n
              \n","itemtype":"method","name":"createSelect","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n // Disable the \"yellow\" option.\n mySelect.disable('yellow');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options with names and values.\n mySelect.option('one', 'red');\n mySelect.option('two', 'green');\n mySelect.option('three', 'blue');\n mySelect.option('four', 'yellow');\n\n // Set the selected option to \"one\".\n mySelect.selected('one');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n\n
              \n\n
              \n\n// Hold CTRL to select multiple options on Windows and Linux.\n// Hold CMD to select multiple options on macOS.\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and allow multiple selections.\n // Place it beneath the canvas.\n mySelect = createSelect(true);\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the selected value(s) to draw circles.\n let colors = mySelect.selected();\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = 10 + i * 20;\n\n // Access the color.\n let c = colors[i];\n\n // Draw the circle.\n fill(c);\n circle(x, 50, 20);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1158,"params":[{"name":"multiple","description":"

              support multiple selections.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1323,"params":[{"name":"existing","description":"

              select element to wrap, either as a p5.Element or\n a HTMLSelectElement.

              \n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1439,"description":"

              Creates a radio button element.

              \n

              The parameter is optional. If a string is passed, as in\nlet myRadio = createSelect('food'), then each radio option will\nhave \"food\" as its name parameter: <input name=\"food\"></input>.\nIf an existing <div></div> or <span></span>\nelement is passed, as in let myRadio = createSelect(container), it will\nbecome the radio button's parent element.

              \n

              Radio buttons extend the p5.Element class with a few\nhelpful methods for managing options:

              \n
                \n
              • myRadio.option(value, [label]) adds an option to the menu. The first paremeter, value, is a string that sets the option's value and label. The second parameter, label, is optional. If provided, it sets the label displayed for the value. If an option with value already exists, its label is changed and its value is returned.
                • \n
              • myRadio.value() returns the currently-selected option's value.
                • \n
              • myRadio.selected() returns the currently-selected option.
                • \n
              • myRadio.selected(value) selects the given option and returns it as an HTMLInputElement.
                • \n
              • myRadio.disable(shouldDisable) enables the entire radio button if true is passed and disables it if false is passed.
                • \n
              \n","itemtype":"method","name":"createRadio","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(60);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three color options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let g = myRadio.value();\n background(g);\n}\n\n
              \n\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n // Color values are labeled with\n // emotions they evoke.\n myRadio.option('red', 'love');\n myRadio.option('yellow', 'joy');\n myRadio.option('blue', 'trust');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three options listed, \"love\", \"joy\", and \"trust\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n
              \n\n
              \n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n // Create a button and place it beneath the canvas.\n let btn = createButton('disable');\n btn.position(0, 100);\n\n // Call disableRadio() when btn is pressed.\n btn.mousePressed(disableRadio);\n\n describe('A yellow square with three options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option. A \"disable\" button beneath the canvas disables the color options when pressed.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n// Disable myRadio.\nfunction disableRadio() {\n myRadio.disable(true);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1439,"params":[{"name":"containerElement","description":"

              container HTML Element, either a <div></div>\nor <span></span>.

              \n","type":"Object","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1573,"params":[{"name":"name","description":"

              name parameter assigned to each option's <input></input> element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1578,"params":[],"return":{"description":"new p5.Element object.","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1740,"description":"

              Creates a color picker element.

              \n

              The parameter, value, is optional. If a color string or\np5.Color object is passed, it will set the default\ncolor.

              \n

              Color pickers extend the p5.Element class with a\ncouple of helpful methods for managing colors:

              \n
                \n
              • myPicker.value() returns the current color as a hex string in the format '#rrggbb'.
                • \n
              • myPicker.color() returns the current color as a p5.Color object.
                • \n
              \n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"

              default color as a CSS color string.

              \n","type":"String|p5.Color","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.color();\n background(c);\n}\n\n
              \n\n
              \n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A number with the format \"#rrggbb\" is displayed on a pink canvas. The background color and number change when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.value();\n background(c);\n\n // Display the current color as a hex string.\n text(c, 25, 55);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1840,"description":"

              Creates a text <input></input> element.

              \n

              Call myInput.size() to set the length of the text box.

              \n

              The first parameter, value, is optional. It's a string that sets the\ninput's default value. The input is blank by default.

              \n

              The second parameter, type, is also optional. It's a string that\nspecifies the type of text being input. See MDN for a full\nlist of options.\nThe default is 'text'.

              \n","itemtype":"method","name":"createInput","return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas.\n myInput = createInput();\n myInput.position(0, 100);\n\n describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n\n
              \n\n
              \n\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas. Set its default\n // text to \"hello!\".\n myInput = createInput('hello!');\n myInput.position(0, 100);\n\n describe('The text \"hello!\" written at the center of a gray square. A text box beneath the square also says \"hello!\". The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1840,"params":[{"name":"value","description":"

              default value of the input box. Defaults to an empty string ''.

              \n","type":"String","optional":true},{"name":"type","description":"

              type of input. Defaults to 'text'.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"}},{"line":1910,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1923,"description":"

              Creates an <input></input> element of type 'file'.

              \n

              createFileInput() allows users to select local files for use in a sketch.\nIt returns a p5.File object.

              \n

              The first parameter, callback, is a function that's called when the file\nloads. The callback function should have one parameter, file, that's a\np5.File object.

              \n

              The second parameter, multiple, is optional. It's a boolean value that\nallows loading multiple files if set to true. If true, callback\nwill be called once per file.

              \n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"

              function to call once the file loads.

              \n","type":"Function"},{"name":"multiple","description":"

              allow multiple files to be selected.

              \n","type":"Boolean","optional":true}],"return":{"description":"new p5.File object.","type":"p5.File"},"example":["\n
              \n\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n\n
              \n\n
              \n\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2049,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2096,"description":"

              Creates a <video> element for simple audio/video playback.

              \n

              createVideo() returns a new\np5.MediaElement object. Videos are shown by\ndefault. They can be hidden by calling video.hide() and drawn to the\ncanvas using image().

              \n

              The first parameter, src, is the path the video. If a single string is\npassed, as in 'assets/topsecret.mp4', a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, ['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm'].\nThis is useful for ensuring that the video can play across different browsers with\ndifferent capabilities. See\nMDN\nfor more information about supported formats.

              \n

              The second parameter, callback, is optional. It's a function to call once\nthe video is ready to play.

              \n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"

              path to a video file, or an array of paths for\n supporting different browsers.

              \n","type":"String|String[]"},{"name":"callback","description":"

              function to call once the video is ready to play.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Note: this may not work in some browsers.\n let video = createVideo('assets/small.mp4');\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n let video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n
              \n\n
              \n\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n // Call mute() once the video loads.\n video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n muteVideo\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n// Mute the video once it loads.\nfunction muteVideo() {\n video.volume(0);\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2192,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2194,"description":"

              Creates a hidden <audio> element for simple audio playback.

              \n

              createAudio() returns a new\np5.MediaElement object.

              \n

              The first parameter, src, is the path the video. If a single string is\npassed, as in 'assets/video.mp4', a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, ['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm'].\nThis is useful for ensuring that the video can play across different\nbrowsers with different capabilities. See\nMDN\nfor more information about supported formats.

              \n

              The second parameter, callback, is optional. It's a function to call once\nthe audio is ready to play.

              \n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"

              path to an audio file, or an array of paths\n for supporting different browsers.

              \n","type":"String|String[]","optional":true},{"name":"callback","description":"

              function to call once the audio is ready to play.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Load the audio.\n let beat = createAudio('assets/beat.mp3');\n\n // Show the default audio controls.\n beat.showControls();\n\n describe('An audio beat plays when the user double-clicks the square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2240,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2276,"description":"

              Creates a <video> element that \"captures\" the audio/video stream from\nthe webcam and microphone.

              \n

              createCapture() returns a new\np5.MediaElement object. Videos are shown by\ndefault. They can be hidden by calling capture.hide() and drawn to the\ncanvas using image().

              \n

              The first parameter, type, is optional. It sets the type of capture to\nuse. By default, createCapture() captures both audio and video. If VIDEO\nis passed, as in createCapture(VIDEO), only video will be captured.\nIf AUDIO is passed, as in createCapture(AUDIO), only audio will be\ncaptured. A constraints object can also be passed to customize the stream.\nSee the \nW3C documentation for possible properties. Different browsers support different\nproperties.

              \n

              The 'flipped' property is an optional property which can be set to {flipped:true}\nto mirror the video output.If it is true then it means that video will be mirrored\nor flipped and if nothing is mentioned then by default it will be false.

              \n

              The second parameter,callback, is optional. It's a function to call once\nthe capture is ready for use. The callback function should have one\nparameter, stream, that's a\nMediaStream object.

              \n

              Note: createCapture() only works when running a sketch locally or using HTTPS. Learn more\nhere\nand here.

              \n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"

              type of capture, either AUDIO or VIDEO,\n or a constraints object. Both video and audio\n audio streams are captured by default.

              \n","type":"String|Constant|Object","optional":true},{"name":"flipped","description":"

              flip the capturing video and mirror the output with {flipped:true}. By\n default it is false.

              \n","type":"Object","optional":true},{"name":"callback","description":"

              function to call once the stream\n has loaded.

              \n","type":"Function","optional":true}],"return":{"description":"new p5.MediaElement object.","type":"p5.MediaElement"},"example":["\n
              \n\nfunction setup() {\n noCanvas();\n\n // Create the video capture.\n createCapture(VIDEO);\n\n describe('A video stream from the webcam.');\n}\n\n
              \n\n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture and hide the element.\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A video stream from the webcam with inverted colors.');\n}\n\nfunction draw() {\n // Draw the video capture within the canvas.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n\n // Invert the colors in the stream.\n filter(INVERT);\n}\n\n
              \n
              \n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture with mirrored output.\n capture = createCapture(VIDEO,{ flipped:true });\n capture.size(100,100);\n\n describe('A video stream from the webcam with flipped or mirrored output.');\n}\n\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(480, 120);\n\n // Create a constraints object.\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: false\n };\n\n // Create the video capture.\n createCapture(constraints);\n\n describe('A video stream from the webcam.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2474,"description":"

              Creates a new p5.Element object.

              \n

              The first parameter, tag, is a string an HTML tag such as 'h5'.

              \n

              The second parameter, content, is optional. It's a string that sets the\nHTML content to insert into the new element. New elements have no content\nby default.

              \n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"

              tag for the new element.

              \n","type":"String"},{"name":"content","description":"

              HTML content to insert into the element.

              \n","type":"String","optional":true}],"return":{"description":"new p5.Element object.","type":"p5.Element"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with nothing in it.\n createElement('h5');\n\n describe('A gray square.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with the content \"p5*js\".\n let h5 = createElement('h5', 'p5*js');\n\n // Set the element's style and position.\n h5.style('color', 'deeppink');\n h5.position(30, 15);\n\n describe('The text \"p5*js\" written in pink in the middle of a gray square.');\n}\n\n
              "],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2535,"description":"

              Adds a class to the element.

              \n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"

              name of class to add.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n \n function setup() {\n createCanvas(100, 100);\n background(200);\n // Create a div element.\n let div = createDiv('div');\n // Add a class to the div.\n div.addClass('myClass');\n describe('A gray square.');\n }\n \n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2574,"description":"

              Removes a class from the element.

              \n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"

              name of class to remove.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\n// In this example, a class is set when the div is created\n// and removed when mouse is pressed. This could link up\n// with a CSS style rule to toggle style properties.\n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n\n// Remove 'myClass' from the div when the user presses the mouse.\nfunction mousePressed() {\n div.removeClass('myClass');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2617,"description":"

              Checks if a class is already applied to element.

              \n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class.","type":"Boolean"},"params":[{"name":"c","description":"

              name of class to check.

              \n","type":"String"}],"example":["\n
              \n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the class 'show' to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the class 'show' when the mouse is pressed.\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2658,"description":"

              Toggles whether a class is applied to the element.

              \n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"

              class name to toggle.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the 'show' class to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the 'show' class when the mouse is pressed.\nfunction mousePressed() {\n div.toggleClass('show');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2703,"description":"

              Attaches the element as a child of another element.

              \n

              myElement.child() accepts either a string ID, DOM node, or\np5.Element. For example,\nmyElement.child(otherElement). If no argument is provided, an array of\nchildren DOM nodes is returned.

              \n","itemtype":"method","name":"child","return":{"description":"an array of child nodes.","type":"Node[]"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Make div1 the child of div0\n // using the p5.Element.\n div0.child(div1);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Give div1 an ID.\n div1.id('apples');\n\n // Make div1 the child of div0\n // using its ID.\n div0.child('apples');\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              \n\n
              \n\n// This example assumes there is a div already on the page\n// with id \"myChildDiv\".\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n\n // Select the child element by its ID.\n let elt = document.getElementById('myChildDiv');\n\n // Make div1 the child of div0\n // using its HTMLElement object.\n div0.child(elt);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2703,"params":[],"return":{"description":"an array of child nodes.","type":"Node[]"}},{"line":2783,"params":[{"name":"child","description":"

              the ID, DOM node, or p5.Element\n to add to the current element

              \n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2808,"description":"

              Centers the element either vertically, horizontally, or both.

              \n

              center() will center the element relative to its parent or according to\nthe page's body if the element has no parent.

              \n

              If no argument is passed, as in myElement.center() the element is aligned\nboth vertically and horizontally.

              \n","itemtype":"method","name":"center","params":[{"name":"align","description":"

              passing 'vertical', 'horizontal' aligns element accordingly

              \n","type":"String","optional":true}],"chainable":1,"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and style it.\n let div = createDiv('');\n div.size(10, 10);\n div.style('background-color', 'orange');\n\n // Center the div relative to the page's body.\n div.center();\n\n describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2874,"description":"

              Sets the inner HTML of the element, replacing any existing HTML.

              \n

              The second parameter, append, is optional. If true is passed, as in\nmyElement.html('hi', true), the HTML is appended instead of replacing\nexisting HTML.

              \n

              If no arguments are passed, as in myElement.html(), the element's inner\nHTML is returned.

              \n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the div element and set its size.\n let div = createDiv('');\n div.size(100, 100);\n\n // Set the inner HTML to \"hi\".\n div.html('hi');\n\n describe('A gray square with the word \"hi\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and set its size.\n let div = createDiv('Hello ');\n div.size(100, 100);\n\n // Append \"World\" to the div's HTML.\n div.html('World', true);\n\n describe('A gray square with the text \"Hello World\" written beneath it.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element.\n let div = createDiv('Hello');\n\n // Prints \"Hello\" to the console.\n print(div.html());\n\n describe('A gray square with the word \"Hello!\" written beneath it.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2874,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":2943,"params":[{"name":"html","description":"

              the HTML to be placed inside the element

              \n","type":"String","optional":true},{"name":"append","description":"

              whether to append HTML to existing

              \n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2961,"description":"

              Sets the element's position.

              \n

              The first two parameters, x and y, set the element's position relative\nto the top-left corner of the web page.

              \n

              The third parameter, positionType, is optional. It sets the element's\npositioning scheme.\npositionType is a string that can be either 'static', 'fixed',\n'relative', 'sticky', 'initial', or 'inherit'.

              \n

              If no arguments passed, as in myElement.position(), the method returns\nthe element's position in an object, as in { x: 0, y: 0 }.

              \n","itemtype":"method","name":"position","return":{"description":"object of form `{ x: 0, y: 0 }` containing the element's position.","type":"Object"},"example":["\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas 50px to the right and 100px\n // below the top-left corner of the window.\n cnv.position(50, 100);\n\n describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas at the top-left corner\n // of the window with a 'fixed' position type.\n cnv.position(0, 0, 'fixed');\n\n describe('A gray square in the top-left corner of the web page.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2961,"params":[],"return":{"description":"object of form `{ x: 0, y: 0 }` containing the element's position.","type":"Object"}},{"line":3012,"params":[{"name":"x","description":"

              x-position relative to top-left of window (optional)

              \n","type":"Number","optional":true},{"name":"y","description":"

              y-position relative to top-left of window (optional)

              \n","type":"Number","optional":true},{"name":"positionType","description":"

              it can be static, fixed, relative, sticky, initial or inherit (optional)

              \n","type":"String","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":3099,"description":"

              Applies a style to the element by adding a\nCSS declaration.

              \n

              The first parameter, property, is a string. If the name of a style\nproperty is passed, as in myElement.style('color'), the method returns\nthe current value as a string or null if it hasn't been set. If a\nproperty:style string is passed, as in\nmyElement.style('color:deeppink'), the method sets the style property\nto value.

              \n

              The second parameter, value, is optional. It sets the property's value.\nvalue can be a string, as in\nmyElement.style('color', 'deeppink'), or a\np5.Color object, as in\nmyElement.style('color', myColor).

              \n","itemtype":"method","name":"style","return":{"description":"value of the property.","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\".\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', 'deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Create a paragraph element and set its font color using a p5.Color object.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', c);\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\"\n // using property:value syntax.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color:deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n\n
              \n\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an empty paragraph element and set its font color to \"deeppink\".\n let p = createP();\n p.position(5, 5);\n p.style('color', 'deeppink');\n\n // Get the element's color as an RGB color string.\n let c = p.style('color');\n\n // Set the element's inner HTML using the RGB color string.\n p.html(c);\n\n describe('The text \"rgb(255, 20, 147)\" written in pink on a gray background.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3099,"params":[{"name":"property","description":"

              style property to set.

              \n","type":"String"}],"return":{"description":"value of the property.","type":"String"}},{"line":3199,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"

              value to assign to the property.

              \n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"value of the property.","type":"String"}}]},{"file":"src/dom/dom.js","line":3256,"description":"

              Adds an\nattribute\nto the element.

              \n

              This method is useful for advanced tasks. Most commonly-used attributes,\nsuch as id, can be set with their dedicated methods. For example,\nnextButton.id('next') sets an element's id attribute. Calling\nnextButton.attribute('id', 'next') has the same effect.

              \n

              The first parameter, attr, is the attribute's name as a string. Calling\nmyElement.attribute('align') returns the attribute's current value as a\nstring or null if it hasn't been set.

              \n

              The second parameter, value, is optional. It's a string used to set the\nattribute's value. For example, calling\nmyElement.attribute('align', 'center') sets the element's horizontal\nalignment to center.

              \n","itemtype":"method","name":"attribute","return":{"description":"value of the attribute.","type":"String"},"example":["\n
              \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a container div element and place it at the top-left corner.\n let container = createDiv();\n container.position(0, 0);\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"left\".\n let p1 = createP('hi');\n p1.parent(container);\n p1.attribute('align', 'left');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"center\".\n let p2 = createP('hi');\n p2.parent(container);\n p2.attribute('align', 'center');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"right\".\n let p3 = createP('hi');\n p3.parent(container);\n p3.attribute('align', 'right');\n\n describe('A gray square with the text \"hi\" written on three separate lines, each placed further to the right.');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3256,"params":[],"return":{"description":"value of the attribute.","type":"String"}},{"line":3311,"params":[{"name":"attr","description":"

              attribute to set.

              \n","type":"String"},{"name":"value","description":"

              value to assign to the attribute.

              \n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3340,"description":"

              Removes an attribute from the element.

              \n

              The parameter attr is the attribute's name as a string. For example,\ncalling myElement.removeAttribute('align') removes its align\nattribute if it's been set.

              \n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"

              attribute to remove.

              \n","type":"String"}],"chainable":1,"example":["\n
              \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place it in the center of the canvas.\n // Set its \"align\" attribute to \"center\".\n p = createP('hi');\n p.position(0, 20);\n p.attribute('align', 'center');\n\n describe('The text \"hi\" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');\n}\n\n// Remove the 'align' attribute when the user double-clicks the paragraph.\nfunction doubleClicked() {\n p.removeAttribute('align');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3391,"description":"

              Returns or sets the element's value.

              \n

              Calling myElement.value() returns the element's current value.

              \n

              The parameter, value, is an optional number or string. If provided,\nas in myElement.value(123), it's used to set the element's value.

              \n","itemtype":"method","name":"value","return":{"description":"value of the element.","type":"String|Number"},"example":["\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n
              \n\n
              \n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square. The text resets to \"hello\" when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n// Reset the input's value.\nfunction doubleClicked() {\n input.value('hello');\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3391,"params":[],"return":{"description":"value of the element.","type":"String|Number"}},{"line":3458,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3474,"description":"

              Shows the current element.

              \n","itemtype":"method","name":"show","chainable":1,"example":["\n
              \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and hide it.\n p = createP('p5*js');\n p.position(10, 10);\n p.hide();\n\n describe('A gray square. The text \"p5*js\" appears when the user double-clicks the square.');\n}\n\n// Show the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.show();\n}\n\n
              "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3510,"description":"

              Hides the current element.

              \n","itemtype":"method","name":"hide","chainable":1,"example":["\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" at the center of a gray square. The text disappears when the user double-clicks the square.');\n}\n\n// Hide the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.hide();\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3543,"description":"

            Sets the element's width and height.

            \n

            Calling myElement.size() without an argument returns the element's size\nas an object with the properties width and height. For example,\n { width: 20, height: 10 }.

            \n

            The first parameter, width, is optional. It's a number used to set the\nelement's width. Calling myElement.size(10)

            \n

            The second parameter, 'height, is also optional. It's a number used to set the element's height. For example, calling myElement.size(20, 10)` sets the element's width to 20 pixels and height\nto 10 pixels.

            \n

            The constant AUTO can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is width / height. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\nmyElement.size(20, AUTO) sets the width to 20 pixels and height to 10\npixels.

            \n

            Note: In the case of elements that need to load data, such as images, wait\nto call myElement.size() until after the data loads.

            \n","itemtype":"method","name":"size","return":{"description":"width and height of the element in an object.","type":"Object"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 20 pixels.\n div.size(80, 20);\n\n describe('A gray square with a pink rectangle near its top.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 40 pixels.\n div.size(80, 40);\n\n // Get the div's size as an object.\n let s = div.size();\n\n // Display the div's dimensions.\n div.html(`${s.width} x ${s.height}`);\n\n describe('A gray square with a pink rectangle near its top. The text \"80 x 40\" is written within the rectangle.');\n}\n\n
            \n\n
            \n\nlet img1;\nlet img2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n img1 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n ''\n );\n img1.position(0, 0);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n // Resize the image once it's loaded.\n img2 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n '',\n resizeImage\n );\n img2.position(0, 0);\n\n describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');\n}\n\n// Resize img2 and keep its aspect ratio.\nfunction resizeImage() {\n img2.size(50, AUTO);\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":3543,"params":[],"return":{"description":"width and height of the element in an object.","type":"Object"}},{"line":3657,"params":[{"name":"w","description":"

            width of the element, either AUTO, or a number.

            \n","type":"Number|Constant","optional":true},{"name":"h","description":"

            height of the element, either AUTO, or a number.

            \n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":3712,"description":"

            Removes the element, stops all audio/video streams, and removes all\ncallback functions.

            \n","itemtype":"method","name":"remove","example":["\n
            \n\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" written at the center of a gray square. ');\n}\n\n// Remove the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.remove();\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3771,"description":"

            Calls a function when the user drops a file on the element.

            \n

            The first parameter, callback, is a function to call once the file loads.\nThe callback function should have one parameter, file, that's a\np5.File object. If the user drops multiple files on\nthe element, callback, is called once for each file.

            \n

            The second parameter, fxn, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, event, that's a\nDragEvent.

            \n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"

            called when a file loads. Called once for each file dropped.

            \n","type":"Function"},{"name":"fxn","description":"

            called once when any files are dropped.

            \n","type":"Function","optional":true}],"chainable":1,"example":["\n
            \n\n// Drop an image on the canvas to view\n// this example.\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call handleFile() when a file that's dropped on the canvas has loaded.\n c.drop(handleFile);\n\n describe('A gray square. When the user drops an image on the square, it is displayed.');\n}\n\n// Remove the existing image and display the new one.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an element with the\n // dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n
            \n\n
            \n\n// Drop an image on the canvas to view\n// this example.\nlet img;\nlet msg;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call functions when the user drops a file on the canvas\n // and when the file loads.\n c.drop(handleFile, handleDrop);\n\n describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');\n}\n\n// Display the image when it loads.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an img element with the dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n// Display the file's name when it loads.\nfunction handleDrop(event) {\n // Remove current paragraph, if any.\n if (msg) {\n msg.remove();\n }\n\n // Use event to get the drop target's id.\n let id = event.target.id;\n\n // Write the canvas' id beneath it.\n msg = createP(id);\n msg.position(0, 100);\n\n // Set the font color randomly for each drop.\n let c = random(['red', 'green', 'blue']);\n msg.style('color', c);\n msg.style('font-size', '12px');\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3926,"description":"

            Makes the element draggable.

            \n

            The parameter, elmnt, is optional. If another\np5.Element object is passed, as in\nmyElement.draggable(otherElement), the other element will become draggable.

            \n","itemtype":"method","name":"draggable","params":[{"name":"elmnt","description":"

            another p5.Element.

            \n","type":"p5.Element","optional":true}],"chainable":1,"example":["\n
            \n\nlet stickyNote;\nlet textInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and style it.\n stickyNote = createDiv('Note');\n stickyNote.position(5, 5);\n stickyNote.size(80, 20);\n stickyNote.style('font-size', '16px');\n stickyNote.style('font-family', 'Comic Sans MS');\n stickyNote.style('background', 'orchid');\n stickyNote.style('padding', '5px');\n\n // Make the note draggable.\n stickyNote.draggable();\n\n // Create a panel div and style it.\n let panel = createDiv('');\n panel.position(5, 40);\n panel.size(80, 50);\n panel.style('background', 'orchid');\n panel.style('font-size', '16px');\n panel.style('padding', '5px');\n panel.style('text-align', 'center');\n\n // Make the panel draggable.\n panel.draggable();\n\n // Create a text input and style it.\n textInput = createInput('Note');\n textInput.size(70);\n\n // Add the input to the panel.\n textInput.parent(panel);\n\n // Call handleInput() when text is input.\n textInput.input(handleInput);\n\n describe(\n 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'\n );\n}\n\n// Update stickyNote's HTML when text is input.\nfunction handleInput() {\n stickyNote.html(textInput.value());\n}\n\n
            "],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4062,"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4139,"description":"

            Path to the media element's source as a string.

            \n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n
            \n\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"https://p5js.org/reference/assets/beat.mp3\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n textWrap(CHAR);\n text(beat.src, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4196,"description":"

            Plays audio or video from a media element.

            \n","itemtype":"method","name":"play","chainable":1,"example":["\n
            \n\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display a message.\n text('Click to play', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks the square.');\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n beat.play();\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4262,"description":"

            Stops a media element and sets its current time to 0.

            \n

            Calling media.play() will restart playing audio/video from the beginning.

            \n","itemtype":"method","name":"stop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isStopped = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to start\" written in black on a gray background. The beat starts or stops when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isStopped === true) {\n text('Click to start', 50, 50);\n } else {\n text('Click to stop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isStopped === true) {\n // If the beat is stopped, play it.\n beat.play();\n isStopped = false;\n } else {\n // If the beat is playing, stop it.\n beat.stop();\n isStopped = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4321,"description":"

            Pauses a media element.

            \n

            Calling media.play() will resume playing audio/video from the moment it paused.

            \n","itemtype":"method","name":"pause","chainable":1,"example":["\n
            \n\nlet beat;\nlet isPaused = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. The beat plays or pauses when the user clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPaused === true) {\n text('Click to play', 50, 50);\n } else {\n text('Click to pause', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPaused === true) {\n // If the beat is paused,\n // play it.\n beat.play();\n isPaused = false;\n } else {\n // If the beat is playing,\n // pause it.\n beat.pause();\n isPaused = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4381,"description":"

            Plays the audio/video repeatedly in a loop.

            \n","itemtype":"method","name":"loop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isLooping = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to loop\" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isLooping === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to loop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isLooping === true) {\n // If the beat is looping, stop it.\n beat.stop();\n isLooping = false;\n } else {\n // If the beat is stopped, loop it.\n beat.loop();\n isLooping = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4439,"description":"

            Stops the audio/video from playing in a loop.

            \n

            The media will stop when it finishes playing.

            \n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n
            \n\nlet beat;\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPlaying === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to play', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === true) {\n // If the beat is playing, stop it.\n beat.stop();\n isPlaying = false;\n } else {\n // If the beat is stopped, play it.\n beat.play();\n isPlaying = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4519,"description":"

            Sets the audio/video to play once it's loaded.

            \n

            The parameter, shouldAutoplay, is optional. Calling\nmedia.autoplay() without an argument causes the media to play\nautomatically. If true is passed, as in media.autoplay(true), the\nmedia will automatically play. If false is passed, as in\nmedia.autoPlay(false), it won't play automatically.

            \n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"

            whether the element should autoplay.

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Call handleVideo() once the video loads.\n video = createVideo('assets/fingers.mov', handleVideo);\n\n describe('A video of fingers walking on a treadmill.');\n}\n\n// Set the video's size and play it.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay();\n}\n\n
            \n\n
            \n\nfunction setup() {\n noCanvas();\n\n // Load a video, but don't play it automatically.\n let video = createVideo('assets/fingers.mov', handleVideo);\n\n // Play the video when the user clicks on it.\n video.mousePressed(handlePress);\n\n describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');\n}\n\n
            \n\n// Set the video's size and playback mode.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay(false);\n}\n\n// Play the video.\nfunction handleClick() {\n video.play();\n}"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":4604,"description":"

            Sets the audio/video volume.

            \n

            Calling media.volume() without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).

            \n

            The parameter, val, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling media.volume(0.5)\nsets the volume to half of its maximum.

            \n","itemtype":"method","name":"volume","return":{"description":"current volume.","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Volume: V\" on a gray square with media controls beneath it. The number \"V\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 1.\n let n = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Use n to set the volume.\n dragon.volume(n);\n\n // Get the current volume and display it.\n let v = dragon.volume();\n\n // Round v to 1 decimal place for display.\n v = round(v, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the volume.\n text(`Volume: ${v}`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4604,"params":[],"return":{"description":"current volume.","type":"Number"}},{"line":4659,"params":[{"name":"val","description":"

            volume between 0.0 and 1.0.

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4672,"description":"

            Sets the audio/video playback speed.

            \n

            The parameter, val, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.

            \n

            Calling media.speed() returns the current speed as a number.

            \n

            Note: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.

            \n","itemtype":"method","name":"speed","return":{"description":"current playback speed.","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Speed: S\" on a gray square with media controls beneath it. The number \"S\" oscillates between 0 and 1 as the music plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 2.\n let n = sin(frameCount * 0.01) + 1;\n\n // Use n to set the playback speed.\n dragon.speed(n);\n\n // Get the current speed and display it.\n let s = dragon.speed();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the speed.\n text(`Speed: ${s}`, 50, 50);\n}\n"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4672,"params":[],"return":{"description":"current playback speed.","type":"Number"}},{"line":4730,"params":[{"name":"speed","description":"

            speed multiplier for playback.

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4747,"description":"

            Sets the media element's playback time.

            \n

            The parameter, time, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.

            \n

            Calling media.time() without an argument returns the number of seconds\nthe audio/video has played.

            \n

            Note: Time resets to 0 when looping media restarts.

            \n","itemtype":"method","name":"time","return":{"description":"current time (in seconds).","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n\n
            \n\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n // Jump to 2 seconds to start.\n dragon.time(2);\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":4747,"params":[],"return":{"description":"current time (in seconds).","type":"Number"}},{"line":4835,"params":[{"name":"time","description":"

            time to jump to (in seconds).

            \n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":4849,"description":"

            Returns the audio/video's duration in seconds.

            \n","itemtype":"method","name":"duration","return":{"description":"duration (in seconds).","type":"Number"},"example":["\n
            \n\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds left\" on a gray square with media controls beneath it. The number \"S\" decreases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the time remaining.\n let s = dragon.duration() - dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the time remaining.\n text(`${s} seconds left`, 50, 50);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5005,"description":"

            Calls a function when the audio/video reaches the end of its playback.

            \n

            The element is passed as an argument to the callback function.

            \n

            Note: The function won't be called if the media is looping.

            \n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"

            function to call when playback ends.\n The p5.MediaElement is passed as\n the argument.

            \n","type":"Function"}],"chainable":1,"example":["\n
            \n\nlet beat;\nlet isPlaying = false;\nlet isDone = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n // Call handleEnd() when the beat finishes.\n beat.onended(handleEnd);\n\n describe('The text \"Click to play\" written in black on a gray square. A beat plays when the user clicks. The text \"Done!\" appears when the beat finishes playing.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different messages based on playback.\n if (isDone === true) {\n text('Done!', 50, 50);\n } else if (isPlaying === false) {\n text('Click to play', 50, 50);\n } else {\n text('Playing...', 50, 50);\n }\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === false) {\n isPlaying = true;\n beat.play();\n }\n}\n\n// Set isDone when playback ends.\nfunction handleEnd() {\n isDone = false;\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5074,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5076,"description":"

            Sends the element's audio to an output.

            \n

            The parameter, audioNode, can be an AudioNode or an object from the\np5.sound library.

            \n

            If no element is provided, as in myElement.connect(), the element\nconnects to the main output. All connections are removed by the\n.disconnect() method.

            \n

            Note: This method is meant to be used with the p5.sound.js addon library.

            \n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"

            AudioNode from the Web Audio API,\nor an object from the p5.sound library

            \n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5129,"description":"

            Disconnect all Web Audio routing, including to the main output.

            \n

            This is useful if you want to re-route the output through audio effects,\nfor example.

            \n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5145,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5147,"description":"

            Show the default\nHTMLMediaElement\ncontrols.

            \n

            Note: The controls vary between web browsers.

            \n","itemtype":"method","name":"showControls","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('🐉', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5188,"description":"

            Hide the default\nHTMLMediaElement\ncontrols.

            \n","itemtype":"method","name":"hideControls","example":["\n
            \n\nlet dragon;\nlet isHidden = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"Double-click to hide controls\" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n\n // Display a different message when controls are hidden or shown.\n if (isHidden === true) {\n text('Double-click to show controls', 10, 20, 80, 80);\n } else {\n text('Double-click to hide controls', 10, 20, 80, 80);\n }\n}\n\n// Show/hide controls based on a double-click.\nfunction doubleClicked() {\n if (isHidden === true) {\n dragon.showControls();\n isHidden = false;\n } else {\n dragon.hideControls();\n isHidden = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5244,"description":"

            Schedules a function to call when the audio/video reaches a specific time\nduring its playback.

            \n

            The first parameter, time, is the time, in seconds, when the function\nshould run. This value is passed to callback as its first argument.

            \n

            The second parameter, callback, is the function to call at the specified\ncue time.

            \n

            The third parameter, value, is optional and can be any type of value.\nvalue is passed to callback.

            \n

            Calling media.addCue() returns an ID as a string. This is useful for\nremoving the cue later.

            \n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"

            cue time to run the callback function.

            \n","type":"Number"},{"name":"callback","description":"

            function to call at the cue time.

            \n","type":"Function"},{"name":"value","description":"

            object to pass as the argument to\n callback.

            \n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n useful for `media.removeCue(id)`.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5309,"description":"

            Removes a callback based on its ID.

            \n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"

            ID of the cue, created by media.addCue().

            \n","type":"Number"}],"example":["\n
            \n\nlet lavenderID;\nlet isRemoved = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n\n // Record the ID of the \"lavender\" callback.\n lavenderID = beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to remove lavender.\" written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isRemoved === false) {\n text('Double-click to remove lavender.', 10, 10, 80, 80);\n } else {\n text('No more lavender.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove the lavender color-change cue when the user double-clicks.\nfunction doubleClicked() {\n if (isRemoved === false) {\n beat.removeCue(lavenderID);\n isRemoved = true;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5380,"description":"

            Removes all functions scheduled with media.addCue().

            \n","itemtype":"method","name":"clearCues","example":["\n
            \n\nlet isChanging = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('The text \"Double-click to stop changing.\" written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isChanging === true) {\n text('Double-click to stop changing.', 10, 10, 80, 80);\n } else {\n text('No more changes.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove cued functions and stop changing colors when the user\n// double-clicks.\nfunction doubleClicked() {\n if (isChanging === true) {\n beat.clearCues();\n isChanging = false;\n }\n}\n\n
            "],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5554,"description":"

            Underlying\nFile\nobject. All File properties and methods are accessible.

            \n","itemtype":"property","name":"file","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Use the p5.File once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5603,"description":"

            The file\nMIME type\nas a string.

            \n

            For example, 'image' and 'text' are both MIME types.

            \n","itemtype":"property","name":"type","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayType() when the file loads.\n let input = createFileInput(displayType);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displayType(file) {\n background(200);\n\n // Display the p5.File's type.\n text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5641,"description":"

            The file subtype as a string.

            \n

            For example, a file with an 'image'\nMIME type\nmay have a subtype such as png or jpeg.

            \n","itemtype":"property","name":"subtype","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySubtype() when the file loads.\n let input = createFileInput(displaySubtype);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displaySubtype(file) {\n background(200);\n\n // Display the p5.File's subtype.\n text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5680,"description":"

            The file name as a string.

            \n","itemtype":"property","name":"name","example":["\n
            \n\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayName() when the file loads.\n let input = createFileInput(displayName);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');\n}\n\n// Display the p5.File's name once it loads.\nfunction displayName(file) {\n background(200);\n\n // Display the p5.File's name.\n text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5715,"description":"

            The number of bytes in the file.

            \n","itemtype":"property","name":"size","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySize() when the file loads.\n let input = createFileInput(displaySize);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');\n}\n\n// Display the p5.File's size in bytes once it loads.\nfunction displaySize(file) {\n background(200);\n\n // Display the p5.File's size.\n text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":5750,"description":"

            A string containing the file's data.

            \n

            Data can be either image data, text contents, or a parsed object in the\ncase of JSON and p5.XML objects.

            \n","itemtype":"property","name":"data","example":["\n
            \n\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayData() when the file loads.\n let input = createFileInput(displayData);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');\n}\n\n// Display the p5.File's data once it loads.\nfunction displayData(file) {\n background(200);\n\n // Display the p5.File's data, which looks like a random string of characters.\n text(file.data, 10, 10, 80, 80);\n}\n\n
            "],"class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"

            The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.

            \n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"

            The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n describe('Magnitude of device acceleration is displayed as ellipse size.');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":45,"description":"

            The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":67,"description":"

            The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.

            \n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n
            \n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":90,"description":"

            The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":100,"description":"

            The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":110,"description":"

            The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.

            \n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":131,"description":"

            The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch \nangleMode() is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":164,"description":"

            The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch \nangleMode() is set to DEGREES, the value will be -90 to 90. If\nit is set to RADIANS, the value will be -PI/2 to PI/2.

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":197,"description":"

            The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch \nangleMode() is set to DEGREES, the value will be 0 to 360. If\nit is set to RADIANS, the value will be 0 to 2*PI.

            \n

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

            \n

            Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.

            \n","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n\n
            "],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":234,"description":"

            The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.

            \n

            pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":278,"description":"

            The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -90 to 90. If it is set to RADIANS, the value will\nbe -PI/2 to PI/2.

            \n

            pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":321,"description":"

            The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be 0 to 360. If it is set to RADIANS, the value will\nbe 0 to 2*PI.

            \n

            pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.

            \n","example":["\n
            \n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n\n
            "],"itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":378,"description":"

            When a device is rotated, the axis that triggers the deviceTurned()\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().

            \n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":417,"description":"

            The setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.

            \n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"

            The threshold value

            \n","type":"Number"}],"example":["\n
            \n\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square's color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":459,"description":"

            The setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.

            \n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"

            The threshold value

            \n","type":"Number"}],"example":["\n
            \n\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box's fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device is being shaked`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":501,"description":"

            The deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using setMoveThreshold().

            \n","itemtype":"method","name":"deviceMoved","example":["\n
            \n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":531,"description":"

            The deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.

            \n

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

            \n","itemtype":"method","name":"deviceTurned","example":["\n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n\n
            \n
            \n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":589,"description":"

            The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using setShakeThreshold().

            \n","itemtype":"method","name":"deviceShaken","example":["\n
            \n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device shakes`);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"

            A Boolean system variable that's true if any key is currently pressed\nand false if not.

            \n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word switches to \"true\" when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the value of keyIsPressed.\n text(keyIsPressed, 50, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":102,"description":"

            A String system variable that contains the value of the last key typed.

            \n

            The key variable is helpful for checking whether an\nASCII\nkey has been typed. For example, the expression key === \"a\" evaluates to\ntrue if the a key was typed and false if not. key doesn’t update\nfor special keys such as LEFT_ARROW and ENTER. Use keyCode instead for\nspecial keys. The keyIsDown() function should\nbe used to check for multiple different key presses at the same time.

            \n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed is displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed.\n text(key, 50, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses the keys \"w\", \"a\", \"s\", or \"d\". It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if a key is pressed.\n if (keyIsPressed === true) {\n if (key === 'w') {\n y -= 1;\n } else if (key === 's') {\n y += 1;\n } else if (key === 'a') {\n x -= 1;\n } else if (key === 'd') {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":184,"description":"

            A Number system variable that contains the code of the last key typed.

            \n

            All keys have a keyCode. For example, the a key has the keyCode 65.\nThe keyCode variable is helpful for checking whether a special key has\nbeen typed. For example, the following conditional checks whether the enter\nkey has been typed:

            \n\nif (keyCode === 13) {\n // Code to run if the enter key was pressed.\n}\n\n\n

            The same code can be written more clearly using the system variable ENTER\nwhich has a value of 13:

            \n\nif (keyCode === ENTER) {\n // Code to run if the enter key was pressed.\n}\n\n\n

            The system variables BACKSPACE, DELETE, ENTER, RETURN, TAB,\nESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW,\nLEFT_ARROW, and RIGHT_ARROW are all helpful shorthands the key codes of\nspecial keys. Key codes can be found on websites such as\nkeycode.info.

            \n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed and its code are displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed and its code.\n text(`${key} : ${keyCode}`, 50, 50);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsPressed === true) {\n if (keyCode === UP_ARROW) {\n y -= 1;\n } else if (keyCode === DOWN_ARROW) {\n y += 1;\n } else if (keyCode === LEFT_ARROW) {\n x -= 1;\n } else if (keyCode === RIGHT_ARROW) {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":284,"description":"

            A function that's called once when any key is pressed.

            \n

            Declaring the function keyPressed() sets a code block to run once\nautomatically when the user presses any key:

            \n\nfunction keyPressed() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently typed value when\nkeyPressed() is called by p5.js:

            \n\nfunction keyPressed() {\n if (key === 'c') {\n // Code to run.\n }\n\n

            if (keyCode === ENTER) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyPressed() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyPressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various key events. For\nexample, some browsers may jump to the bottom of a web page when the\nSPACE key is pressed. To prevent any default behavior for this event, add\nreturn false; to the end of the function.

            \n","itemtype":"method","name":"keyPressed","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses a key.\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the \"b\" key. It turns white when the user presses the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user presses the 'a' or 'b' key.\nfunction keyPressed() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses an arrow key.\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":461,"description":"

            A function that's called once when any key is released.

            \n

            Declaring the function keyReleased() sets a code block to run once\nautomatically when the user releases any key:

            \n\nfunction keyReleased() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently released value when\nkeyReleased() is called by p5.js:

            \n\nfunction keyReleased() {\n if (key === 'c') {\n // Code to run.\n }\n\n

            if (keyCode === ENTER) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyReleased() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add return false; to the end\nof the function.

            \n","itemtype":"method","name":"keyReleased","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user releases a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle value when the user releases a key.\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes white when the user releases the \"w\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Set value to 255 the user releases the 'w' key.\nfunction keyReleased() {\n if (key === 'w') {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user releases an arrow key.\nfunction keyReleased() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":639,"description":"

            A function that's called once when keys with printable characters are pressed.

            \n

            Declaring the function keyTyped() sets a code block to run once\nautomatically when the user presses any key with a printable character such\nas a or 1. Modifier keys such as SHIFT, CONTROL, and the arrow keys\nwill be ignored:

            \n\nfunction keyTyped() {\n // Code to run.\n}\n\n\n

            The key and keyCode\nvariables will be updated with the most recently released value when\nkeyTyped() is called by p5.js:

            \n\nfunction keyTyped() {\n // Check for the \"c\" character using key.\n if (key === 'c') {\n // Code to run.\n }\n\n

            // Check for \"c\" using keyCode.\n if (keyCode === 67) {\n // Code to run.\n }\n}\n

            \n

            The parameter, event, is optional. keyTyped() is always passed a\nKeyboardEvent\nobject with properties that describe the key press event:

            \n\nfunction keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Note: Use the keyPressed() function and\nkeyCode system variable to respond to modifier\nkeys such as ALT.

            \n

            Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add return false; to the end\nof the function.

            \n","itemtype":"method","name":"keyTyped","params":[{"name":"event","description":"

            optional KeyboardEvent callback argument.

            \n","type":"KeyboardEvent","optional":true}],"example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n// Note: Pressing special keys such as SPACE have no effect.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user types a printable key.\nfunction keyTyped() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user types the \"b\" key. It turns white when the user types the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user types the 'a' or 'b' key.\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":785,"description":"

            The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.

            \n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":795,"description":"

            Returns true if the key it’s checking is pressed and false if not.

            \n

            keyIsDown() is helpful when checking for multiple different key presses.\nFor example, keyIsDown() can be used to check if both LEFT_ARROW and\nUP_ARROW are pressed:

            \n\nif (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {\n // Move diagonally.\n}\n\n\n

            keyIsDown() can check for key presses using\nkeyCode values, as in keyIsDown(37) or\nkeyIsDown(LEFT_ARROW). Key codes can be found on websites such as\nkeycode.info.

            \n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"

            key to check.

            \n","type":"Number"}],"return":{"description":"whether the key is down or not.","type":"Boolean"},"example":["\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(LEFT_ARROW) === true) {\n x -= 1;\n }\n\n if (keyIsDown(RIGHT_ARROW) === true) {\n x += 1;\n }\n\n if (keyIsDown(UP_ARROW) === true) {\n y -= 1;\n }\n\n if (keyIsDown(DOWN_ARROW) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n\n
            \n\n
            \n\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(37) === true) {\n x -= 1;\n }\n\n if (keyIsDown(39) === true) {\n x += 1;\n }\n\n if (keyIsDown(38) === true) {\n y -= 1;\n }\n\n if (keyIsDown(40) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"

            A Number system variable that tracks the mouse's horizontal movement.

            \n

            movedX tracks how many pixels the mouse moves left or right between\nframes. movedX will have a negative value if the mouse moves left between\nframes and a positive value if it moves right. movedX can be calculated\nas mouseX - pmouseX.

            \n

            Note: movedX continues updating even when\nrequestPointerLock() is active.

            \n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \">>\" appears when the user moves the mouse to the right. The text \"<<\" appears when the user moves the mouse to the left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display >> when movedX is positive and\n // << when it's negative.\n if (movedX > 0) {\n text('>>', 50, 50);\n } else if (movedX < 0) {\n text('<<', 50, 50);\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":57,"description":"

            A Number system variable that tracks the mouse's vertical movement.

            \n

            movedY tracks how many pixels the mouse moves up or down between\nframes. movedY will have a negative value if the mouse moves up between\nframes and a positive value if it moves down. movedY can be calculated\nas mouseY - pmouseY.

            \n

            Note: movedY continues updating even when\nrequestPointerLock() is active.

            \n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \"▲\" appears when the user moves the mouse upward. The text \"▼\" appears when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display ▼ when movedY is positive and\n // ▲ when it's negative.\n if (movedY > 0) {\n text('▼', 50, 50);\n } else if (movedY < 0) {\n text('▲', 50, 50);\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":109,"description":"

            A Number system variable that tracks the mouse's horizontal position.

            \n

            In 2D mode, mouseX keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe left edge of the canvas, then mouseX will be 50.

            \n

            In WebGL mode, mouseX keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels to the right\nof the canvas' center, then mouseX will be 50.

            \n

            If touch is used instead of the mouse, then mouseX will hold the\nx-coordinate of the most recent touch point.

            \n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a vertical line that follows the mouse's x-coordinate.\n line(mouseX, 0, mouseX, 100);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let mx = mouseX - 50;\n\n // Draw the line.\n line(mx, -50, mx, 50);\n}\n\n
            \n\n
            \n\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":220,"description":"

            A Number system variable that tracks the mouse's vertical position.

            \n

            In 2D mode, mouseY keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe top edge of the canvas, then mouseY will be 50.

            \n

            In WebGL mode, mouseY keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels below the\ncanvas' center, then mouseY will be 50.

            \n

            If touch is used instead of the mouse, then mouseY will hold the\ny-coordinate of the most recent touch point.

            \n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a horizontal line that follows the mouse's y-coordinate.\n line(0, mouseY, 0, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let my = mouseY - 50;\n\n // Draw the line.\n line(-50, my, 50, my);\n}\n\n
            \n\n
            \n\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":331,"description":"

            A Number system variable that tracks the mouse's previous horizontal\nposition.

            \n

            In 2D mode, pmouseX keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\nmouseX from the previous frame. For example, if\nthe mouse was 50 pixels from the left edge of the canvas during the last\nframe, then pmouseX will be 50.

            \n

            In WebGL mode, pmouseX keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels to the right\nof the canvas' center during the last frame, then pmouseX will be 50.

            \n

            If touch is used instead of the mouse, then pmouseX will hold the\nx-coordinate of the last touch point.

            \n

            Note: pmouseX is reset to the current mouseX\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":400,"description":"

            A Number system variable that tracks the mouse's previous vertical\nposition.

            \n

            In 2D mode, pmouseY keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\nmouseY from the previous frame. For example, if\nthe mouse was 50 pixels from the top edge of the canvas during the last\nframe, then pmouseY will be 50.

            \n

            In WebGL mode, pmouseY keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels below the\ncanvas' center during the last frame, then pmouseY will be 50.

            \n

            If touch is used instead of the mouse, then pmouseY will hold the\ny-coordinate of the last touch point.

            \n

            Note: pmouseY is reset to the current mouseY\nvalue at the start of each touch event.

            \n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":469,"description":"

            A Number variable that tracks the mouse's horizontal position within the\nbrowser.

            \n

            winMouseX keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe left edge of the browser, then winMouseX will be 50.

            \n

            On a touchscreen device, winMouseX will hold the x-coordinate of the most\nrecent touch point.

            \n

            Note: Use mouseX to track the mouse’s\nx-coordinate within the canvas.

            \n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":510,"description":"

            A Number variable that tracks the mouse's vertical position within the\nbrowser.

            \n

            winMouseY keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe top edge of the browser, then winMouseY will be 50.

            \n

            On a touchscreen device, winMouseY will hold the y-coordinate of the most\nrecent touch point.

            \n

            Note: Use mouseY to track the mouse’s\ny-coordinate within the canvas.

            \n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":551,"description":"

            A Number variable that tracks the mouse's previous horizontal position\nwithin the browser.

            \n

            pwinMouseX keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\nwinMouseX from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe left edge of the browser during the last frame, then pwinMouseX will\nbe 50.

            \n

            On a touchscreen device, pwinMouseX will hold the x-coordinate of the most\nrecent touch point. pwinMouseX is reset to the current\nwinMouseX value at the start of each touch\nevent.

            \n

            Note: Use pmouseX to track the mouse’s previous\nx-coordinate within the canvas.

            \n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseX - pwinMouseX;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseX.\n text(pwinMouseX, 50, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":622,"description":"

            A Number variable that tracks the mouse's previous vertical position\nwithin the browser.

            \n

            pwinMouseY keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\nwinMouseY from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe top edge of the browser during the last frame, then pwinMouseY will\nbe 50.

            \n

            On a touchscreen device, pwinMouseY will hold the y-coordinate of the most\nrecent touch point. pwinMouseY is reset to the current\nwinMouseY value at the start of each touch\nevent.

            \n

            Note: Use pmouseY to track the mouse’s previous\ny-coordinate within the canvas.

            \n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseY - pwinMouseY;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseY.\n text(pwinMouseY, 50, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":693,"description":"

            A String system variable that contains the value of the last mouse button\npressed.

            \n

            The mouseButton variable is either LEFT, RIGHT, or CENTER,\ndepending on which button was pressed last.

            \n

            Note: Different browsers may track mouseButton differently. See\nMDN\nfor more information.

            \n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with black text at its center. The text changes from 0 to either \"left\" or \"right\" when the user clicks a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse button.\n text(mouseButton, 50, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A gray square. Different shapes appear at its center depending on the mouse button that's clicked.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n if (mouseButton === LEFT) {\n circle(50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n square(25, 25, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":761,"description":"

            A Boolean system variable that's true if the mouse is pressed and\nfalse if not.

            \n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word changes to \"true\" when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouseIsPressed variable.\n text(mouseIsPressed, 25, 50);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (mouseIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":882,"description":"

            A function that's called when the mouse moves.

            \n

            Declaring the function mouseMoved() sets a code block to run\nautomatically when the user moves the mouse without clicking any mouse\nbuttons:

            \n\nfunction mouseMoved() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseMoved() is called by p5.js:

            \n\nfunction mouseMoved() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseMoved() is always passed a\nMouseEvent\nobject with properties that describe the mouse move event:

            \n\nfunction mouseMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":968,"description":"

            A function that's called when the mouse moves while a button is pressed.

            \n

            Declaring the function mouseDragged() sets a code block to run\nautomatically when the user clicks and drags the mouse:

            \n\nfunction mouseDragged() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseDragged() is called by p5.js:

            \n\nfunction mouseDragged() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseDragged() is always passed a\nMouseEvent\nobject with properties that describe the mouse drag event:

            \n\nfunction mouseDragged(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseDragged() will run when a user moves a touch\npoint if touchMoved() isn’t declared. If\ntouchMoved() is declared, then\ntouchMoved() will run when a user moves a\ntouch point and mouseDragged() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseDragged() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1084,"description":"

            A function that's called once when a mouse button is pressed.

            \n

            Declaring the function mousePressed() sets a code block to run\nautomatically when the user presses a mouse button:

            \n\nfunction mousePressed() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mousePressed() is called by p5.js:

            \n\nfunction mousePressed() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mousePressed() is always passed a\nMouseEvent\nobject with properties that describe the mouse press event:

            \n\nfunction mousePressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mousePressed() will run when a user’s touch\nbegins if touchStarted() isn’t declared. If\ntouchStarted() is declared, then\ntouchStarted() will run when a user’s touch\nbegins and mousePressed() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(), mouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user clicks the mouse.\nmouseReleased() runs as soon as the user\nreleases the mouse click. mouseClicked()\nruns immediately after mouseReleased().

            \n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mousePressed() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1256,"description":"

            A function that's called once when a mouse button is released.

            \n

            Declaring the function mouseReleased() sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:

            \n\nfunction mouseReleased() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseReleased() is called by p5.js:

            \n\nfunction mouseReleased() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseReleased() is always passed a\nMouseEvent\nobject with properties that describe the mouse release event:

            \n\nfunction mouseReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseReleased() will run when a user’s touch\nends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then\ntouchEnded() will run when a user’s touch\nends and mouseReleased() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(), mouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user\nclicks the mouse. mouseReleased() runs as soon as the user releases the\nmouse click. mouseClicked() runs\nimmediately after mouseReleased().

            \n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseReleased() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1429,"description":"

            A function that's called once after a mouse button is pressed and released.

            \n

            Declaring the function mouseClicked() sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:

            \n\nfunction mouseClicked() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseClicked() is called by p5.js:

            \n\nfunction mouseClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseClicked() is always passed a\nMouseEvent\nobject with properties that describe the mouse click event:

            \n\nfunction mouseClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseClicked() will run when a user’s touch\nends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then\ntouchEnded() will run when a user’s touch\nends and mouseClicked() won’t.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: mousePressed(),\nmouseReleased(),\nand mouseClicked() are all related.\nmousePressed() runs as soon as the user\nclicks the mouse. mouseReleased() runs as\nsoon as the user releases the mouse click. mouseClicked() runs\nimmediately after mouseReleased().

            \n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user clicks.\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1585,"description":"

            A function that's called once when a mouse button is clicked twice quickly.

            \n

            Declaring the function doubleClicked() sets a code block to run\nautomatically when the user presses and releases the mouse button twice\nquickly:

            \n\nfunction doubleClicked() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when doubleClicked() is called by p5.js:

            \n\nfunction doubleClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. doubleClicked() is always passed a\nMouseEvent\nobject with properties that describe the double-click event:

            \n\nfunction doubleClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, code placed in doubleClicked() will run after two\ntouches that occur within a short time.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"

            optional MouseEvent argument.

            \n","type":"MouseEvent","optional":true}],"example":["\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user double-clicks.\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n fill(value);\n\n // Draw the circle.\n circle(50, 50, 80);\n}\n\n// Reassign value to 255 when the user double-clicks on the circle.\nfunction doubleClicked() {\n if (dist(50, 50, mouseX, mouseY) < 40) {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1732,"description":"

            A function that's called once when the mouse wheel moves.

            \n

            Declaring the function mouseWheel() sets a code block to run\nautomatically when the user scrolls with the mouse wheel:

            \n\nfunction mouseWheel() {\n // Code to run.\n}\n\n\n

            The mouse system variables, such as mouseX and\nmouseY, will be updated with their most recent\nvalue when mouseWheel() is called by p5.js:

            \n\nfunction mouseWheel() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n

            if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n

            \n

            The parameter, event, is optional. mouseWheel() is always passed a\nMouseEvent\nobject with properties that describe the mouse scroll event:

            \n\nfunction mouseWheel(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            The event object has many properties including delta, a Number\ncontaining the distance that the user scrolled. For example, event.delta\nmight have the value 5 when the user scrolls up. event.delta is positive\nif the user scrolls up and negative if they scroll down. The signs are\nopposite on macOS with \"natural\" scrolling enabled.

            \n

            Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd return false; to the end of the function.

            \n

            Note: On Safari, mouseWheel() may only work as expected if\nreturn false; is added at the end of the function.

            \n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"

            optional WheelEvent argument.

            \n","type":"WheelEvent","optional":true}],"example":["\n
            \n\nlet circleSize = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle\n circle(circleSize, 50, 50);\n}\n\n// Increment circleSize when the user scrolls the mouse wheel.\nfunction mouseWheel() {\n circleSize += 1;\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            \n\n
            \n\nlet direction = '';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Draw an arrow that points where\n // the mouse last scrolled.\n text(direction, 50, 50);\n}\n\n// Change direction when the user scrolls the mouse wheel.\nfunction mouseWheel(event) {\n if (event.delta > 0) {\n direction = '▲';\n } else {\n direction = '▼';\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1866,"description":"

            Locks the mouse pointer to its current position and makes it invisible.

            \n

            requestPointerLock() allows the mouse to move forever without leaving the\nscreen. Calling requestPointerLock() locks the values of\nmouseX, mouseY,\npmouseX, and pmouseY.\nmovedX and movedY\ncontinue updating and can be used to get the distance the mouse moved since\nthe last frame was drawn. Calling\nexitPointerLock() resumes updating the\nmouse system variables.

            \n

            Note: Most browsers require an input, such as a click, before calling\nrequestPointerLock(). It’s recommended to call requestPointerLock() in\nan event function such as doubleClicked().

            \n","itemtype":"method","name":"requestPointerLock","example":["\n
            \n\nlet score = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the text \"Score: X\" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update the score.\n score -= movedY;\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the score.\n text(`Score: ${score}`, 50, 50);\n}\n\n// Lock the pointer when the user double-clicks.\nfunction doubleClicked() {\n requestPointerLock();\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1932,"description":"

            Exits a pointer lock started with\nrequestPointerLock.

            \n

            Calling requestPointerLock() locks the values of\nmouseX, mouseY,\npmouseX, and pmouseY.\nCalling exitPointerLock() resumes updating the mouse system variables.

            \n

            Note: Most browsers require an input, such as a click, before calling\nrequestPointerLock(). It’s recommended to call requestPointerLock() in\nan event function such as doubleClicked().

            \n","itemtype":"method","name":"exitPointerLock","example":["\n
            \n\nlet isLocked = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a word at its center. The word changes between \"Unlocked\" and \"Locked\" when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Tell the user whether the pointer is locked.\n if (isLocked === true) {\n text('Locked', 50, 50);\n } else {\n text('Unlocked', 50, 50);\n }\n}\n\n// Toggle the pointer lock when the user double-clicks.\nfunction doubleClicked() {\n if (isLocked === true) {\n exitPointerLock();\n isLocked = false;\n } else {\n requestPointerLock();\n isLocked = true;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"

            An Array of all the current touch points on a touchscreen device.

            \n

            The touches array is empty by default. When the user touches their\nscreen, a new touch point is tracked and added to the array. Touch points\nare Objects with the following properties:

            \n\n// Iterate over the touches array.\nfor (let touch of touches) {\n // x-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.x);\n\n

            // y-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.y);

            \n

            // x-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winX);

            \n

            // y-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winY);

            \n

            // ID number\n console.log(touch.id);\n}\n

            \n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. White circles appear where the user touches the square.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at each touch point.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a label above each touch point.\n for (let touch of touches) {\n text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":125,"description":"

            A function that's called once each time the user touches the screen.

            \n

            Declaring a function called touchStarted() sets a code block to run\nautomatically each time the user begins touching a touchscreen device:

            \n\nfunction touchStarted() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchStarted() is called by p5.js:

            \n\nfunction touchStarted() {\n // Paint over the background.\n background(200);\n\n

            // Mark each touch point once with a circle.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchStarted() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchStarted(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mousePressed() will\nrun when a user’s touch starts if touchStarted() isn’t declared. If\ntouchStarted() is declared, then touchStarted() will run when a user’s\ntouch starts and mousePressed() won’t.

            \n

            Note: touchStarted(), touchEnded(), and\ntouchMoved() are all related.\ntouchStarted() runs as soon as the user touches a touchscreen device.\ntouchEnded() runs as soon as the user ends a\ntouch. touchMoved() runs repeatedly as the\nuser moves any touch points.

            \n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"

            optional TouchEvent argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors with each touch.\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":295,"description":"

            A function that's called when the user touches the screen and moves.

            \n

            Declaring the function touchMoved() sets a code block to run\nautomatically when the user touches a touchscreen device and moves:

            \n\nfunction touchMoved() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchMoved() is called by p5.js:

            \n\nfunction touchMoved() {\n // Paint over the background.\n background(200);\n\n

            // Mark each touch point while the user moves.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchMoved() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseDragged() will\nrun when the user’s touch points move if touchMoved() isn’t declared. If\ntouchMoved() is declared, then touchMoved() will run when a user’s\ntouch points move and mouseDragged() won’t.

            \n

            Note: touchStarted(),\ntouchEnded(), and\ntouchMoved() are all related.\ntouchStarted() runs as soon as the user\ntouches a touchscreen device. touchEnded()\nruns as soon as the user ends a touch. touchMoved() runs repeatedly as\nthe user moves any touch points.

            \n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"

            optional TouchEvent argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction touchMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":468,"description":"

            A function that's called once each time a screen touch ends.

            \n

            Declaring the function touchEnded() sets a code block to run\nautomatically when the user stops touching a touchscreen device:

            \n\nfunction touchEnded() {\n // Code to run.\n}\n\n\n

            The touches array will be updated with the most\nrecent touch points when touchEnded() is called by p5.js:

            \n\nfunction touchEnded() {\n // Paint over the background.\n background(200);\n\n

            // Mark each remaining touch point when the user stops\n // a touch.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n

            \n

            The parameter, event, is optional. touchEnded() will be passed a\nTouchEvent\nobject with properties that describe the touch event:

            \n\nfunction touchEnded(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n\n\n

            On touchscreen devices, mouseReleased() will\nrun when the user’s touch ends if touchEnded() isn’t declared. If\ntouchEnded() is declared, then touchEnded() will run when a user’s\ntouch ends and mouseReleased() won’t.

            \n

            Note: touchStarted(),\ntouchEnded(), and touchMoved() are all\nrelated. touchStarted() runs as soon as the\nuser touches a touchscreen device. touchEnded() runs as soon as the user\nends a touch. touchMoved() runs repeatedly as\nthe user moves any touch points.

            \n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"

            optional TouchEvent argument.

            \n","type":"TouchEvent","optional":true}],"example":["\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors when a touch ends.\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n
            \n\n
            \n\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n\n
            "],"class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":1,"description":"

            This module defines the filters for use with image buffers.

            \n

            This module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.

            \n

            Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.

            \n

            A number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.

            \n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"

            This module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.

            \n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"

            Creates a new p5.Image object.

            \n

            createImage() uses the width and height parameters to set the new\np5.Image object's dimensions in pixels. The new\np5.Image can be modified by updating its\npixels array or by calling its\nget() and\nset() methods. The\nloadPixels() method must be called\nbefore reading or modifying pixel values. The\nupdatePixels() method must be called\nfor updates to take effect.

            \n

            Note: The new p5.Image object is transparent by\ndefault.

            \n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"

            width in pixels.

            \n","type":"Integer"},{"name":"height","description":"

            height in pixels.

            \n","type":"Integer"}],"return":{"description":"new p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Set all the image's pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image's pixel values.\n img.updatePixels();\n\n // Draw the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Create a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n // Calculate the transparency.\n let a = map(x, 0, img.width, 0, 255);\n\n // Create a p5.Color object.\n let c = color(0, a);\n\n // Set the pixel's color.\n img.set(x, y, c);\n }\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horizontal color gradient that transitions from gray to black.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the pixels into memory.\n img.loadPixels();\n // Get the current pixel density.\n let d = pixelDensity();\n\n // Calculate the pixel that is halfway through the image's pixel array.\n let halfImage = 4 * (d * img.width) * (d * img.height / 2);\n\n // Set half of the image's pixels to black.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":153,"description":"

            Saves the current canvas as an image.

            \n

            By default, saveCanvas() saves the canvas as a PNG image called\nuntitled.png.

            \n

            The first parameter, filename, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\nsaveCanvas('drawing.png'), then the image will be saved using that\nformat.

            \n

            The second parameter, extension, is also optional. It sets the files format.\nEither 'png' or 'jpg' can be used. For example, saveCanvas('drawing', 'jpg')\nsaves the canvas to a file called drawing.jpg.

            \n

            Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.

            \n","itemtype":"method","name":"saveCanvas","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas();\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas.jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas', 'jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas(cnv);\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas.jpg');\n\n describe('A white square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas', 'jpg');\n\n describe('A white square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image","overloads":[{"line":153,"params":[{"name":"selectedCanvas","description":"

            reference to a\n specific HTML5 canvas element.

            \n","type":"p5.Framebuffer|p5.Element|HTMLCanvasElement"},{"name":"filename","description":"

            file name. Defaults to 'untitled'.

            \n","type":"String","optional":true},{"name":"extension","description":"

            file extension, either 'jpg' or 'png'. Defaults to 'png'.

            \n","type":"String","optional":true}]},{"line":267,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":558,"description":"

            Captures a sequence of frames from the canvas that can be saved as images.

            \n

            saveFrames() creates an array of frame objects. Each frame is stored as\nan object with its file type, file name, and image data as a string. For\nexample, the first saved frame might have the following properties:

            \n

            { ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }.

            \n

            The first parameter, filename, sets the prefix for the file names. For\nexample, setting the prefix to 'frame' would generate the image files\nframe0.png, frame1.png, and so on.

            \n

            The second parameter, extension, sets the file type to either 'png' or\n'jpg'.

            \n

            The third parameter, duration, sets the duration to record in seconds.\nThe maximum duration is 15 seconds.

            \n

            The fourth parameter, framerate, sets the number of frames to record per\nsecond. The maximum frame rate value is 22. Limits are placed on duration\nand framerate to avoid using too much memory. Recording large canvases\ncan easily crash sketches or even web browsers.

            \n

            The fifth parameter, callback, is optional. If a function is passed,\nimage files won't be saved by default. The callback function can be used\nto process an array containing the data for each captured frame. The array\nof image data contains a sequence of objects with three properties for each\nframe: imageData, filename, and extension.

            \n

            Note: Frames are downloaded as individual image files by default.

            \n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"

            prefix of file name.

            \n","type":"String"},{"name":"extension","description":"

            file extension, either 'jpg' or 'png'.

            \n","type":"String"},{"name":"duration","description":"

            duration in seconds to record. This parameter will be constrained to be less or equal to 15.

            \n","type":"Number"},{"name":"framerate","description":"

            number of frames to save per second. This parameter will be constrained to be less or equal to 22.

            \n","type":"Number"},{"name":"callback","description":"

            callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData, filename, and extension.

            \n","type":"Function(Array)","optional":true}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Save the frames when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveFrames('frame', 'png', 1, 5);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Print 5 frames when the user presses the mouse.\nfunction mousePressed() {\n saveFrames('frame', 'png', 1, 5, printFrames);\n}\n\n// Prints an array of objects containing raw image data, filenames, and extensions.\nfunction printFrames(frames) {\n for (let frame of frames) {\n print(frame);\n }\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"

            Loads an image to create a p5.Image object.

            \n

            loadImage() interprets the first parameter one of three ways. If the path\nto an image file is provided, loadImage() will load it. Paths to local\nfiles should be relative, such as 'assets/thundercat.jpg'. URLs such as\n'https://example.com/thundercat.jpg' may be blocked due to browser\nsecurity. Raw image data can also be passed as a base64 encoded image in\nthe form 'data:image/png;base64,arandomsequenceofcharacters'.

            \n

            The second parameter is optional. If a function is passed, it will be\ncalled once the image has loaded. The callback function can optionally use\nthe new p5.Image object.

            \n

            The third parameter is also optional. If a function is passed, it will be\ncalled if the image fails to load. The callback function can optionally use\nthe event error.

            \n

            Images can take time to load. Calling loadImage() in\npreload() ensures images load before they're\nused in setup() or draw().

            \n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"

            path of the image to be loaded or base64 encoded image.

            \n","type":"String"},{"name":"successCallback","description":"

            function called with\n p5.Image once it\n loads.

            \n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"

            function called with event\n error if the image fails to load.

            \n","type":"Function(Event)","optional":true}],"return":{"description":"the p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Call handleImage() once the image loads.\n loadImage('assets/laDefense.jpg', handleImage);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Call handleImage() once the image loads or\n // call handleError() if an error occurs.\n loadImage('assets/laDefense.jpg', handleImage, handleError);\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Log the error.\nfunction handleError(event) {\n console.error('Oops!', event);\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":204,"description":"

            Generates a gif from a sketch and saves it to a file.

            \n

            saveGif() may be called in setup() or at any\npoint while a sketch is running.

            \n

            The first parameter, fileName, sets the gif's file name.

            \n

            The second parameter, duration, sets the gif's duration in seconds.

            \n

            The third parameter, options, is optional. If an object is passed,\nsaveGif() will use its properties to customize the gif. saveGif()\nrecognizes the properties delay, units, silent,\nnotificationDuration, and notificationID.

            \n","itemtype":"method","name":"saveGif","params":[{"name":"filename","description":"

            file name of gif.

            \n","type":"String"},{"name":"duration","description":"

            duration in seconds to capture from the sketch.

            \n","type":"Number"},{"name":"options","description":"

            an object that can contain five more properties:\n delay, a Number specifying how much time to wait before recording;\n units, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;\n silent, a Boolean that defines presence of progress notifications. By default it’s false;\n notificationDuration, a Number that defines how long in seconds the final notification\n will live. By default it's 0, meaning the notification will never be removed;\n notificationID, a String that specifies the id of the notification's DOM element. By default it’s 'progressBar’.

            \n","type":"Object","optional":true}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\n// Wait 1 second after the key press before recording.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5, { delay: 1 });\n }\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":639,"description":"

            Helper function for loading GIF-based images

            \n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":888,"description":"

            Draws an image to the canvas.

            \n

            The first parameter, img, is the source image to be drawn. img can be\nany of the following objects:

            \n\n

            The second and third parameters, dx and dy, set the coordinates of the\ndestination image's top left corner. See\nimageMode() for other ways to position images.

            \n

            Here's a diagram that explains how optional parameters work in image():

            \n

            \n

            The fourth and fifth parameters, dw and dh, are optional. They set the\nthe width and height to draw the destination image. By default, image()\ndraws the full source image at its original size.

            \n

            The sixth and seventh parameters, sx and sy, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.

            \n

            The eighth and ninth parameters, sw and sh, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, image() draws the full subsection that begins at\n(sx, sy) and extends to the edges of the source image.

            \n

            The ninth parameter, fit, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\nCONTAIN is passed, the full subsection will appear within the destination\nrectangle. If COVER is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.

            \n

            The tenth and eleventh paremeters, xAlign and yAlign, are also\noptional. They determine how to align the fitted subsection. xAlign can\nbe set to either LEFT, RIGHT, or CENTER. yAlign can be set to\neither TOP, BOTTOM, or CENTER. By default, both xAlign and yAlign\nare set to CENTER.

            \n","itemtype":"method","name":"image","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 10, 10);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image 50x50.\n image(img, 0, 0, 50, 50);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the center of the image.\n image(img, 25, 25, 50, 50, 25, 25, 50, 50);\n\n describe('An image of a gridded ceiling drawn in the center of a dark gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/moonwalk.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to fit within the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);\n\n describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n // Image is 50 x 50 pixels.\n img = loadImage('assets/laDefense50.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to cover the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);\n\n describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":888,"params":[{"name":"img","description":"

            image to display.

            \n","type":"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"},{"name":"x","description":"

            x-coordinate of the top-left corner of the image.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the top-left corner of the image.

            \n","type":"Number"},{"name":"width","description":"

            width to draw the image.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height to draw the image.

            \n","type":"Number","optional":true}]},{"line":1074,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"},{"name":"dx","description":"

            the x-coordinate of the destination\n rectangle in which to draw the source image

            \n","type":"Number"},{"name":"dy","description":"

            the y-coordinate of the destination\n rectangle in which to draw the source image

            \n","type":"Number"},{"name":"dWidth","description":"

            the width of the destination rectangle

            \n","type":"Number"},{"name":"dHeight","description":"

            the height of the destination rectangle

            \n","type":"Number"},{"name":"sx","description":"

            the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle

            \n","type":"Number"},{"name":"sy","description":"

            the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle

            \n","type":"Number"},{"name":"sWidth","description":"

            the width of the subsection of the\n source image to draw into the destination\n rectangle

            \n","type":"Number","optional":true},{"name":"sHeight","description":"

            the height of the subsection of the\n source image to draw into the destination rectangle

            \n","type":"Number","optional":true},{"name":"fit","description":"

            either CONTAIN or COVER

            \n","type":"Constant","optional":true},{"name":"xAlign","description":"

            either LEFT, RIGHT or CENTER default is CENTER

            \n","type":"Constant","optional":true},{"name":"yAlign","description":"

            either TOP, BOTTOM or CENTER default is CENTER

            \n","type":"Constant","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":1192,"description":"

            Tints images using a color.

            \n

            The version of tint() with one parameter interprets it one of four ways.\nIf the parameter is a number, it's interpreted as a grayscale value. If the\nparameter is a string, it's interpreted as a CSS color string. An array of\n[R, G, B, A] values or a p5.Color object can\nalso be used to set the tint color.

            \n

            The version of tint() with two parameters uses the first one as a\ngrayscale value and the second as an alpha value. For example, calling\ntint(255, 128) will make an image 50% transparent.

            \n

            The version of tint() with three parameters interprets them as RGB or\nHSB values, depending on the current\ncolorMode(). The optional fourth parameter\nsets the alpha value. For example, tint(255, 0, 0, 100) will give images\na red tint and make them transparent.

            \n","itemtype":"method","name":"tint","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with a CSS color string.\n tint('red');\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with RGB values.\n tint(255, 0, 0);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with RGBA values.\n tint(255, 0, 0, 100);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with grayscale and alpha values.\n tint(255, 180);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":1192,"params":[{"name":"v1","description":"

            red or hue value.

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value.

            \n","type":"Number"},{"name":"v3","description":"

            blue or brightness.

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":1318,"params":[{"name":"value","description":"

            CSS color string.

            \n","type":"String"}]},{"line":1323,"params":[{"name":"gray","description":"

            grayscale value.

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":1329,"params":[{"name":"values","description":"

            array containing the red, green, blue &\n alpha components of the color.

            \n","type":"Number[]"}]},{"line":1335,"params":[{"name":"color","description":"

            the tint color

            \n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":1345,"description":"

            Removes the current tint set by tint().

            \n

            noTint() restores images to their original colors.

            \n","itemtype":"method","name":"noTint","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n // Tint with a CSS color string.\n tint('red');\n image(img, 0, 0);\n\n // Right.\n // Remove the tint.\n noTint();\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":1395,"description":"

            Changes the location from which images are drawn when\nimage() is called.

            \n

            By default, the first\ntwo parameters of image() are the x- and\ny-coordinates of the image's upper-left corner. The next parameters are\nits width and height. This is the same as calling imageMode(CORNER).

            \n

            imageMode(CORNERS) also uses the first two parameters of\nimage() as the x- and y-coordinates of the image's\ntop-left corner. The third and fourth parameters are the coordinates of its\nbottom-right corner.

            \n

            imageMode(CENTER) uses the first two parameters of\nimage() as the x- and y-coordinates of the image's\ncenter. The next parameters are its width and height.

            \n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"

            either CORNER, CORNERS, or CENTER.

            \n","type":"Constant"}],"example":["\n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNER mode.\n imageMode(CORNER);\n\n // Display the image.\n image(img, 10, 10, 50, 50);\n\n describe('A square image of a brick wall is drawn at the top left of a gray square.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNERS mode.\n imageMode(CORNERS);\n\n // Display the image.\n image(img, 10, 10, 90, 40);\n\n describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CENTER mode.\n imageMode(CENTER);\n\n // Display the image.\n image(img, 50, 50, 80, 80);\n\n describe('A square image of a brick wall is drawn on a gray square.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"

            This module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":114,"description":"

            The image's width in pixels.

            \n","type":"{Number}","itemtype":"property","name":"width","readonly":"","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":151,"description":"

            The image's height in pixels.

            \n","type":"{Number}","itemtype":"property","name":"height","readonly":"","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":198,"description":"

            An array containing the color of each pixel in the image.

            \n

            Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. img.pixels is a one-dimensional array for performance\nreasons.

            \n

            Each pixel occupies four elements in the pixels array, one for each\nRGBA value. For example, the pixel at coordinates (0, 0) stores its\nRGBA values at img.pixels[0], img.pixels[1], img.pixels[2],\nand img.pixels[3], respectively. The next pixel at coordinates (1, 0)\nstores its RGBA values at img.pixels[4], img.pixels[5],\nimg.pixels[6], and img.pixels[7]. And so on. The img.pixels array\nfor a 100×100 p5.Image object has\n100 × 100 × 4 = 40,000 elements.

            \n

            Accessing the RGBA values for a pixel in the image requires a little\nmath as shown in the examples below. The\nimg.loadPixels()\nmethod must be called before accessing the img.pixels array. The\nimg.updatePixels() method must be\ncalled after any changes are made.

            \n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to red.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 255;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A red square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":299,"description":"

            Gets or sets the pixel density for high pixel density displays.

            \n

            By default, the density will be set to 1.

            \n

            Call this method with no arguments to get the default density, or pass\nin a number to set the density. If a non-positive number is provided,\nit defaults to 1.

            \n","itemtype":"method","name":"pixelDensity","params":[{"name":"density","description":"

            A scaling factor for the number of pixels per\nside

            \n","type":"Number","optional":true}],"return":{"description":"The current density if called without arguments, or the instance for chaining if setting density.","type":"Number"},"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":342,"description":"

            Helper function for animating GIF-based images with time

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":373,"description":"

            Helper fxn for sharing pixel methods

            \n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":381,"description":"

            Loads the current value of each pixel in the image into the img.pixels\narray.

            \n

            img.loadPixels() must be called before reading or modifying pixel\nvalues.

            \n","itemtype":"method","name":"loadPixels","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":462,"description":"

            Updates the canvas with the RGBA values in the\nimg.pixels array.

            \n

            img.updatePixels() only needs to be called after changing values in\nthe img.pixels array. Such changes can be\nmade directly after calling\nimg.loadPixels() or by calling\nimg.set().

            \n

            The optional parameters x, y, width, and height define a\nsubsection of the image to update. Doing so can improve performance in\nsome cases.

            \n

            If the image was loaded from a GIF, then calling img.updatePixels()\nwill update the pixels in current frame.

            \n","itemtype":"method","name":"updatePixels","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":462,"params":[{"name":"x","description":"

            x-coordinate of the upper-left corner\n of the subsection to update.

            \n","type":"Integer"},{"name":"y","description":"

            y-coordinate of the upper-left corner\n of the subsection to update.

            \n","type":"Integer"},{"name":"w","description":"

            width of the subsection to update.

            \n","type":"Integer"},{"name":"h","description":"

            height of the subsection to update.

            \n","type":"Integer"}]},{"line":555,"params":[]}]},{"file":"src/image/p5.Image.js","line":563,"description":"

            Gets a pixel or a region of pixels from the image.

            \n

            img.get() is easy to use but it's not as fast as\nimg.pixels. Use\nimg.pixels to read many pixel values.

            \n

            The version of img.get() with no parameters returns the entire image.

            \n

            The version of img.get() with two parameters, as in img.get(10, 20),\ninterprets them as coordinates. It returns an array with the\n[R, G, B, A] values of the pixel at the given point.

            \n

            The version of img.get() with four parameters, as in\nimg,get(10, 20, 50, 90), interprets them as\ncoordinates and dimensions. The first two parameters are the coordinates\nof the upper-left corner of the subsection. The last two parameters are\nthe width and height of the subsection. It returns a subsection of the\ncanvas in a new p5.Image object.

            \n

            Use img.get() instead of get() to work directly\nwith images.

            \n","itemtype":"method","name":"get","return":{"description":"subsection as a p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":563,"params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"w","description":"

            width of the subsection to be returned.

            \n","type":"Number"},{"name":"h","description":"

            height of the subsection to be returned.

            \n","type":"Number"}],"return":{"description":"subsection as a p5.Image object.","type":"p5.Image"}},{"line":678,"params":[],"return":{"description":"whole p5.Image","type":"p5.Image"}},{"line":682,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of the pixel at (x, y) in array format `[R, G, B, A]`.","type":"Number[]"}}]},{"file":"src/image/p5.Image.js","line":697,"description":"

            Sets the color of one or more pixels within an image.

            \n

            img.set() is easy to use but it's not as fast as\nimg.pixels. Use\nimg.pixels to set many pixel values.

            \n

            img.set() interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a [R, G, B, A] pixel\narray, a p5.Color object, or another\np5.Image object.

            \n

            img.updatePixels() must be called\nafter using img.set() for changes to appear.

            \n","itemtype":"method","name":"set","params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"a","description":"

            grayscale value | pixel array |\n p5.Color object |\n p5.Image to copy.

            \n","type":"Number|Number[]|Object"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":837,"description":"

            Resizes the image to a given width and height.

            \n

            The image's original aspect ratio can be kept by passing 0 for either\nwidth or height. For example, calling img.resize(50, 0) on an image\nthat was 500 × 300 pixels will resize it to 50 × 30 pixels.

            \n","itemtype":"method","name":"resize","params":[{"name":"width","description":"

            resized image width.

            \n","type":"Number"},{"name":"height","description":"

            resized image height.

            \n","type":"Number"}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1006,"description":"

            Copies pixels from a source image to this image.

            \n

            The first parameter, srcImage, is an optional\np5.Image object to copy. If a source image isn't\npassed, then img.copy() can copy a region of this image to another\nregion.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto copy from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the region's width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof this image to copy into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the region's width and height.

            \n

            Calling img.copy() will scale pixels from the source region if it isn't\nthe same size as the destination region.

            \n","itemtype":"method","name":"copy","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":1006,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image|p5.Element"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"}]},{"line":1094,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"}]}]},{"file":"src/image/p5.Image.js","line":1109,"description":"

            Masks part of the image with another.

            \n

            img.mask() uses another p5.Image object's\nalpha channel as the alpha channel for this image. Masks are cumulative\nand can't be removed once applied.

            \n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image"}],"example":["\n
            \n\nlet photo;\nlet maskImage;\n\n// Load the images.\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1197,"description":"

            Applies an image filter to the image.

            \n

            The preset options are:

            \n

            INVERT\nInverts the colors in the image. No parameter is used.

            \n

            GRAY\nConverts the image to grayscale. No parameter is used.

            \n

            THRESHOLD\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.

            \n

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

            \n

            POSTERIZE\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.

            \n

            BLUR\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin P2D mode. A box blur is used in WEBGL mode.

            \n

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

            \n

            DILATE\nIncreases the light areas. No parameter is used.

            \n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"

            either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, ERODE, DILATE or BLUR.

            \n","type":"Constant"},{"name":"filterParam","description":"

            parameter unique to each filter.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1428,"description":"

            Copies a region of pixels from another image into this one.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto blend from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the regions width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to blend into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the regions width and height.

            \n

            The tenth parameter, blendMode, sets the effect used to blend the images'\ncolors. The options are BLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD, or NORMAL.

            \n","itemtype":"method","name":"blend","example":["\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n\n
            \n\n
            \n\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":1428,"params":[{"name":"srcImage","description":"

            source image

            \n","type":"p5.Image"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"},{"name":"blendMode","description":"

            the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.

            \n

            Available blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity

            \n

            http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/

            \n","type":"Constant"}]},{"line":1554,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"},{"name":"blendMode","description":"","type":"Constant"}]}]},{"file":"src/image/p5.Image.js","line":1598,"description":"

            Saves the image to a file.

            \n

            By default, img.save() saves the image as a PNG image called\nuntitled.png.

            \n

            The first parameter, filename, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\nimg.save('drawing.png'), then the image will be saved using that\nformat.

            \n

            The second parameter, extension, is also optional. It sets the files format.\nEither 'png' or 'jpg' can be used. For example, img.save('drawing', 'jpg')\nsaves the canvas to a file called drawing.jpg.

            \n

            Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.

            \n

            The image will only be downloaded as an animated GIF if it was loaded\nfrom a GIF file. See saveGif() to create new\nGIFs.

            \n","itemtype":"method","name":"save","params":[{"name":"filename","description":"

            filename. Defaults to 'untitled'.

            \n","type":"String"},{"name":"extension","description":"

            file extension, either 'png' or 'jpg'.\n Defaults to 'png'.

            \n","type":"String","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1666,"description":"

            Restarts an animated GIF at its first frame.

            \n","itemtype":"method","name":"reset","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1714,"description":"

            Gets the index of the current frame in an animated GIF.

            \n","itemtype":"method","name":"getCurrentFrame","return":{"description":"index of the GIF's current frame.","type":"Number"},"example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1756,"description":"

            Sets the current frame in an animated GIF.

            \n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"

            index of the frame to display.

            \n","type":"Number"}],"example":["\n
            \n\nlet gif;\nlet frameSlider;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1816,"description":"

            Returns the number of frames in an animated GIF.

            \n","itemtype":"method","name":"numFrames","return":{"description":"number of frames in the GIF.","type":"Number"},"example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1856,"description":"

            Plays an animated GIF that was paused with\nimg.pause().

            \n","itemtype":"method","name":"play","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1901,"description":"

            Pauses an animated GIF.

            \n

            The GIF can be resumed by calling\nimg.play().

            \n","itemtype":"method","name":"pause","example":["\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1950,"description":"

            Changes the delay between frames in an animated GIF.

            \n

            The first parameter, delay, is the length of the delay in milliseconds.

            \n

            The second parameter, index, is optional. If provided, only the frame\nat index will have its delay modified. All other frames will keep\ntheir default delay.

            \n","itemtype":"method","name":"delay","params":[{"name":"d","description":"

            delay in milliseconds between switching frames.

            \n","type":"Number"},{"name":"index","description":"

            index of the frame that will have its delay modified.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet gifFast;\nlet gifSlow;\n\n// Load the images.\nfunction preload() {\n gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n\n
            \n\n
            \n\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n\n
            "],"class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"

            An array containing the color of each pixel on the canvas.

            \n

            Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. pixels is a one-dimensional array for performance reasons.

            \n

            Each pixel occupies four elements in the pixels array, one for each RGBA\nvalue. For example, the pixel at coordinates (0, 0) stores its RGBA values\nat pixels[0], pixels[1], pixels[2], and pixels[3], respectively.\nThe next pixel at coordinates (1, 0) stores its RGBA values at pixels[4],\npixels[5], pixels[6], and pixels[7]. And so on. The pixels array\nfor a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.

            \n

            Some displays use several smaller pixels to set the color at a single\npoint. The pixelDensity() function returns\nthe pixel density of the canvas. High density displays often have a\npixelDensity() of 2. On such a display, the\npixels array for a 100×100 canvas has 200 × 200 × 4 =\n160,000 elements.

            \n

            Accessing the RGBA values for a point on the canvas requires a little math\nas shown below. The loadPixels() function\nmust be called before accessing the pixels array. The\nupdatePixels() function must be called\nafter any changes are made.

            \n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Set the dot's coordinates.\n let x = 50;\n let y = 50;\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Set the pixel(s) at the center of the canvas black.\n for (let i = 0; i < d; i += 1) {\n for (let j = 0; j < d; j += 1) {\n let index = 4 * ((y * d + j) * width * d + (x * d + i));\n // Red.\n pixels[index] = 0;\n // Green.\n pixels[index + 1] = 0;\n // Blue.\n pixels[index + 2] = 0;\n // Alpha.\n pixels[index + 3] = 255;\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A black dot in the middle of a gray rectangle.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n pixels[i] = 255;\n // Green.\n pixels[i + 1] = 0;\n // Blue.\n pixels[i + 2] = 0;\n // Alpha.\n pixels[i + 3] = 255;\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A red rectangle drawn above a gray rectangle.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let pink = color(255, 102, 204);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n pixels[i] = red(pink);\n pixels[i + 1] = green(pink);\n pixels[i + 2] = blue(pink);\n pixels[i + 3] = alpha(pink);\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A pink rectangle drawn above a gray rectangle.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":148,"description":"

            Copies a region of pixels from one image to another.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto blend from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the regions width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to blend into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the regions width and height.

            \n

            The tenth parameter, blendMode, sets the effect used to blend the images'\ncolors. The options are BLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD, or NORMAL

            \n","itemtype":"method","name":"blend","example":["\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks faded into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n\n
            \n\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks partially transparent.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n\n
            \n\n
            \n\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks washed out into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":148,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"},{"name":"blendMode","description":"

            the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.

            \n","type":"Constant"}]},{"line":267,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"},{"name":"blendMode","description":"","type":"Constant"}]}]},{"file":"src/image/pixels.js","line":288,"description":"

            Copies pixels from a source image to a region of the canvas.

            \n

            The first parameter, srcImage, is the\np5.Image object to blend. The source image can be\nthe canvas itself or a\np5.Image object. copy() will scale pixels from\nthe source region if it isn't the same size as the destination region.

            \n

            The next four parameters, sx, sy, sw, and sh determine the region\nto copy from the source image. (sx, sy) is the top-left corner of the\nregion. sw and sh are the region's width and height.

            \n

            The next four parameters, dx, dy, dw, and dh determine the region\nof the canvas to copy into. (dx, dy) is the top-left corner of the\nregion. dw and dh are the region's width and height.

            \n","itemtype":"method","name":"copy","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img);\n\n // Copy a region of pixels to another spot.\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":288,"params":[{"name":"srcImage","description":"

            source image.

            \n","type":"p5.Image|p5.Element"},{"name":"sx","description":"

            x-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sy","description":"

            y-coordinate of the source's upper-left corner.

            \n","type":"Integer"},{"name":"sw","description":"

            source image width.

            \n","type":"Integer"},{"name":"sh","description":"

            source image height.

            \n","type":"Integer"},{"name":"dx","description":"

            x-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dy","description":"

            y-coordinate of the destination's upper-left corner.

            \n","type":"Integer"},{"name":"dw","description":"

            destination image width.

            \n","type":"Integer"},{"name":"dh","description":"

            destination image height.

            \n","type":"Integer"}]},{"line":345,"params":[{"name":"sx","description":"","type":"Integer"},{"name":"sy","description":"","type":"Integer"},{"name":"sw","description":"","type":"Integer"},{"name":"sh","description":"","type":"Integer"},{"name":"dx","description":"","type":"Integer"},{"name":"dy","description":"","type":"Integer"},{"name":"dw","description":"","type":"Integer"},{"name":"dh","description":"","type":"Integer"}]}]},{"file":"src/image/pixels.js","line":442,"description":"

            Applies an image filter to the canvas.

            \n

            The preset options are:

            \n

            INVERT\nInverts the colors in the image. No parameter is used.

            \n

            GRAY\nConverts the image to grayscale. No parameter is used.

            \n

            THRESHOLD\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.

            \n

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

            \n

            POSTERIZE\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.

            \n

            BLUR\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin P2D mode. A box blur is used in WEBGL mode.

            \n

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

            \n

            DILATE\nIncreases the light areas. No parameter is used.

            \n

            filter() uses WebGL in the background by default because it's faster.\nThis can be disabled in P2D mode by adding a false argument, as in\nfilter(BLUR, false). This may be useful to keep computation off the GPU\nor to work around a lack of WebGL support.

            \n

            In WebgL mode, filter() can also use custom shaders. See\ncreateFilterShader() for more\ninformation.

            \n","itemtype":"method","name":"filter","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the INVERT filter.\n filter(INVERT);\n\n describe('A blue brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the GRAY filter.\n filter(GRAY);\n\n describe('A brick wall drawn in grayscale.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the THRESHOLD filter.\n filter(THRESHOLD);\n\n describe('A brick wall drawn in black and white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the OPAQUE filter.\n filter(OPAQUE);\n\n describe('A red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the POSTERIZE filter.\n filter(POSTERIZE, 3);\n\n describe('An image of a red brick wall drawn with limited color palette.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n filter(BLUR, 3);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the DILATE filter.\n filter(DILATE);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the ERODE filter.\n filter(ERODE);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n // Don't use WebGL.\n filter(BLUR, 3, false);\n\n describe('A blurry image of a red brick wall.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":442,"params":[{"name":"filterType","description":"

            either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.

            \n","type":"Constant"},{"name":"filterParam","description":"

            parameter unique to each filter.

            \n","type":"Number","optional":true},{"name":"useWebGL","description":"

            flag to control whether to use fast\n WebGL filters (GPU) or original image\n filters (CPU); defaults to true.

            \n","type":"Boolean","optional":true}]},{"line":715,"params":[{"name":"filterType","description":"","type":"Constant"},{"name":"useWebGL","description":"","type":"Boolean","optional":true}]},{"line":720,"params":[{"name":"shaderFilter","description":"

            shader that's been loaded, with the\n frag shader using a tex0 uniform.

            \n","type":"p5.Shader"}]}]},{"file":"src/image/pixels.js","line":820,"description":"

            Gets a pixel or a region of pixels from the canvas.

            \n

            get() is easy to use but it's not as fast as\npixels. Use pixels\nto read many pixel values.

            \n

            The version of get() with no parameters returns the entire canvas.

            \n

            The version of get() with two parameters interprets them as\ncoordinates. It returns an array with the [R, G, B, A] values of the\npixel at the given point.

            \n

            The version of get() with four parameters interprets them as coordinates\nand dimensions. It returns a subsection of the canvas as a\np5.Image object. The first two parameters are the\ncoordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.

            \n

            Use p5.Image.get() to work directly with\np5.Image objects.

            \n","itemtype":"method","name":"get","return":{"description":"subsection as a p5.Image object.","type":"p5.Image"},"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the entire canvas.\n let c = get();\n\n // Display half the canvas.\n image(c, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the color of a pixel.\n let c = get(50, 90);\n\n // Style the square with the pixel's color.\n fill(c);\n noStroke();\n\n // Display the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a region of the image.\n let c = get(0, 0, 50, 50);\n\n // Display the region.\n image(c, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":820,"params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"w","description":"

            width of the subsection to be returned.

            \n","type":"Number"},{"name":"h","description":"

            height of the subsection to be returned.

            \n","type":"Number"}],"return":{"description":"subsection as a p5.Image object.","type":"p5.Image"}},{"line":931,"params":[],"return":{"description":"whole canvas as a p5.Image.","type":"p5.Image"}},{"line":935,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of the pixel at (x, y) in array format `[R, G, B, A]`.","type":"Number[]"}}]},{"file":"src/image/pixels.js","line":946,"description":"

            Loads the current value of each pixel on the canvas into the\npixels array.

            \n

            loadPixels() must be called before reading from or writing to\npixels.

            \n","itemtype":"method","name":"loadPixels","example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":997,"description":"

            Sets the color of a pixel or draws an image to the canvas.

            \n

            set() is easy to use but it's not as fast as\npixels. Use pixels\nto set many pixel values.

            \n

            set() interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a [R, G, B, A] pixel\narray, a p5.Color object, or a\np5.Image object. If an image is passed, the first\ntwo parameters set the coordinates for the image's upper-left corner,\nregardless of the current imageMode().

            \n

            updatePixels() must be called after using\nset() for changes to appear.

            \n","itemtype":"method","name":"set","params":[{"name":"x","description":"

            x-coordinate of the pixel.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel.

            \n","type":"Number"},{"name":"c","description":"

            grayscale value | pixel array |\n p5.Color object | p5.Image to copy.

            \n","type":"Number|Number[]|Object"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set four pixels to black.\n set(30, 20, 0);\n set(85, 20, 0);\n set(85, 75, 0);\n set(30, 75, 0);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n set(30, 20, black);\n set(85, 20, black);\n set(85, 75, black);\n set(30, 75, black);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Draw a horizontal color gradient.\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n // Calculate the grayscale value.\n let c = map(x, 0, 100, 0, 255);\n\n // Set the pixel using the grayscale value.\n set(x, y, c);\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A horiztonal color gradient from black to white.');\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the image to set all pixels.\n set(0, 0, img);\n\n // Update the canvas.\n updatePixels();\n\n describe('An image of a mountain landscape.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":1118,"description":"

            Updates the canvas with the RGBA values in the\npixels array.

            \n

            updatePixels() only needs to be called after changing values in the\npixels array. Such changes can be made directly\nafter calling loadPixels() or by calling\nset().

            \n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"

            x-coordinate of the upper-left corner of region\n to update.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y-coordinate of the upper-left corner of region\n to update.

            \n","type":"Number","optional":true},{"name":"w","description":"

            width of region to update.

            \n","type":"Number","optional":true},{"name":"h","description":"

            height of region to update.

            \n","type":"Number","optional":true}],"example":["\n
            \n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n\n
            "],"class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":17,"description":"

            Loads a JSON file from a file or a URL, and returns an Object.\nNote that even if the JSON file contains an Array, an Object will be\nreturned with index numbers as keys.

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. JSONP is supported via a polyfill and you\ncan pass in as the second argument an object with definitions of the json\ncallback following the syntax specified here.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling loadJSON() inside preload() guarantees to complete the\noperation before setup() and draw() are called.\n\n
            \n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n 'summary/all_day.geojson';\n earthquakes = loadJSON(url);\n}\n\nfunction setup() {\n noLoop();\n}\n\nfunction draw() {\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n describe(`50×50 ellipse that changes from black to white\n depending on the current humidity`);\n}\n
            \n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n
            \nfunction setup() {\n noLoop();\n let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n 'summary/all_day.geojson';\n loadJSON(url, drawEarthquake);\n}\n\nfunction draw() {\n background(200);\n describe(`50×50 ellipse that changes from black to white\n depending on the current humidity`);\n}\n\nfunction drawEarthquake(earthquakes) {\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":17,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"jsonpOptions","description":"

            options object for jsonp related settings

            \n","type":"Object","optional":true},{"name":"datatype","description":"

            \"json\" or \"jsonp\"

            \n","type":"String","optional":true},{"name":"callback","description":"

            function to be executed after\n loadJSON() completes, data is passed\n in as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":101,"params":[{"name":"path","description":"","type":"String"},{"name":"datatype","description":"","type":"String"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Object|Array"}},{"line":109,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Object|Array"}}]},{"file":"src/io/files.js","line":180,"description":"

            Reads the contents of a file and creates a String array of its individual\nlines. If the name of the file is used as the parameter, as in the above\nexample, the file must be located in the sketch directory/folder.

            \n

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

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadStrings()\n completes, Array is passed in as first\n argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside preload() guarantees to complete the\noperation before setup() and draw() are called.\n\n
            \nlet result;\nfunction preload() {\n result = loadStrings('assets/test.txt');\n}\n\nfunction setup() {\n background(200);\n text(random(result), 10, 10, 80, 80);\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n
            \n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n
            \nfunction setup() {\n loadStrings('assets/test.txt', pickString);\n describe(`randomly generated text from a file,\n for example \"i have three feet\"`);\n}\n\nfunction pickString(result) {\n background(200);\n text(random(result), 10, 10, 80, 80);\n}\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":300,"description":"

            Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\nOutside of preload(), you may supply a callback function to handle the\nobject:

            \n

            All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"extension","description":"

            parse the table by comma-separated values \"csv\", semicolon-separated\n values \"ssv\", or tab-separated values \"tsv\"

            \n","type":"String","optional":true},{"name":"header","description":"

            \"header\" to indicate table has header row

            \n","type":"String","optional":true},{"name":"callback","description":"

            function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"Table object containing data","type":"Object"},"example":["\n
            \n\n// Given the following CSV file called \"mammals.csv\"\n// located in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n //the file can be remote\n //table = loadTable(\"http://p5js.org/reference/assets/mammals.csv\",\n // \"csv\", \"header\");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n\n print(table.getColumn('name'));\n //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n //cycle through the table\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":575,"description":"

            Reads the contents of a file and creates an XML object with its values.\nIf the name of the file is used as the parameter, as in the above example,\nthe file must be located in the sketch directory/folder.

            \n

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

            \n

            This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadXML() inside preload()\nguarantees to complete the operation before setup() and draw() are called.

            \n

            Outside of preload(), you may supply a callback function to handle the\nobject.

            \n

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadXML()\n completes, XML object is passed in as\n first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum('id');\n let coloring = children[i].getString('species');\n let name = children[i].getContent();\n print(id + ', ' + coloring + ', ' + name);\n }\n describe('no image displayed');\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":683,"description":"

            This method is suitable for fetching files up to size of 64MB.

            \n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"

            name of the file or URL to load

            \n","type":"String"},{"name":"callback","description":"

            function to be executed after loadBytes()\n completes

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if there\n is an error

            \n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n
            \nlet data;\n\nfunction preload() {\n data = loadBytes('assets/mammals.xml');\n}\n\nfunction setup() {\n for (let i = 0; i < 5; i++) {\n console.log(data.bytes[i].toString(16));\n }\n describe('no image displayed');\n}\n
            "],"class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":740,"description":"

            Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'GET'). The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).

            \n","itemtype":"method","name":"httpGet","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n httpGet(url, 'jsonp', false, function(response) {\n // when the HTTP request completes, populate the variable that holds the\n // earthquake data used in the visualization.\n earthquakes = response;\n });\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":740,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n \"xml\", or \"text\"

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object|Boolean","optional":true},{"name":"callback","description":"

            function to be executed after\n httpGet() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":794,"params":[{"name":"path","description":"","type":"String"},{"name":"data","description":"","type":"Object|Boolean"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}},{"line":802,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":816,"description":"

            Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'POST').

            \n","itemtype":"method","name":"httpPost","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n text(result.body, mouseX, mouseY);\n });\n}\n\n
            \n\n
            \nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":816,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"xml\", or \"text\".\n If omitted, httpPost() will guess.

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object|Boolean","optional":true},{"name":"callback","description":"

            function to be executed after\n httpPost() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":883,"params":[{"name":"path","description":"","type":"String"},{"name":"data","description":"","type":"Object|Boolean"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}},{"line":891,"params":[{"name":"path","description":"","type":"String"},{"name":"callback","description":"","type":"Function"},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":905,"description":"

            Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.

            \nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\nThis method is suitable for fetching files up to size of 64MB when \"GET\" is used.

            \n","itemtype":"method","name":"httpDo","return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"},"example":["\n
            \n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction preload() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":905,"params":[{"name":"path","description":"

            name of the file or url to load

            \n","type":"String"},{"name":"method","description":"

            either \"GET\", \"POST\", or \"PUT\",\n defaults to \"GET\"

            \n","type":"String","optional":true},{"name":"datatype","description":"

            \"json\", \"jsonp\", \"xml\", or \"text\"

            \n","type":"String","optional":true},{"name":"data","description":"

            param data passed sent with request

            \n","type":"Object","optional":true},{"name":"callback","description":"

            function to be executed after\n httpGet() completes, data is passed in\n as first argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to be executed if\n there is an error, response is passed\n in as first argument

            \n","type":"Function","optional":true}],"return":{"description":"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.","type":"Promise"}},{"line":976,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"

            Request object options as documented in the\n \"fetch\" API\nreference

            \n","type":"Object"},{"name":"callback","description":"","type":"Function","optional":true},{"name":"errorCallback","description":"","type":"Function","optional":true}],"return":{"description":"","type":"Promise"}}]},{"file":"src/io/files.js","line":1141,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"

            name of the file to be created

            \n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n const writer = createWriter('squares.txt');\n for (let i = 0; i < 10; i++) {\n writer.print(i * i);\n }\n writer.close();\n writer.clear();\n }\n}\n\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1196,"description":"

            Writes data to the PrintWriter stream

            \n","itemtype":"method","name":"write","params":[{"name":"data","description":"

            all data to be written by the PrintWriter

            \n","type":"Array"}],"example":["\n
            \n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// write 'Hello world!'' to the file\nwriter.write(['Hello world!']);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// creates a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write 'apples,bananas,123' to the file\nwriter.write(['apples', 'bananas', 123]);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// creates a file called 'newFile3.txt'\nlet writer = createWriter('newFile3.txt');\n// write 'My name is: Teddy' to the file\nwriter.write('My name is:');\nwriter.write(' Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\nfunction setup() {\n createCanvas(100, 100);\n button = createButton('SAVE FILE');\n button.position(21, 40);\n button.mousePressed(createFile);\n}\n\nfunction createFile() {\n // creates a file called 'newFile.txt'\n let writer = createWriter('newFile.txt');\n // write 'Hello world!'' to the file\n writer.write(['Hello world!']);\n // close the PrintWriter and save the file\n writer.close();\n}\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1255,"description":"

            Writes data to the PrintWriter stream, and adds a new line at the end

            \n","itemtype":"method","name":"print","params":[{"name":"data","description":"

            all data to be printed by the PrintWriter

            \n","type":"Array"}],"example":["\n
            \n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// creates a file containing\n// My name is:\n// Teddy\nwriter.print('My name is:');\nwriter.print('Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\nlet writer;\n\nfunction setup() {\n createCanvas(400, 400);\n // create a PrintWriter\n writer = createWriter('newFile.txt');\n}\n\nfunction draw() {\n writer.print([mouseX, mouseY]);\n}\n\nfunction mouseClicked() {\n writer.close();\n}\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1296,"description":"

            Clears the data already written to the PrintWriter object

            \n","itemtype":"method","name":"clear","example":["\n
            \n// create writer object\nlet writer = createWriter('newFile.txt');\nwriter.write(['clear me']);\n// clear writer object here\nwriter.clear();\n// close writer\nwriter.close();\n
            \n
            \n\nfunction setup() {\n button = createButton('CLEAR ME');\n button.position(21, 40);\n button.mousePressed(createFile);\n}\n\nfunction createFile() {\n let writer = createWriter('newFile.txt');\n writer.write(['clear me']);\n writer.clear();\n writer.close();\n}\n\n
            \n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1330,"description":"

            Closes the PrintWriter

            \n","itemtype":"method","name":"close","example":["\n
            \n\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n\n
            \n
            \n\n// create a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write some data to the file\nwriter.write([100, 101, 102]);\n// close the PrintWriter and save the file\nwriter.close();\n\n
            "],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1379,"description":"

            Saves a given element(image, text, json, csv, wav, or html) to the client's\ncomputer. The first parameter can be a pointer to element we want to save.\nThe element can be one of p5.Element,an Array of\nStrings, an Array of JSON, a JSON object, a p5.Table\n, a p5.Image, or a p5.SoundFile (requires\np5.sound). The second parameter is a filename (including extension).The\nthird parameter is for options specific to this type of object. This method\nwill save a file that fits the given parameters.\nIf it is called without specifying an element, by default it will save the\nwhole canvas as an image file. You can optionally specify a filename as\nthe first parameter in such a case.\nNote that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.

            \n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"

            If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).

            \n","type":"Object|String","optional":true},{"name":"filename","description":"

            If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).

            \n","type":"String","optional":true},{"name":"options","description":"

            Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.

            \n","type":"Boolean|String","optional":true}],"example":["\n
            \n // Saves the canvas as an image\n cnv = createCanvas(300, 300);\n save(cnv, 'myCanvas.jpg');\n\n // Saves the canvas as an image by default\n save('myCanvas.jpg');\n describe('An example for saving a canvas as an image.');\n
            \n\n
            \n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n describe('An example for saving a p5.Image element as an image.');\n
            \n\n
            \n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n describe('An example for saving a p5.Renderer element.');\n
            \n\n
            \n let myTable = new p5.Table();\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n describe(`An example showing how to save a table in formats of\n HTML, CSV and TSV.`);\n
            \n\n
            \n let myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n describe('An example for saving JSON to a txt file with some extra arguments.');\n
            \n\n
            \n // Saves array of strings to text file with line breaks after each item\n let arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n describe(`An example for saving an array of strings to text file\n with line breaks.`);\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1523,"description":"

            Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"

            If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).

            \n","type":"Boolean","optional":true}],"example":["\n
            \n let json = {}; // new JSON Object\n\n json.id = 0;\n json.species = 'Panthera leo';\n json.name = 'Lion';\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n describe('no image displayed');\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveJSON(json, 'lion.json');\n }\n }\n\n // saves the following to a file called \"lion.json\":\n // {\n // \"id\": 0,\n // \"species\": \"Panthera leo\",\n // \"name\": \"Lion\"\n // }\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1578,"description":"

            Writes an array of Strings to a text file, one line per String.\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"

            string array to be written

            \n","type":"String[]"},{"name":"filename","description":"

            filename for output

            \n","type":"String"},{"name":"extension","description":"

            the filename's extension

            \n","type":"String","optional":true},{"name":"isCRLF","description":"

            if true, change line-break to CRLF

            \n","type":"Boolean","optional":true}],"example":["\n
            \n let words = 'apple bear cat dog';\n\n // .split() outputs an Array\n let list = split(words, ' ');\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n describe('no image displayed');\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveStrings(list, 'nouns.txt');\n }\n }\n\n // Saves the following to a file called 'nouns.txt':\n //\n // apple\n // bear\n // cat\n // dog\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1640,"description":"

            Writes the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.

            \n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"

            the Table object to save to a file

            \n","type":"p5.Table"},{"name":"filename","description":"

            the filename to which the Table should be saved

            \n","type":"String"},{"name":"options","description":"

            can be one of \"tsv\", \"csv\", or \"html\"

            \n","type":"String","optional":true}],"example":["\n
            \n let table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n\n describe('no image displayed');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n
            "],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"

            Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\nhere.\nTo load files, use the loadTable method.\nTo save tables to your computer, use the save method\n or the saveTable method.

            \n

            Possible options include:

            \n
              \n
            • csv - parse the table as comma-separated values\n
            • tsv - parse the table as tab-separated values\n
            • header - this table has a header (title) row\n
            ","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"

            An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.

            \n","type":"{String[]}","itemtype":"property","name":"columns","example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //print the column names\n for (let c = 0; c < table.getColumnCount(); c++) {\n print('column ' + c + ' is named ' + table.columns[c]);\n }\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":80,"description":"

            An array containing the p5.TableRow objects that make up the\nrows of the table. The same result as calling getRows()

            \n","type":"{p5.TableRow[]}","itemtype":"property","name":"rows","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":90,"description":"

            Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().

            \n

            If a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.

            \n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"

            row to be added to the table

            \n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":152,"description":"

            Removes a row from the table object.

            \n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"

            ID number of the row to remove

            \n","type":"Integer"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //remove the first row\n table.removeRow(0);\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":198,"description":"

            Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.

            \n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"

            ID number of the row to get

            \n","type":"Integer"}],"return":{"description":"p5.TableRow object","type":"p5.TableRow"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(row.getString(c));\n }\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":242,"description":"

            Gets all rows from the table. Returns an array of p5.TableRows.

            \n","itemtype":"method","name":"getRows","return":{"description":"Array of p5.TableRows","type":"p5.TableRow[]"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n\n //warning: rows is an array of objects\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":289,"description":"

            Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"

            The value to match

            \n","type":"String"},{"name":"column","description":"

            ID number or title of the\n column to search

            \n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n let row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":351,"description":"

            Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.

            \n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"

            The value to match

            \n","type":"String"},{"name":"column","description":"

            ID number or title of the\n column to search

            \n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n let rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":417,"description":"

            Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.

            \n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"

            The regular expression to match

            \n","type":"String|RegExp"},{"name":"column","description":"

            The column ID (number) or\n title (string)

            \n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //Search using specified regex on a given column, return TableRow object\n let mammal = table.matchRow(new RegExp('ant'), 1);\n print(mammal.getString(1));\n //Output \"Panthera pardus\"\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":475,"description":"

            Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.

            \n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"

            The regular expression to match

            \n","type":"String"},{"name":"column","description":"

            The column ID (number) or\n title (string)

            \n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n
            \n\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n let rows = table.matchRows('R.*', 'type');\n for (let i = 0; i < rows.length; i++) {\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":542,"description":"

            Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.

            \n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"

            String or Number of the column to return

            \n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":592,"description":"

            Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.

            \n","itemtype":"method","name":"clearRows","example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":631,"description":"

            Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)

            \n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"

            title of the given column

            \n","type":"String","optional":true}],"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":680,"description":"

            Returns the total number of columns in a Table.

            \n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n
            \n \n // given the cvs file \"blobs.csv\" in /assets directory\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":716,"description":"

            Returns the total number of rows in a Table.

            \n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n
            \n \n // given the cvs file \"blobs.csv\" in /assets directory\n //\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":752,"description":"

            Removes any of the specified characters (or \"tokens\").

            \n

            If no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.

            \n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"

            String listing characters to be removed

            \n","type":"String"},{"name":"column","description":"

            Column ID (number)\n or name (string)

            \n","type":"String|Integer","optional":true}],"example":["\n
            \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":824,"description":"

            Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.

            \n","itemtype":"method","name":"trim","params":[{"name":"column","description":"

            Column ID (number)\n or name (string)

            \n","type":"String|Integer","optional":true}],"example":["\n
            \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":888,"description":"

            Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.

            \n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"

            columnName (string) or ID (number)

            \n","type":"String|Integer"}],"example":["\n
            \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n describe('no image displayed');\n }\n \n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":950,"description":"

            Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"set","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"String|Number"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":998,"description":"

            Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"Number"}],"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.setNum(1, 'id', 1);\n\n print(table.getColumn(0));\n //[\"0\", 1, \"2\"]\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1043,"description":"

            Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.

            \n","itemtype":"method","name":"setString","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            column ID (Number)\n or title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            value to assign

            \n","type":"String"}],"example":["\n
            \n// Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n print(table.getArray());\n\n describe('no image displayed');\n}\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1087,"description":"

            Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"get","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, 'species'));\n //Capra hircus\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1131,"description":"

            Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1173,"description":"

            Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.

            \n","itemtype":"method","name":"getString","params":[{"name":"row","description":"

            row ID

            \n","type":"Integer"},{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getString(0, 0)); // 0\n print(table.getString(0, 1)); // Capra hircus\n print(table.getString(0, 2)); // Goat\n print(table.getString(1, 0)); // 1\n print(table.getString(1, 1)); // Panthera pardus\n print(table.getString(1, 2)); // Leopard\n print(table.getString(2, 0)); // 2\n print(table.getString(2, 1)); // Equus zebra\n print(table.getString(2, 2)); // Zebra\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1223,"description":"

            Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.

            \n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"

            Name of the column which should be used to\n title each row object (optional)

            \n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1285,"description":"

            Retrieves all table data and returns it as a multidimensional array.

            \n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n
            \n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leoperd\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableArray = table.getArray();\n for (let i = 0; i < tableArray.length; i++) {\n print(tableArray[i]);\n }\n describe('no image displayed');\n}\n\n
            "],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":36,"description":"

            Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"set","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored

            \n","type":"String|Number"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":97,"description":"

            Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored\n as a Float

            \n","type":"Number|String"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":140,"description":"

            Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"setString","params":[{"name":"column","description":"

            Column ID (Number)\n or Title (String)

            \n","type":"String|Integer"},{"name":"value","description":"

            The value to be stored\n as a String

            \n","type":"String|Number|Boolean|Object"}],"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":184,"description":"

            Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.

            \n","itemtype":"method","name":"get","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n print(names);\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":231,"description":"

            Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.

            \n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = min(maxId, id);\n }\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":285,"description":"

            Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.

            \n","itemtype":"method","name":"getString","params":[{"name":"column","description":"

            columnName (string) or\n ID (number)

            \n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n
            \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n print('longest: ' + longest);\n\n describe('no image displayed');\n }\n
            "],"class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"

            Gets a copy of the element's parent. Returns the parent as another\np5.XML object.

            \n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let children = xml.getChildren('animal');\n let parent = children[1].getParent();\n print(parent.getName());\n}\n\n// Sketch prints:\n// mammals\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"

            Gets the element's full name, which is returned as a String.

            \n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["<animal\n
            \n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n print(xml.getName());\n }\n\n // Sketch prints:\n // mammals\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"

            Sets the element's name, which is specified as a String.

            \n","itemtype":"method","name":"setName","params":[{"name":"the","description":"

            new name of the node

            \n","type":"String"}],"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.getName());\n xml.setName('fish');\n print(xml.getName());\n}\n\n// Sketch prints:\n// mammals\n// fish\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"

            Checks whether or not the element has any children, and returns the result\nas a boolean.

            \n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.hasChildren());\n}\n\n// Sketch prints:\n// true\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"

            Get the names of all of the element's children, and returns the names as an\narray of Strings. This is the same as looping through and calling getName()\non each child element individually.

            \n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.listChildren());\n}\n\n// Sketch prints:\n// [\"animal\", \"animal\", \"animal\"]\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"

            Returns all of the element's children as an array of p5.XML objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.

            \n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"

            element name

            \n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let animals = xml.getChildren('animal');\n\n for (let i = 0; i < animals.length; i++) {\n print(animals[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Leopard\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":308,"description":"

            Returns the first of the element's children that matches the name parameter\nor the child of the given index.It returns undefined if no matching\nchild is found.

            \n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"

            element name or index

            \n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["<animal\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
            \n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let secondChild = xml.getChild(1);\n print(secondChild.getContent());\n}\n\n// Sketch prints:\n// \"Leopard\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":368,"description":"

            Appends a new child to the element. The child can be specified with\neither a String, which will be used as the new tag's name, or as a\nreference to an existing p5.XML object.\nA reference to the newly created child is returned as an p5.XML object.

            \n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"

            a p5.XML Object which will be the child to be added

            \n","type":"p5.XML"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let child = new p5.XML();\n child.setName('animal');\n child.setAttribute('id', '3');\n child.setAttribute('species', 'Ornithorhynchus anatinus');\n child.setContent('Platypus');\n xml.addChild(child);\n\n let animals = xml.getChildren('animal');\n print(animals[animals.length - 1].getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Leopard\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":420,"description":"

            Removes the element specified by name or index.

            \n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"

            element name or index

            \n","type":"String|Integer"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n xml.removeChild('animal');\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Leopard\"\n// \"Zebra\"\n
            \n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n xml.removeChild(1);\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":492,"description":"

            Counts the specified element's number of attributes, returned as an Number.

            \n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getAttributeCount());\n}\n\n// Sketch prints:\n// 2\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":528,"description":"

            Gets all of the specified element's attributes, and returns them as an\narray of Strings.

            \n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.listAttributes());\n}\n\n// Sketch prints:\n// [\"id\", \"species\"]\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":571,"description":"

            Checks whether or not an element has the specified attribute.

            \n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"

            attribute to be checked

            \n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n
            \n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.hasAttribute('species'));\n print(firstChild.hasAttribute('color'));\n }\n\n // Sketch prints:\n // true\n // false\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":616,"description":"

            Returns an attribute value of the element as an Number. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, the value 0 is returned.

            \n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"

            the non-null full name of the attribute

            \n","type":"String"},{"name":"defaultValue","description":"

            the default value of the attribute

            \n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getNum('id'));\n}\n\n// Sketch prints:\n// 0\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":663,"description":"

            Returns an attribute value of the element as an String. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, null is returned.

            \n","itemtype":"method","name":"getString","params":[{"name":"name","description":"

            the non-null full name of the attribute

            \n","type":"String"},{"name":"defaultValue","description":"

            the default value of the attribute

            \n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":710,"description":"

            Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.

            \n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"

            the full name of the attribute

            \n","type":"String"},{"name":"value","description":"

            the value of the attribute

            \n","type":"Number|String|Boolean"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getString('species'));\n firstChild.setAttribute('species', 'Jamides zebra');\n print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n// \"Jamides zebra\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":751,"description":"

            Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.

            \n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"

            value returned if no content is found

            \n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":792,"description":"

            Sets the element's content.

            \n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"

            the new content

            \n","type":"String"}],"example":["\n
            \n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n// <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n// <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n let firstChild = xml.getChild('animal');\n print(firstChild.getContent());\n firstChild.setContent('Mountain Goat');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Mountain Goat\"\n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":833,"description":"

            Serializes the element into a string. This function is useful for preparing\nthe content to be sent over a http request or saved to file.

            \n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n
            \nlet xml;\n\nfunction preload() {\n xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n print(xml.serialize());\n}\n\n// Sketch prints:\n// \n// Goat\n// Leopard\n// Zebra\n// \n
            "],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"

            Calculates the absolute value of a number.

            \n

            A number's absolute value is its distance from zero on the number line.\n-5 and 5 are both five units away from zero, so calling abs(-5) and\nabs(5) both return 5. The absolute value of a number is always positive.

            \n","itemtype":"method","name":"abs","params":[{"name":"n","description":"

            number to compute.

            \n","type":"Number"}],"return":{"description":"absolute value of given number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas.\n line(50, 0, 50, 100);\n\n // Calculate the mouse's distance from the middle.\n let h = abs(mouseX - 50);\n\n // Draw a rectangle based on the mouse's distance\n // from the middle.\n rect(0, 100 - h, 100, h);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":48,"description":"

            Calculates the closest integer value that is greater than or equal to a\nnumber.

            \n

            For example, calling ceil(9.03) and ceil(9.97) both return the value\n10.

            \n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"

            number to round up.

            \n","type":"Number"}],"return":{"description":"rounded up number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.3;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r up to 1.\n r = ceil(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":91,"description":"

            Constrains a number between a minimum and maximum value.

            \n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"

            number to constrain.

            \n","type":"Number"},{"name":"low","description":"

            minimum limit.

            \n","type":"Number"},{"name":"high","description":"

            maximum limit.

            \n","type":"Number"}],"return":{"description":"constrained number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');\n}\n\nfunction draw() {\n background(200);\n\n let x = constrain(mouseX, 33, 67);\n let y = 50;\n\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');\n}\n\nfunction draw() {\n background(200);\n\n // Set boundaries and draw them.\n let leftWall = 25;\n let rightWall = 75;\n line(leftWall, 0, leftWall, 100);\n line(rightWall, 0, rightWall, 100);\n\n // Draw a circle that follows the mouse freely.\n fill(255);\n circle(mouseX, 33, 9);\n\n // Draw a circle that's constrained.\n let xc = constrain(mouseX, leftWall, rightWall);\n fill(0);\n circle(xc, 67, 9);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":155,"description":"

            Calculates the distance between two points.

            \n

            The version of dist() with four parameters calculates distance in two\ndimensions.

            \n

            The version of dist() with six parameters calculates distance in three\ndimensions.

            \n

            Use p5.Vector.dist() to calculate the\ndistance between two p5.Vector objects.

            \n","itemtype":"method","name":"dist","return":{"description":"distance between the two points.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates.\n let x1 = 10;\n let y1 = 50;\n let x2 = 90;\n let y2 = 50;\n\n // Draw the points and a line connecting them.\n line(x1, y1, x2, y2);\n strokeWeight(5);\n point(x1, y1);\n point(x2, y2);\n\n // Calculate the distance.\n let d = dist(x1, y1, x2, y2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the distance.\n text(d, 43, 40);\n\n describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":155,"params":[{"name":"x1","description":"

            x-coordinate of the first point.

            \n","type":"Number"},{"name":"y1","description":"

            y-coordinate of the first point.

            \n","type":"Number"},{"name":"x2","description":"

            x-coordinate of the second point.

            \n","type":"Number"},{"name":"y2","description":"

            y-coordinate of the second point.

            \n","type":"Number"}],"return":{"description":"distance between the two points.","type":"Number"}},{"line":209,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"

            z-coordinate of the first point.

            \n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"

            z-coordinate of the second point.

            \n","type":"Number"}],"return":{"description":"distance between the two points.","type":"Number"}}]},{"file":"src/math/calculation.js","line":230,"description":"

            Calculates the value of Euler's number e (2.71828...) raised to the power\nof a number.

            \n","itemtype":"method","name":"exp","params":[{"name":"n","description":"

            exponent to raise.

            \n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = exp(1);\n circle(10, 10, d);\n\n // Left-center.\n d = exp(2);\n circle(20, 20, d);\n\n // Right-center.\n d = exp(3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = exp(4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that grow exponentially from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.005 * exp(x * 0.1);\n\n // Draw a point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":294,"description":"

            Calculates the closest integer value that is less than or equal to the\nvalue of a number.

            \n","itemtype":"method","name":"floor","params":[{"name":"n","description":"

            number to round down.

            \n","type":"Number"}],"return":{"description":"rounded down number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.8;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r down to 0.\n r = floor(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is bright red and the one on the right is black.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":332,"description":"

            Calculates a number between two numbers at a specific increment.

            \n

            The amt parameter is the amount to interpolate between the two numbers.\n0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is\nhalf-way in between, and 1.0 is equal to the second number. The lerp()\nfunction is convenient for creating motion along a straight path and for\ndrawing dotted lines.

            \n

            If the value of amt is less than 0 or more than 1, lerp() will return a\nnumber outside of the original interval. For example, calling\nlerp(0, 10, 1.5) will return 15.

            \n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"

            first value.

            \n","type":"Number"},{"name":"stop","description":"

            second value.

            \n","type":"Number"},{"name":"amt","description":"

            number.

            \n","type":"Number"}],"return":{"description":"lerped value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Declare variables for coordinates.\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n strokeWeight(5);\n\n // Draw the original points in black.\n stroke(0);\n point(a, 50);\n point(b, 50);\n\n // Draw the lerped points in gray.\n stroke(100);\n point(c, 50);\n point(d, 50);\n point(e, 50);\n\n describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');\n}\n\n
            \n\n
            \n\nlet x = 50;\nlet y = 50;\nlet targetX = 50;\nlet targetY = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');\n}\n\nfunction draw() {\n background(220);\n\n // Move x and y toward the target.\n x = lerp(x, targetX, 0.05);\n y = lerp(y, targetY, 0.05);\n\n // Draw the circle.\n circle(x, y, 20);\n}\n\n// Set x and y when the user clicks the mouse.\nfunction mouseClicked() {\n x = mouseX;\n y = mouseY;\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":423,"description":"

            Calculates the natural logarithm (the base-e logarithm) of a number.

            \n

            log() expects the n parameter to be a value greater than 0 because\nthe natural logarithm is defined that way.

            \n","itemtype":"method","name":"log","params":[{"name":"n","description":"

            number greater than 0.

            \n","type":"Number"}],"return":{"description":"natural logarithm of n.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = log(50);\n circle(33, 33, d);\n\n // Bottom-right.\n d = log(500000000);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate coordinates.\n let x = frameCount;\n let y = 15 * log(x);\n\n // Draw a point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":481,"description":"

            Calculates the magnitude, or length, of a vector.

            \n

            A vector can be thought of in different ways. In one view, a vector is a\npoint in space. The vector's components, x and y, are the point's\ncoordinates (x, y). A vector's magnitude is the distance from the origin\n(0, 0) to (x, y). mag(x, y) is a shortcut for calling\ndist(0, 0, x, y).

            \n

            A vector can also be thought of as an arrow pointing in space. This view is\nhelpful for programming motion. See p5.Vector for\nmore details.

            \n

            Use p5.Vector.mag() to calculate the\nmagnitude of a p5.Vector object.

            \n","itemtype":"method","name":"mag","params":[{"name":"x","description":"

            first component.

            \n","type":"Number"},{"name":"y","description":"

            second component.

            \n","type":"Number"}],"return":{"description":"magnitude of vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the vector's components.\n let x = 30;\n let y = 40;\n\n // Calculate the magnitude.\n let m = mag(x, y);\n\n // Style the text.\n textSize(16);\n\n // Display the vector and its magnitude.\n line(0, 0, x, y);\n text(m, x, y);\n\n describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":534,"description":"

            Re-maps a number from one range to another.

            \n

            For example, calling map(2, 0, 10, 0, 100) returns 20. The first three\narguments set the original value to 2 and the original range from 0 to 10.\nThe last two arguments set the target range from 0 to 100. 20's position\nin the target range [0, 100] is proportional to 2's position in the\noriginal range [0, 10].

            \n

            The sixth parameter, withinBounds, is optional. By default, map() can\nreturn values outside of the target range. For example,\nmap(11, 0, 10, 0, 100) returns 110. Passing true as the sixth parameter\nconstrains the remapped value to the target range. For example,\nmap(11, 0, 10, 0, 100, true) returns 100.

            \n","itemtype":"method","name":"map","params":[{"name":"value","description":"

            the value to be remapped.

            \n","type":"Number"},{"name":"start1","description":"

            lower bound of the value's current range.

            \n","type":"Number"},{"name":"stop1","description":"

            upper bound of the value's current range.

            \n","type":"Number"},{"name":"start2","description":"

            lower bound of the value's target range.

            \n","type":"Number"},{"name":"stop2","description":"

            upper bound of the value's target range.

            \n","type":"Number"},{"name":"withinBounds","description":"

            constrain the value to the newly mapped range.

            \n","type":"Boolean","optional":true}],"return":{"description":"remapped number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the top line.\n line(0, 25, mouseX, 25);\n\n // Remap mouseX from [0, 100] to [0, 50].\n let x = map(mouseX, 0, 100, 0, 50);\n\n // Draw the bottom line.\n line(0, 75, 0, x);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle changes color from black to white as the mouse moves from left to right.');\n}\n\nfunction draw() {\n background(200);\n\n // Remap mouseX from [0, 100] to [0, 255]\n let c = map(mouseX, 0, 100, 0, 255);\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":618,"description":"

            Returns the largest value in a sequence of numbers.

            \n

            The version of max() with one parameter interprets it as an array of\nnumbers and returns the largest number.

            \n

            The version of max() with two or more parameters interprets them as\nindividual numbers and returns the largest number.

            \n","itemtype":"method","name":"max","return":{"description":"maximum number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the maximum of 10, 5, and 20.\n let m = max(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the maximum of the array.\n let m = max(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":618,"params":[{"name":"n0","description":"

            first number to compare.

            \n","type":"Number"},{"name":"n1","description":"

            second number to compare.

            \n","type":"Number"}],"return":{"description":"maximum number.","type":"Number"}},{"line":680,"params":[{"name":"nums","description":"

            numbers to compare.

            \n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":695,"description":"

            Returns the smallest value in a sequence of numbers.

            \n

            The version of min() with one parameter interprets it as an array of\nnumbers and returns the smallest number.

            \n

            The version of min() with two or more parameters interprets them as\nindividual numbers and returns the smallest number.

            \n","itemtype":"method","name":"min","return":{"description":"minimum number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the minimum of 10, 5, and 20.\n let m = min(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the minimum of the array.\n let m = min(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":695,"params":[{"name":"n0","description":"

            first number to compare.

            \n","type":"Number"},{"name":"n1","description":"

            second number to compare.

            \n","type":"Number"}],"return":{"description":"minimum number.","type":"Number"}},{"line":757,"params":[{"name":"nums","description":"

            numbers to compare.

            \n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":772,"description":"

            Maps a number from one range to a value between 0 and 1.

            \n

            For example, norm(2, 0, 10) returns 0.2. 2's position in the original\nrange [0, 10] is proportional to 0.2's position in the range [0, 1]. This\nis the same as calling map(2, 0, 10, 0, 1).

            \n

            Numbers outside of the original range are not constrained between 0 and 1.\nOut-of-range values are often intentional and useful.

            \n","itemtype":"method","name":"norm","params":[{"name":"value","description":"

            incoming value to be normalized.

            \n","type":"Number"},{"name":"start","description":"

            lower bound of the value's current range.

            \n","type":"Number"},{"name":"stop","description":"

            upper bound of the value's current range.

            \n","type":"Number"}],"return":{"description":"normalized number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n describe('A square changes color from black to red as the mouse moves from left to right.');\n}\n\nfunction draw() {\n // Calculate the redValue.\n let redValue = norm(mouseX, 0, 100);\n\n // Paint the background.\n background(redValue, 0, 0);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":815,"description":"

            Calculates exponential expressions such as 23.

            \n

            For example, pow(2, 3) evaluates the expression\n2 × 2 × 2. pow(2, -3) evaluates 1 ÷\n(2 × 2 × 2).

            \n","itemtype":"method","name":"pow","params":[{"name":"n","description":"

            base of the exponential expression.

            \n","type":"Number"},{"name":"e","description":"

            power by which to raise the base.

            \n","type":"Number"}],"return":{"description":"n^e.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the base of the exponent.\n let base = 3;\n\n // Top-left.\n let d = pow(base, 1);\n circle(10, 10, d);\n\n // Left-center.\n d = pow(base, 2);\n circle(20, 20, d);\n\n // Right-center.\n d = pow(base, 3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = pow(base, 4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":861,"description":"

            Calculates the integer closest to a number.

            \n

            For example, round(133.8) returns the value 134.

            \n

            The second parameter, decimals, is optional. It sets the number of\ndecimal places to use when rounding. For example, round(12.34, 1) returns\n12.3. decimals is 0 by default.

            \n","itemtype":"method","name":"round","params":[{"name":"n","description":"

            number to round.

            \n","type":"Number"},{"name":"decimals","description":"

            number of decimal places to round to, default is 0.

            \n","type":"Number","optional":true}],"return":{"description":"rounded number.","type":"Integer"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number.\n let x = round(4.2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 4 written in middle of the canvas.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number to 2 decimal places.\n let x = round(12.782383, 2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 12.78 written in middle of canvas.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":928,"description":"

            Calculates the square of a number.

            \n

            Squaring a number means multiplying the number by itself. For example,\nsq(3) evaluates 3 × 3 which is 9. sq(-3) evaluates -3 × -3\nwhich is also 9. Multiplying two negative numbers produces a positive\nnumber. The value returned by sq() is always positive.

            \n","itemtype":"method","name":"sq","params":[{"name":"n","description":"

            number to square.

            \n","type":"Number"}],"return":{"description":"squared number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sq(3);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sq(6);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher quickly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.01 * sq(x);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":988,"description":"

            Calculates the square root of a number.

            \n

            A number's square root can be multiplied by itself to produce the original\nnumber. For example, sqrt(9) returns 3 because 3 × 3 = 9. sqrt()\nalways returns a positive value. sqrt() doesn't work with negative arguments\nsuch as sqrt(-9).

            \n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"

            non-negative number to square root.

            \n","type":"Number"}],"return":{"description":"square root of number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sqrt(16);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sqrt(1600);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * sqrt(x);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":1048,"description":"

            Calculates the fractional part of a number.

            \n

            A number's fractional part includes its decimal values. For example,\nfract(12.34) returns 0.34.

            \n","itemtype":"method","name":"fract","params":[{"name":"n","description":"

            number whose fractional part will be found.

            \n","type":"Number"}],"return":{"description":"fractional part of n.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Original number.\n let n = 56.78;\n text(n, 50, 33);\n\n // Fractional part.\n let f = fract(n);\n text(f, 50, 67);\n\n describe('The number 56.78 written above the number 0.78.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"

            Creates a new p5.Vector object.

            \n

            A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection. This view is helpful for programming motion.

            \n

            A vector's components determine its magnitude and direction. For example,\ncalling createVector(3, 4) creates a new\np5.Vector object with an x-component of 3 and a\ny-component of 4. From the origin, this vector's tip is 3 units to the\nright and 4 units down.

            \n

            p5.Vector objects are often used to program\nmotion because they simplify the math. For example, a moving ball has a\nposition and a velocity. Position describes where the ball is in space. The\nball's position vector extends from the origin to the ball's center.\nVelocity describes the ball's speed and the direction it's moving. If the\nball is moving straight up, its velocity vector points straight up. Adding\nthe ball's velocity vector to its position vector moves it, as in\npos.add(vel). Vector math relies on methods inside the\np5.Vector class.

            \n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(50, 50);\n let p3 = createVector(75, 75);\n\n // Draw the dots.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots form a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"

            Returns random numbers that can be tuned to feel organic.

            \n

            Values returned by random() and\nrandomGaussian() can change by large\namounts between function calls. By contrast, values returned by noise()\ncan be made \"smooth\". Calls to noise() with similar inputs will produce\nsimilar outputs. noise() is used to create textures, motion, shapes,\nterrains, and so on. Ken Perlin invented noise() while animating the\noriginal Tron film in the 1980s.

            \n

            noise() always returns values between 0 and 1. It returns the same value\nfor a given input while a sketch is running. noise() produces different\nresults each time a sketch runs. The\nnoiseSeed() function can be used to generate\nthe same sequence of Perlin noise values each time a sketch runs.

            \n

            The character of the noise can be adjusted in two ways. The first way is to\nscale the inputs. noise() interprets inputs as coordinates. The sequence\nof noise values will be smoother when the input coordinates are closer. The\nsecond way is to use the noiseDetail()\nfunction.

            \n

            The version of noise() with one parameter computes noise values in one\ndimension. This dimension can be thought of as space, as in noise(x), or\ntime, as in noise(t).

            \n

            The version of noise() with two parameters computes noise values in two\ndimensions. These dimensions can be thought of as space, as in\nnoise(x, y), or space and time, as in noise(x, t).

            \n

            The version of noise() with three parameters computes noise values in\nthree dimensions. These dimensions can be thought of as space, as in\nnoise(x, y, z), or space and time, as in noise(x, y, t).

            \n","itemtype":"method","name":"noise","params":[{"name":"x","description":"

            x-coordinate in noise space.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate in noise space.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z-coordinate in noise space.

            \n","type":"Number","optional":true}],"return":{"description":"Perlin noise value at specified coordinates.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 100 * noise(0.005 * frameCount);\n let y = 100 * noise(0.005 * frameCount + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise values.\n let x = noiseLevel * noise(nt);\n let y = noiseLevel * noise(nt + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A hilly terrain drawn in gray against a black sky.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.02;\n\n // Scale the input coordinate.\n let x = frameCount;\n let nx = noiseScale * x;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx);\n\n // Draw the line.\n line(x, 0, x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A calm sea drawn in gray against a black sky.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.002;\n\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx, nt);\n\n // Draw the line.\n line(x, 0, x, y);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.01;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n\n describe('A gray cloudy pattern.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray cloudy pattern that changes.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.009;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny, nt);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":331,"description":"

            Adjusts the character of the noise produced by the\nnoise() function.

            \n

            Perlin noise values are created by adding layers of noise together. The\nnoise layers, called octaves, are similar to harmonics in music. Lower\noctaves contribute more to the output signal. They define the overall\nintensity of the noise. Higher octaves create finer-grained details.

            \n

            By default, noise values are created by combining four octaves. Each higher\noctave contributes half as much (50% less) compared to its predecessor.\nnoiseDetail() changes the number of octaves and the falloff amount. For\nexample, calling noiseDetail(6, 0.25) ensures that\nnoise() will use six octaves. Each higher octave\nwill contribute 25% as much (75% less) compared to its predecessor. Falloff\nvalues between 0 and 1 are valid. However, falloff values greater than 0.5\nmight result in noise values greater than 1.

            \n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"

            number of octaves to be used by the noise.

            \n","type":"Number"},{"name":"falloff","description":"

            falloff factor for each octave.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.02;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 50; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value with six octaves\n // and a low falloff factor.\n noiseDetail(6, 0.25);\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the left side.\n stroke(c);\n point(x, y);\n\n // Compute the noise value with four octaves\n // and a high falloff factor.\n noiseDetail(4, 0.5);\n c = noiseLevel * noise(nx, ny);\n\n // Draw the right side.\n stroke(c);\n point(x + 50, y);\n }\n }\n\n describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":405,"description":"

            Sets the seed value for the noise() function.

            \n

            By default, noise() produces different results\neach time a sketch is run. Calling noiseSeed() with a constant argument,\nsuch as noiseSeed(99), makes noise() produce the\nsame results each time a sketch is run.

            \n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"

            seed value.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise seed for consistent results.\n noiseSeed(99);\n\n describe('A black rectangle that grows randomly, first to the right and then to the left.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let x = noiseLevel * noise(nt);\n\n // Draw the line.\n line(x, 0, x, height);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":113,"description":"

            The x component of the vector

            \n","type":"{Number}","itemtype":"property","name":"x","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":120,"description":"

            The y component of the vector

            \n","type":"{Number}","itemtype":"property","name":"y","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":127,"description":"

            The z component of the vector

            \n","type":"{Number}","itemtype":"property","name":"z","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":136,"description":"

            Returns a string representation of a vector.

            \n

            Calling toString() is useful for printing vectors to the console while\ndebugging.

            \n","itemtype":"method","name":"toString","return":{"description":"string representation of the vector.","type":"String"},"example":["\n
            \n\nfunction setup() {\n let v = createVector(20, 30);\n\n // Prints 'p5.Vector Object : [20, 30, 0]'.\n print(v.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":161,"description":"

            Sets the vector's x, y, and z components.

            \n

            set() can use separate numbers, as in v.set(1, 2, 3), a\np5.Vector object, as in v.set(v2), or an\narray of numbers, as in v.set([1, 2, 3]).

            \n

            If a value isn't provided for a component, it will be set to 0. For\nexample, v.set(4, 5) sets v.x to 4, v.y to 5, and v.z to 0.\nCalling set() with no arguments, as in v.set(), sets all the vector's\ncomponents to 0.

            \n","itemtype":"method","name":"set","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // set() with numbers.\n pos.set(75, 25);\n point(pos);\n\n // Bottom right.\n // set() with a p5.Vector.\n let p2 = createVector(75, 75);\n pos.set(p2);\n point(pos);\n\n // Bottom left.\n // set() with an array.\n let arr = [25, 75];\n pos.set(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":161,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":215,"params":[{"name":"value","description":"

            vector to set.

            \n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":239,"description":"

            Returns a copy of the p5.Vector object.

            \n","itemtype":"method","name":"copy","return":{"description":"copy of the p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100 ,100);\n\n background(200);\n\n // Create a p5.Vector object.\n let pos = createVector(50, 50);\n\n // Make a copy.\n let pc = pos.copy();\n\n // Draw the point.\n strokeWeight(5);\n point(pc);\n\n describe('A black point drawn in the middle of a gray square.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":239,"params":[],"return":{"description":"copy of the p5.Vector object.","type":"p5.Vector"}},{"line":3341,"params":[{"name":"v","description":"

            the p5.Vector to create a copy of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the copy of the p5.Vector object","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":282,"description":"

            Adds to a vector's x, y, and z components.

            \n

            add() can use separate numbers, as in v.add(1, 2, 3),\nanother p5.Vector object, as in v.add(v2), or\nan array of numbers, as in v.add([1, 2, 3]).

            \n

            If a value isn't provided for a component, it won't change. For\nexample, v.add(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling add() with no arguments, as in v.add(), has no effect.

            \n

            The static version of add(), as in p5.Vector.add(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"add","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // Add numbers.\n pos.add(50, 0);\n point(pos);\n\n // Bottom right.\n // Add a p5.Vector.\n let p2 = createVector(0, 50);\n pos.add(p2);\n point(pos);\n\n // Bottom left.\n // Add an array.\n let arr = [-50, 0];\n pos.add(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top left.\n let p1 = createVector(25, 25);\n\n // Center.\n let p2 = createVector(50, 50);\n\n // Bottom right.\n // Add p1 and p2.\n let p3 = p5.Vector.add(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(origin, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":282,"params":[{"name":"x","description":"

            x component of the vector to be added.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector to be added.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector to be added.

            \n","type":"Number","optional":true}],"chainable":1},{"line":411,"params":[{"name":"value","description":"

            The vector to add

            \n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":3353,"params":[{"name":"v1","description":"

            A p5.Vector to add

            \n","type":"p5.Vector"},{"name":"v2","description":"

            A p5.Vector to add

            \n","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"resulting p5.Vector.","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":466,"description":"

            Performs modulo (remainder) division with a vector's x, y, and z\ncomponents.

            \n

            rem() can use separate numbers, as in v.rem(1, 2, 3),\nanother p5.Vector object, as in v.rem(v2), or\nan array of numbers, as in v.rem([1, 2, 3]).

            \n

            If only one value is provided, as in v.rem(2), then all the components\nwill be set to their values modulo 2. If two values are provided, as in\nv.rem(2, 3), then v.z won't change. Calling rem() with no\narguments, as in v.rem(), has no effect.

            \n

            The static version of rem(), as in p5.Vector.rem(v2, v1), returns a\nnew p5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"rem","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2);\n\n // Prints 'p5.Vector Object : [1, 0, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3);\n\n // Prints 'p5.Vector Object : [1, 1, 5]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3, 4);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide a p5.Vector.\n v1.rem(v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide an array.\n let arr = [2, 3, 4];\n v.rem(arr);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide without modifying the original vectors.\n let v3 = p5.Vector.rem(v1, v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v3.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":466,"params":[{"name":"x","description":"

            x component of divisor vector.

            \n","type":"Number"},{"name":"y","description":"

            y component of divisor vector.

            \n","type":"Number"},{"name":"z","description":"

            z component of divisor vector.

            \n","type":"Number"}],"chainable":1},{"line":583,"params":[{"name":"value","description":"

            divisor vector.

            \n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":3380,"params":[{"name":"v1","description":"

            The dividend p5.Vector

            \n","type":"p5.Vector"},{"name":"v2","description":"

            The divisor p5.Vector

            \n","type":"p5.Vector"}],"static":1},{"line":3386,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"The resulting p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":635,"description":"

            Subtracts from a vector's x, y, and z components.

            \n

            sub() can use separate numbers, as in v.sub(1, 2, 3), another\np5.Vector object, as in v.sub(v2), or an array\nof numbers, as in v.sub([1, 2, 3]).

            \n

            If a value isn't provided for a component, it won't change. For\nexample, v.sub(4, 5) adds 4 to v.x, 5 to v.y, and 0 to v.z.\nCalling sub() with no arguments, as in v.sub(), has no effect.

            \n

            The static version of sub(), as in p5.Vector.sub(v2, v1), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"sub","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom right.\n let pos = createVector(75, 75);\n point(pos);\n\n // Top right.\n // Subtract numbers.\n pos.sub(0, 50);\n point(pos);\n\n // Top left.\n // Subtract a p5.Vector.\n let p2 = createVector(50, 0);\n pos.sub(p2);\n point(pos);\n\n // Bottom left.\n // Subtract an array.\n let arr = [0, -50];\n pos.sub(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(75, 75);\n let p2 = createVector(50, 50);\n\n // Subtract with modifying the original vectors.\n let p3 = p5.Vector.sub(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":635,"params":[{"name":"x","description":"

            x component of the vector to subtract.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector to subtract.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector to subtract.

            \n","type":"Number","optional":true}],"chainable":1},{"line":761,"params":[{"name":"value","description":"

            the vector to subtract

            \n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":3405,"params":[{"name":"v1","description":"

            A p5.Vector to subtract from

            \n","type":"p5.Vector"},{"name":"v2","description":"

            A p5.Vector to subtract

            \n","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":785,"description":"

            Multiplies a vector's x, y, and z components.

            \n

            mult() can use separate numbers, as in v.mult(1, 2, 3), another\np5.Vector object, as in v.mult(v2), or an array\nof numbers, as in v.mult([1, 2, 3]).

            \n

            If only one value is provided, as in v.mult(2), then all the components\nwill be multiplied by 2. If a value isn't provided for a component, it\nwon't change. For example, v.mult(4, 5) multiplies v.x by, v.y by 5,\nand v.z by 1. Calling mult() with no arguments, as in v.mult(), has\nno effect.

            \n

            The static version of mult(), as in p5.Vector.mult(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"mult","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Center.\n // Multiply all components by 2.\n p.mult(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n p.mult(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n let arr = [2, 3];\n p.mult(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * p2.x and p.y * p2.y\n let p2 = createVector(2, 3);\n p.mult(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Create a new p5.Vector with\n // p3.x = p.x * p2.x\n // p3.y = p.y * p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.mult(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');\n}\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(25, 25);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.mult(v1, 2);\n drawArrow(origin, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":785,"params":[{"name":"n","description":"

            The number to multiply with the vector

            \n","type":"Number"}],"chainable":1},{"line":965,"params":[{"name":"x","description":"

            number to multiply with the x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            number to multiply with the y component of the vector.

            \n","type":"Number"},{"name":"z","description":"

            number to multiply with the z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":973,"params":[{"name":"arr","description":"

            array to multiply with the components of the vector.

            \n","type":"Number[]"}],"chainable":1},{"line":979,"params":[{"name":"v","description":"

            vector to multiply with the components of the original vector.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3435,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true}],"static":1,"return":{"description":"resulting new p5.Vector.","type":"p5.Vector"}},{"line":3444,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3453,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3462,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"arr","description":"","type":"Number[]"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1065,"description":"

            Divides a vector's x, y, and z components.

            \n

            div() can use separate numbers, as in v.div(1, 2, 3), another\np5.Vector object, as in v.div(v2), or an array\nof numbers, as in v.div([1, 2, 3]).

            \n

            If only one value is provided, as in v.div(2), then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, v.div(4, 5) divides v.x by, v.y by 5,\nand v.z by 1. Calling div() with no arguments, as in v.div(), has\nno effect.

            \n

            The static version of div(), as in p5.Vector.div(v, 2), returns a new\np5.Vector object and doesn't change the\noriginals.

            \n","itemtype":"method","name":"div","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Center.\n let p = createVector(50, 50);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 2\n p.div(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n p.div(2, 3);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let arr = [2, 3];\n p.div(arr);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let p2 = createVector(2, 3);\n p.div(p2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Create a new p5.Vector with\n // p3.x = p.x / p2.x\n // p3.y = p.y / p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.div(p, p2);\n point(p3);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');\n}\n\n
            \n\n
            \n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.div(v1, 2);\n drawArrow(origin, v2, 'blue');\n\n describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1065,"params":[{"name":"n","description":"

            The number to divide the vector by

            \n","type":"Number"}],"chainable":1},{"line":1247,"params":[{"name":"x","description":"

            number to divide with the x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            number to divide with the y component of the vector.

            \n","type":"Number"},{"name":"z","description":"

            number to divide with the z component of the vector.

            \n","type":"Number","optional":true}],"chainable":1},{"line":1255,"params":[{"name":"arr","description":"

            array to divide the components of the vector by.

            \n","type":"Number[]"}],"chainable":1},{"line":1261,"params":[{"name":"v","description":"

            vector to divide the components of the original vector by.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3520,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3529,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3538,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}},{"line":3547,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"arr","description":"","type":"Number[]"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1362,"description":"

            Calculates the magnitude (length) of the vector.

            \n

            Use mag() to calculate the magnitude of a 2D vector\nusing components as in mag(x, y).

            \n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude.\n let m = p.mag();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1362,"params":[],"return":{"description":"magnitude of the vector.","type":"Number"}},{"line":3682,"params":[{"name":"vecT","description":"

            The vector to return the magnitude of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"The magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1402,"description":"

            Calculates the magnitude (length) of the vector squared.

            \n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude squared.\n let m = p.magSq();\n text(m, p.x, p.y);\n\n describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1402,"params":[],"return":{"description":"squared magnitude of the vector.","type":"Number"}},{"line":3698,"params":[{"name":"vecT","description":"

            the vector to return the squared magnitude of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the squared magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1441,"description":"

            Calculates the dot product of two vectors.

            \n

            The dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.

            \n

            The version of dot() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of dot() with multiple parameters interprets them as the\nx, y, and z components of another vector.

            \n

            The static version of dot(), as in p5.Vector.dot(v1, v2), is the same\nas calling v1.dot(v2).

            \n","itemtype":"method","name":"dot","return":{"description":"dot product.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4);\n let v2 = createVector(3, 0);\n\n // Calculate the dot product.\n let dp = v1.dot(v2);\n\n // Prints \"9\" to the console.\n print(dp);\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the dot product.\n let dp = p5.Vector.dot(v1, v2);\n\n // Prints \"0\" to the console.\n print(dp);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text \"v1 • v2 = something\" changes as the mouse moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Draw the black arrow.\n let v1 = createVector(30, 0);\n drawArrow(v0, v1, 'black');\n\n // Draw the red arrow.\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'red');\n\n // Display the dot product.\n let dp = v2.dot(v1);\n text(`v2 • v1 = ${dp}`, 10, 20);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1441,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number"},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"dot product.","type":"Number"}},{"line":1542,"params":[{"name":"v","description":"

            p5.Vector to be dotted.

            \n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":3576,"params":[{"name":"v1","description":"

            first p5.Vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            second p5.Vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"dot product.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1554,"description":"

            Calculates the cross product of two vectors.

            \n

            The cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.

            \n

            The static version of cross(), as in p5.Vector.cross(v1, v2), is the same\nas calling v1.cross(v2).

            \n","itemtype":"method","name":"cross","return":{"description":"cross product as a p5.Vector.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = v1.cross(v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = p5.Vector.cross(v1, v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1554,"params":[{"name":"v","description":"

            p5.Vector to be crossed.

            \n","type":"p5.Vector"}],"return":{"description":"cross product as a p5.Vector.","type":"p5.Vector"}},{"line":3590,"params":[{"name":"v1","description":"

            first p5.Vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            second p5.Vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"cross product.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1612,"description":"

            Calculates the distance between two points represented by vectors.

            \n

            A point's coordinates can be represented by the components of a vector\nthat extends from the origin to the point.

            \n

            The static version of dist(), as in p5.Vector.dist(v1, v2), is the same\nas calling v1.dist(v2).

            \n

            Use dist() to calculate the distance between points\nusing coordinates as in dist(x1, y1, x2, y2).

            \n","itemtype":"method","name":"dist","return":{"description":"distance.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = v1.dist(v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = p5.Vector.dist(v1, v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n\n // Style the text.\n textAlign(CENTER);\n\n // Display the magnitude.\n let m = floor(v3.mag());\n text(m, 50, 75);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1612,"params":[{"name":"v","description":"

            x, y, and z coordinates of a p5.Vector.

            \n","type":"p5.Vector"}],"return":{"description":"distance.","type":"Number"}},{"line":3605,"params":[{"name":"v1","description":"

            The first p5.Vector

            \n","type":"p5.Vector"},{"name":"v2","description":"

            The second p5.Vector

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"The distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1726,"description":"

            Scales the components of a p5.Vector object so\nthat its magnitude is 1.

            \n

            The static version of normalize(), as in p5.Vector.normalize(v),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"normalize","return":{"description":"normalized p5.Vector.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v = createVector(10, 20, 2);\n\n // Normalize.\n v.normalize();\n\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v0 = createVector(10, 20, 2);\n\n // Create a normalized copy.\n let v1 = p5.Vector.normalize(v0);\n\n // Prints \"p5.Vector Object : [10, 20, 2]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.\");\n}\n\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n v1.normalize();\n drawArrow(v0, v1.mult(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1726,"params":[],"return":{"description":"normalized p5.Vector.","type":"p5.Vector"}},{"line":3711,"params":[{"name":"v","description":"

            The vector to normalize

            \n","type":"p5.Vector"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The vector v, normalized to a length of 1","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1835,"description":"

            Limits a vector's magnitude to a maximum value.

            \n

            The static version of limit(), as in p5.Vector.limit(v, 5), returns a\nnew p5.Vector object and doesn't change the\noriginal.

            \n","itemtype":"method","name":"limit","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(10, 20, 2);\n\n // Limit its magnitude.\n v.limit(5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(10, 20, 2);\n\n // Create a copy an limit its magintude.\n let v1 = p5.Vector.limit(v0, 5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.\");\n}\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v1.limit(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1835,"params":[{"name":"max","description":"

            maximum magnitude for the vector.

            \n","type":"Number"}],"chainable":1},{"line":3738,"params":[{"name":"v","description":"

            the vector to limit

            \n","type":"p5.Vector"},{"name":"max","description":"","type":"Number"},{"name":"target","description":"

            the vector to receive the result (Optional)

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v with a magnitude limited to max","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1933,"description":"

            Sets a vector's magnitude to a given value.

            \n

            The static version of setMag(), as in p5.Vector.setMag(v, 10), returns\na new p5.Vector object and doesn't change the\noriginal.

            \n","itemtype":"method","name":"setMag","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 0);\n\n // Prints \"5\" to the console.\n print(v.mag());\n\n // Set its magnitude to 10.\n v.setMag(10);\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 4, 0);\n\n // Create a copy with a magnitude of 10.\n let v1 = p5.Vector.setMag(v0, 10);\n\n // Prints \"5\" to the console.\n print(v0.mag());\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');\n}\n\nfunction draw() {\n background(240);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the red arrow.\n drawArrow(origin, v, 'red');\n\n // Set v's magnitude to 30.\n v.setMag(30);\n\n // Draw the blue arrow.\n drawArrow(origin, v, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1933,"params":[{"name":"len","description":"

            new length for this vector.

            \n","type":"Number"}],"chainable":1},{"line":3766,"params":[{"name":"v","description":"

            the vector to set the magnitude of

            \n","type":"p5.Vector"},{"name":"len","description":"","type":"Number"},{"name":"target","description":"

            the vector to receive the result (Optional)

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v with a magnitude set to len","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2026,"description":"

            Calculates the angle a 2D vector makes with the positive x-axis.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), heading() returns angles\nin the units of the current angleMode().

            \n

            The static version of heading(), as in p5.Vector.heading(v), works the\nsame way.

            \n","itemtype":"method","name":"heading","return":{"description":"angle of rotation.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(v.heading());\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(p5.Vector.heading(v));\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(p5.Vector.heading(v));\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the top left of a square to its center. The text \"Radians: 0.79\" and \"Degrees: 45\" is written near the tip of the arrow.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the black arrow.\n drawArrow(origin, v, 'black');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the heading in radians.\n let h = round(v.heading(), 2);\n text(`Radians: ${h}`, 20, 70);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the heading in degrees.\n h = v.heading();\n text(`Degrees: ${h}`, 20, 85);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2026,"params":[],"return":{"description":"angle of rotation.","type":"Number"}},{"line":3796,"params":[{"name":"v","description":"

            the vector to find the angle of

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"the angle of rotation","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":2134,"description":"

            Rotates a 2D vector to a specific angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), setHeading() uses\nthe units of the current angleMode().

            \n","itemtype":"method","name":"setHeading","params":[{"name":"angle","description":"

            angle of rotation.

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(PI);\n\n // Prints \"3.141...\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(180);\n\n // Prints \"180\" to the console.\n print(v.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Point down.\n v1.setHeading(HALF_PI);\n\n // Draw the blue arrow.\n drawArrow(v0, v1, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2238,"description":"

            Rotates a 2D vector by an angle without changing its magnitude.

            \n

            By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.

            \n

            If the vector was created with\ncreateVector(), rotate() uses\nthe units of the current angleMode().

            \n

            The static version of rotate(), as in p5.Vector.rotate(v, PI),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"rotate","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(HALF_PI);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(90);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, HALF_PI);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, 90);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nlet v0;\nlet v1;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n v0 = createVector(50, 50);\n v1 = createVector(30, 0);\n\n describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');\n}\n\nfunction draw() {\n background(240);\n\n // Rotate v1.\n v1.rotate(0.01);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2238,"params":[{"name":"angle","description":"

            angle of rotation.

            \n","type":"Number"}],"chainable":1},{"line":3491,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The resulting new p5.Vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2384,"description":"

            Calculates the angle between two vectors.

            \n

            The angles returned are signed, which means that\nv1.angleBetween(v2) === -v2.angleBetween(v1).

            \n

            If the vector was created with\ncreateVector(), angleBetween() returns\nangles in the units of the current\nangleMode().

            \n","itemtype":"method","name":"angleBetween","return":{"description":"angle between the vectors.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-1.570...\" to the console.\n print(v1.angleBetween(v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-90\" to the console.\n print(v1.angleBetween(v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-1.570...\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-90\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text \"Radians: 1.57\" and \"Degrees: 90\" is written above the arrows.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the angle in radians.\n let angle = round(v1.angleBetween(v2), 2);\n text(`Radians: ${angle}`, 20, 20);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the angle in degrees.\n angle = round(v1.angleBetween(v2), 2);\n text(`Degrees: ${angle}`, 20, 35);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2384,"params":[{"name":"value","description":"

            x, y, and z components of a p5.Vector.

            \n","type":"p5.Vector"}],"return":{"description":"angle between the vectors.","type":"Number"}},{"line":3811,"params":[{"name":"v1","description":"

            the first vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            the second vector.

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"angle between the two vectors.","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":2538,"description":"

            Calculates new x, y, and z components that are proportionally the\nsame distance between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.

            \n

            The static version of lerp(), as in p5.Vector.lerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"lerp","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n v0.lerp(v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v0.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1, 1);\n\n // Interpolate.\n v.lerp(3, 3, 3, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n let v2 = p5.Vector.lerp(v0, v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v2.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Interpolate.\n let v3 = p5.Vector.lerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2538,"params":[{"name":"x","description":"

            x component.

            \n","type":"Number"},{"name":"y","description":"

            y component.

            \n","type":"Number"},{"name":"z","description":"

            z component.

            \n","type":"Number"},{"name":"amt","description":"

            amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.

            \n","type":"Number"}],"chainable":1},{"line":2651,"params":[{"name":"v","description":"

            p5.Vector to lerp toward.

            \n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":3620,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"

            The vector to receive the result

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"The lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2667,"description":"

            Calculates a new heading and magnitude that are between two vectors.

            \n

            The amt parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.

            \n

            slerp() differs from lerp() because\nit interpolates magnitude. Calling v0.slerp(v1, 0.5) sets v0's\nmagnitude to a value halfway between its original magnitude and v1's.\nCalling v0.lerp(v1, 0.5) makes no such guarantee.

            \n

            The static version of slerp(), as in p5.Vector.slerp(v0, v1, 0.5),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"slerp","return":{"description":"","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Interpolate halfway between v0 and v1.\n v0.slerp(v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v0.mag());\n\n // Prints \"0.785...\" to the console.\n print(v0.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Create a p5.Vector that's halfway between v0 and v1.\n let v3 = p5.Vector.slerp(v0, v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v3.mag());\n\n // Prints \"0.785...\" to the console.\n print(v3.heading());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(20, 0);\n let v2 = createVector(-40, 0);\n\n // Create a p5.Vector that's halfway between v1 and v2.\n let v3 = p5.Vector.slerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2667,"params":[{"name":"v","description":"

            p5.Vector to slerp toward.

            \n","type":"p5.Vector"},{"name":"amt","description":"

            amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.

            \n","type":"Number"}],"return":{"description":"","type":"p5.Vector"}},{"line":3652,"params":[{"name":"v1","description":"

            old vector.

            \n","type":"p5.Vector"},{"name":"v2","description":"

            new vector.

            \n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"slerped vector between v1 and v2","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2869,"description":"

            Reflects a vector about a line in 2D or a plane in 3D.

            \n

            The orientation of the line or plane is described by a normal vector that\npoints away from the shape.

            \n

            The static version of reflect(), as in p5.Vector.reflect(v, n),\nreturns a new p5.Vector object and doesn't change\nthe original.

            \n","itemtype":"method","name":"reflect","chainable":1,"example":["\n
            \n\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n // Create a vector to reflect.\n let v = createVector(4, 6);\n\n // Reflect v about n.\n v.reflect(n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n\n // Create a vector to reflect.\n let v0 = createVector(4, 6);\n\n // Create a reflected vector.\n let v1 = p5.Vector.reflect(v0, n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v1.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');\n}\nfunction draw() {\n background(200);\n\n // Draw a vertical line.\n line(50, 0, 50, 100);\n\n // Create a normal vector.\n let n = createVector(1, 0);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Create a vector to reflect.\n let v1 = createVector(30, 40);\n\n // Create a reflected vector.\n let v2 = p5.Vector.reflect(v1, n);\n\n // Scale the normal vector for drawing.\n n.setMag(30);\n\n // Draw the black arrow.\n drawArrow(v0, n, 'black');\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2869,"params":[{"name":"surfaceNormal","description":"

            p5.Vector\n to reflect about.

            \n","type":"p5.Vector"}],"chainable":1},{"line":3826,"params":[{"name":"incidentVector","description":"

            vector to be reflected.

            \n","type":"p5.Vector"},{"name":"surfaceNormal","description":"","type":"p5.Vector"},{"name":"target","description":"

            vector to receive the result.

            \n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the reflected vector","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":2979,"description":"

            Returns the vector's components as an array of numbers.

            \n","itemtype":"method","name":"array","return":{"description":"array with the vector's components.","type":"Number[]"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(20, 30);\n\n // Prints \"[20, 30, 0]\" to the console.\n print(v.array());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":2979,"params":[],"return":{"description":"array with the vector's components.","type":"Number[]"}},{"line":3856,"params":[{"name":"v","description":"

            the vector to convert to an array

            \n","type":"p5.Vector"}],"static":1,"return":{"description":"an Array with the 3 values","type":"Number[]"}}]},{"file":"src/math/p5.Vector.js","line":3001,"description":"

            Checks whether all the vector's components are equal to another vector's.

            \n

            equals() returns true if the vector's components are all the same as another\nvector's and false if not.

            \n

            The version of equals() with one parameter interprets it as another\np5.Vector object.

            \n

            The version of equals() with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.

            \n

            The static version of equals(), as in p5.Vector.equals(v0, v1),\ninterprets both parameters as p5.Vector objects.

            \n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equal.","type":"Boolean"},"example":["\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(5, 10, 20);\n let v1 = createVector(5, 10, 20);\n let v2 = createVector(13, 10, 19);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1.x, v1.y, v1.z));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2.x, v2.y, v2.z));\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(p5.Vector.equals(v0, v1));\n\n // Prints \"false\" to the console.\n print(p5.Vector.equals(v0, v2));\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":3001,"params":[{"name":"x","description":"

            x component of the vector.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y component of the vector.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z component of the vector.

            \n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equal.","type":"Boolean"}},{"line":3074,"params":[{"name":"value","description":"

            vector to compare.

            \n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}},{"line":3869,"params":[{"name":"v1","description":"

            the first vector to compare

            \n","type":"p5.Vector|Array"},{"name":"v2","description":"

            the second vector to compare

            \n","type":"p5.Vector|Array"}],"static":1,"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":3099,"description":"

            Creates a new 2D vector from an angle.

            \n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"

            desired angle, in radians. Unaffected by angleMode().

            \n","type":"Number"},{"name":"length","description":"

            length of the new vector (defaults to 1).

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0, 30);\n\n // Prints \"p5.Vector Object : [30, 0, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the center of a gray square. It points to the right.');\n}\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a p5.Vector with an angle 0 and magnitude 30.\n let v1 = p5.Vector.fromAngle(0, 30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3174,"description":"

            Creates a new 3D vector from a pair of ISO spherical angles.

            \n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"

            polar angle in radians (zero is up).

            \n","type":"Number"},{"name":"phi","description":"

            azimuthal angle in radians\n (zero is out of the screen).

            \n","type":"Number"},{"name":"length","description":"

            length of the new vector (defaults to 1).

            \n","type":"Number","optional":true}],"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(0, 0);\n\n // Prints \"p5.Vector Object : [0, -1, 0]\" to the console.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A light shines on a pink sphere as it orbits.');\n}\n\nfunction draw() {\n background(0);\n\n // Calculate the ISO angles.\n let theta = frameCount * 0.05;\n let phi = 0;\n\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(theta, phi, 100);\n\n // Create a point light using the p5.Vector.\n let c = color('deeppink');\n pointLight(c, v);\n\n // Style the sphere.\n fill(255);\n noStroke();\n\n // Draw the sphere.\n sphere(35);\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3243,"description":"

            Creates a new 2D unit vector with a random heading.

            \n","itemtype":"method","name":"random2D","static":1,"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random2D();\n\n // Prints \"p5.Vector Object : [x, y, 0]\" to the console\n // where x and y are small random numbers.\n print(v.toString());\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a random p5.Vector.\n let v1 = p5.Vector.random2D();\n\n // Scale v1 for drawing.\n v1.mult(30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3311,"description":"

            Creates a new 3D unit vector with a random heading.

            \n","itemtype":"method","name":"random3D","static":1,"return":{"description":"new p5.Vector object.","type":"p5.Vector"},"example":["\n
            \n\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random3D();\n\n // Prints \"p5.Vector Object : [x, y, z]\" to the console\n // where x, y, and z are small random numbers.\n print(v.toString());\n}\n\n
            "],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3431,"description":"

            Multiplies a vector by a scalar and returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3487,"description":"

            Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3516,"description":"

            Divides a vector by a scalar and returns a new vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3573,"description":"

            Calculates the dot product of two vectors.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3587,"description":"

            Calculates the cross product of two vectors.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3601,"description":"

            Calculates the Euclidean distance between two points (considering a\npoint as a vector object).

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3616,"description":"

            Linear interpolate a vector to another vector and return the result as a\nnew vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3646,"description":"

            Performs spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3678,"description":"

            Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(x*x + y*y + z*z).)

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3692,"description":"

            Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x*x + y*y + z*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3708,"description":"

            Normalize the vector to length 1 (make it a unit vector).

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3734,"description":"

            Limit the magnitude of the vector to the value used for the max\nparameter.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3762,"description":"

            Set the magnitude of the vector to the value used for the len\nparameter.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3790,"description":"

            Calculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3806,"description":"

            Calculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3822,"description":"

            Reflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3850,"description":"

            Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":3866,"description":"

            Equality check against a p5.Vector

            \n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"

            Sets the seed value for the random() and\nrandomGaussian() functions.

            \n

            By default, random() and\nrandomGaussian() produce different\nresults each time a sketch is run. Calling randomSeed() with a constant\nargument, such as randomSeed(99), makes these functions produce the same\nresults each time a sketch is run.

            \n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"

            seed value.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the white circle.\n circle(x, y, 10);\n\n // Set a random seed for consistency.\n randomSeed(99);\n\n // Get random coordinates.\n x = random(0, 100);\n y = random(0, 100);\n\n // Draw the black circle.\n fill(0);\n circle(x, y, 10);\n\n describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":86,"description":"

            Returns a random number or a random element from an array.

            \n

            random() follows uniform distribution, which means that all outcomes are\nequally likely. When random() is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\nrandom() is used to select elements from an array, all elements are\nequally likely to be chosen.

            \n

            By default, random() produces different results each time a sketch runs.\nThe randomSeed() function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.

            \n

            The version of random() with no parameters returns a random number from 0\nup to but not including 1.

            \n

            The version of random() with one parameter works one of two ways. If the\nargument passed is a number, random() returns a random number from 0 up\nto but not including the number. For example, calling random(5) returns\nvalues between 0 and 5. If the argument passed is an array, random()\nreturns a random element from that array. For example, calling\nrandom(['🦁', '🐯', '🐻']) returns either a lion, tiger, or bear emoji.

            \n

            The version of random() with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling random(-5, 10.2) returns values from -5 up to but\nnot including 10.2.

            \n","itemtype":"method","name":"random","return":{"description":"random number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw a point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of emoji strings.\n let animals = ['🦁', '🐯', '🐻'];\n\n // Choose a random element from the array.\n let choice = random(animals);\n\n // Style the text.\n textAlign(CENTER);\n textSize(20);\n\n // Display the emoji.\n text(choice, 50, 50);\n\n describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 45 and 55.\n let x = random(45, 55);\n let y = random(45, 55);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n\n
            \n\n
            \n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n // Update x and y randomly.\n x += random(-1, 1);\n y += random(-1, 1);\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random","overloads":[{"line":86,"params":[{"name":"min","description":"

            lower bound (inclusive).

            \n","type":"Number","optional":true},{"name":"max","description":"

            upper bound (exclusive).

            \n","type":"Number","optional":true}],"return":{"description":"random number.","type":"Number"}},{"line":259,"params":[{"name":"choices","description":"

            array to choose from.

            \n","type":"Array"}],"return":{"description":"random element from the array.","type":"*"}}]},{"file":"src/math/random.js","line":293,"description":"

            Returns a random number fitting a Gaussian, or normal, distribution.

            \n

            Normal distributions look like bell curves when plotted. Values from a\nnormal distribution cluster around a central value called the mean. The\ncluster's standard deviation describes its spread.

            \n

            By default, randomGaussian() produces different results each time a\nsketch runs. The randomSeed() function can be\nused to generate the same sequence of numbers each time a sketch runs.

            \n

            There's no minimum or maximum value that randomGaussian() might return.\nValues far from the mean are very unlikely and values near the mean are\nvery likely.

            \n

            The version of randomGaussian() with no parameters returns values with a\nmean of 0 and standard deviation of 1.

            \n

            The version of randomGaussian() with one parameter interprets the\nargument passed as the mean. The standard deviation is 1.

            \n

            The version of randomGaussian() with two parameters interprets the first\nargument passed as the mean and the second as the standard deviation.

            \n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"

            mean.

            \n","type":"Number","optional":true},{"name":"sd","description":"

            standard deviation.

            \n","type":"Number","optional":true}],"return":{"description":"random number.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');\n}\n\nfunction draw() {\n // Style the circles.\n noStroke();\n fill(0, 10);\n\n // Uniform distribution between 0 and 100.\n let x = random(100);\n let y = 25;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 1.\n x = randomGaussian(50);\n y = 50;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 10.\n x = randomGaussian(50, 10);\n y = 75;\n circle(x, y, 5);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"

            Calculates the arc cosine of a number.

            \n

            acos() is the inverse of cos(). It expects\narguments in the range -1 to 1. By default, acos() returns values in the\nrange 0 to π (about 3.14). If the\nangleMode() is DEGREES, then values are\nreturned in the range 0 to 180.

            \n","itemtype":"method","name":"acos","params":[{"name":"value","description":"

            value whose arc cosine is to be returned.

            \n","type":"Number"}],"return":{"description":"arc cosine of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.142, -1, and 3.142 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI + QUARTER_PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":80,"description":"

            Calculates the arc sine of a number.

            \n

            asin() is the inverse of sin(). It expects input\nvalues in the range of -1 to 1. By default, asin() returns values in the\nrange -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If\nthe angleMode() is DEGREES then values are\nreturned in the range -90 to 90.

            \n","itemtype":"method","name":"asin","params":[{"name":"value","description":"

            value whose arc sine is to be returned.

            \n","type":"Number"}],"return":{"description":"arc sine of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI + PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":142,"description":"

            Calculates the arc tangent of a number.

            \n

            atan() is the inverse of tan(). It expects input\nvalues in the range of -Infinity to Infinity. By default, atan() returns\nvalues in the range -π ÷ 2 (about -1.57) to π ÷ 2\n(about 1.57). If the angleMode() is DEGREES\nthen values are returned in the range -90 to 90.

            \n","itemtype":"method","name":"atan","params":[{"name":"value","description":"

            value whose arc tangent is to be returned.

            \n","type":"Number"}],"return":{"description":"arc tangent of the given value.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI + PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":204,"description":"

            Calculates the angle formed by a point, the origin, and the positive\nx-axis.

            \n

            atan2() is most often used for orienting geometry to the mouse's\nposition, as in atan2(mouseY, mouseX). The first parameter is the point's\ny-coordinate and the second parameter is its x-coordinate.

            \n

            By default, atan2() returns values in the range\n-π (about -3.14) to π (3.14). If the\nangleMode() is DEGREES, then values are\nreturned in the range -180 to 180.

            \n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"

            y-coordinate of the point.

            \n","type":"Number"},{"name":"x","description":"

            x-coordinate of the point.

            \n","type":"Number"}],"return":{"description":"arc tangent of the given point.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the top-left of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the angle between the mouse\n // and the origin.\n let a = atan2(mouseY, mouseX);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(0, 0, 60, 10);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the center of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Get the mouse's coordinates relative to the origin.\n let x = mouseX - 50;\n let y = mouseY - 50;\n\n // Calculate the angle between the mouse and the origin.\n let a = atan2(y, x);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(-30, -5, 60, 10);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":281,"description":"

            Calculates the cosine of an angle.

            \n

            cos() is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. cos()\ntakes into account the current angleMode().

            \n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"cosine of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * cos(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":361,"description":"

            Calculates the sine of an angle.

            \n

            sin() is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. sin()\ntakes into account the current angleMode().

            \n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"sine of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates up and down.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 50;\n let y = 30 * sin(frameCount * 0.05) + 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * sin(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":441,"description":"

            Calculates the tangent of an angle.

            \n

            tan() is useful for many geometric tasks in creative coding. The values\nreturned range from -Infinity to Infinity and repeat periodically as the\ninput angle increases. tan() takes into account the current\nangleMode().

            \n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"

            the angle.

            \n","type":"Number"}],"return":{"description":"tangent of the angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * tan(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":479,"description":"

            Converts an angle measured in radians to its value in degrees.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.

            \n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"

            radians value to convert to degrees.

            \n","type":"Number"}],"return":{"description":"converted angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let rad = QUARTER_PI;\n let deg = degrees(rad);\n\n // Display the conversion.\n text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);\n\n describe('The text \"0.79 rad = 45˚\".');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":515,"description":"

            Converts an angle measured in degrees to its value in radians.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.

            \n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"

            degree value to convert to radians.

            \n","type":"Number"}],"return":{"description":"converted angle.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":551,"description":"

            Changes the unit system used to measure angles.

            \n

            Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.

            \n

            Functions such as rotate() and\nsin() expect angles measured radians by default.\nCalling angleMode(DEGREES) switches to degrees. Calling\nangleMode(RADIANS) switches back to radians.

            \n

            Calling angleMode() with no arguments returns current angle mode, which\nis either RADIANS or DEGREES.

            \n","itemtype":"method","name":"angleMode","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Rotate 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Rotate 1/8 turn.\n rotate(45);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Calculate the angle to rotate.\n let angle = TWO_PI / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Calculate the angle to rotate.\n let angle = 360 / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 2.86) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the upper line.\n rotate(PI / 6);\n line(0, 0, 80, 0);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw the lower line.\n rotate(30);\n line(0, 0, 80, 0);\n\n describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');\n}\n\n
            "],"class":"p5","module":"Math","submodule":"Trigonometry","overloads":[{"line":551,"params":[{"name":"mode","description":"

            either RADIANS or DEGREES.

            \n","type":"Constant"}]},{"line":737,"params":[],"return":{"description":"mode either RADIANS or DEGREES","type":"Constant"}}]},{"file":"src/typography/attributes.js","line":11,"description":"

            Sets the way text is aligned when text() is called.

            \n

            By default, calling text('hi', 10, 20) places the bottom-left corner of\nthe text's bounding box at (10, 20).

            \n

            The first parameter, horizAlign, changes the way\ntext() interprets x-coordinates. By default, the\nx-coordinate sets the left edge of the bounding box. textAlign() accepts\nthe following values for horizAlign: LEFT, CENTER, or RIGHT.

            \n

            The second parameter, vertAlign, is optional. It changes the way\ntext() interprets y-coordinates. By default, the\ny-coordinate sets the bottom edge of the bounding box. textAlign()\naccepts the following values for vertAlign: TOP, BOTTOM, CENTER,\nor BASELINE.

            \n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a vertical line.\n strokeWeight(0.5);\n line(50, 0, 50, 100);\n\n // Top line.\n textSize(16);\n textAlign(RIGHT);\n text('ABCD', 50, 30);\n\n // Middle line.\n textAlign(CENTER);\n text('EFGH', 50, 50);\n\n // Bottom line.\n textAlign(LEFT);\n text('IJKL', 50, 70);\n\n describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(0.5);\n\n // First line.\n line(0, 12, width, 12);\n textAlign(CENTER, TOP);\n text('TOP', 50, 12);\n\n // Second line.\n line(0, 37, width, 37);\n textAlign(CENTER, CENTER);\n text('CENTER', 50, 37);\n\n // Third line.\n line(0, 62, width, 62);\n textAlign(CENTER, BASELINE);\n text('BASELINE', 50, 62);\n\n // Fourth line.\n line(0, 97, width, 97);\n textAlign(CENTER, BOTTOM);\n text('BOTTOM', 50, 97);\n\n describe('The words \"TOP\", \"CENTER\", \"BASELINE\", and \"BOTTOM\" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"

            horizontal alignment, either LEFT,\n CENTER, or RIGHT.

            \n","type":"Constant"},{"name":"vertAlign","description":"

            vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE.

            \n","type":"Constant","optional":true}],"chainable":1},{"line":98,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":107,"description":"

            Sets the spacing between lines of text when\ntext() is called.

            \n

            Note: Spacing is measured in pixels.

            \n

            Calling textLeading() without an argument returns the current spacing.

            \n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // \"\\n\" starts a new line of text.\n let lines = 'one\\ntwo';\n\n // Left.\n text(lines, 10, 25);\n\n // Right.\n textLeading(30);\n text(lines, 70, 25);\n\n describe('The words \"one\" and \"two\" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":107,"params":[{"name":"leading","description":"

            spacing between lines of text in units of pixels.

            \n","type":"Number"}],"chainable":1},{"line":142,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":151,"description":"

            Sets the font size when\ntext() is called.

            \n

            Note: Font size is measured in pixels.

            \n

            Calling textSize() without an arugment returns the current size.

            \n","itemtype":"method","name":"textSize","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n textSize(12);\n text('Font Size 12', 10, 30);\n\n // Middle.\n textSize(14);\n text('Font Size 14', 10, 60);\n\n // Bottom.\n textSize(16);\n text('Font Size 16', 10, 90);\n\n describe('The text \"Font Size 12\" drawn small, \"Font Size 14\" drawn medium, and \"Font Size 16\" drawn large.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":151,"params":[{"name":"size","description":"

            size of the letters in units of pixels.

            \n","type":"Number"}],"chainable":1},{"line":188,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":197,"description":"

            Sets the style for system fonts when\ntext() is called.

            \n

            The parameter, style, can be either NORMAL, ITALIC, BOLD, or\nBOLDITALIC.

            \n

            textStyle() may be overridden by CSS styling. This function doesn't\naffect fonts loaded with loadFont().

            \n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(12);\n textAlign(CENTER);\n\n // First row.\n textStyle(NORMAL);\n text('Normal', 50, 15);\n\n // Second row.\n textStyle(ITALIC);\n text('Italic', 50, 40);\n\n // Third row.\n textStyle(BOLD);\n text('Bold', 50, 65);\n\n // Fourth row.\n textStyle(BOLDITALIC);\n text('Bold Italic', 50, 90);\n\n describe('The words \"Normal\" displayed normally, \"Italic\" in italic, \"Bold\" in bold, and \"Bold Italic\" in bold italics.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":197,"params":[{"name":"style","description":"

            styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC.

            \n","type":"Constant"}],"chainable":1},{"line":244,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":253,"description":"

            Calculates the maximum width of a string of text drawn when\ntext() is called.

            \n","itemtype":"method","name":"textWidth","params":[{"name":"str","description":"

            string of text to measure.

            \n","type":"String"}],"return":{"description":"width measured in units of pixels.","type":"Number"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n let s = 'yoyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yoyo\" underlined.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n // \"\\n\" starts a new line.\n let s = 'yo\\nyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yo\" written twice, one copy beneath the other. The words are divided by a horizontal line.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":337,"description":"

            Calculates the ascent of the current font at its current size.

            \n

            The ascent represents the distance, in pixels, of the tallest character\nabove the baseline.

            \n","itemtype":"method","name":"textAscent","return":{"description":"ascent measured in units of pixels.","type":"Number"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.8;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and ascent.\n let a = textAscent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY - a, 23, baseY);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and ascent.\n a = textAscent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY - a, 91, baseY);\n\n describe('The letters \"dp\" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the \"d\".');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":396,"description":"

            Calculates the descent of the current font at its current size.

            \n

            The descent represents the distance, in pixels, of the character with the\nlongest descender below the baseline.

            \n","itemtype":"method","name":"textDescent","return":{"description":"descent measured in units of pixels.","type":"Number"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the font.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.9;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and descent.\n let d = textDescent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY, 23, baseY + d);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and descent.\n d = textDescent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY, 91, baseY + d);\n\n describe('The letters \"dp\" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the \"p\".');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":455,"description":"

            Helper function to measure ascent and descent.

            \n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":462,"description":"

            Sets the style for wrapping text when\ntext() is called.

            \n

            The parameter, style, can be one of the following values:

            \n

            WORD starts new lines of text at spaces. If a string of text doesn't\nhave spaces, it may overflow the text box and the canvas. This is the\ndefault style.

            \n

            CHAR starts new lines as needed to stay within the text box.

            \n

            textWrap() only works when the maximum width is set for a text box. For\nexample, calling text('Have a wonderful day', 0, 10, 100) sets the\nmaximum width to 100 pixels.

            \n

            Calling textWrap() without an argument returns the current style.

            \n","itemtype":"method","name":"textWrap","params":[{"name":"style","description":"

            text wrapping style, either WORD or CHAR.

            \n","type":"Constant"}],"return":{"description":"style","type":"String"},"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(WORD);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across three lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across two lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('祝你有美好的一天', 0, 10, 100);\n\n describe('The text \"祝你有美好的一天\" written across two lines.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"

            Loads a font and creates a p5.Font object.\nloadFont() can load fonts in either .otf or .ttf format. Loaded fonts can\nbe used to style text on the canvas and in HTML elements.

            \n

            The first parameter, path, is the path to a font file.\nPaths to local files should be relative. For example,\n'assets/inconsolata.otf'. The Inconsolata font used in the following\nexamples can be downloaded for free\nhere.\nPaths to remote files should be URLs. For example,\n'https://example.com/inconsolata.otf'. URLs may be blocked due to browser\nsecurity.

            \n

            The second parameter, successCallback, is optional. If a function is\npassed, it will be called once the font has loaded. The callback function\nmay use the new p5.Font object if needed.

            \n

            The third parameter, failureCallback, is also optional. If a function is\npassed, it will be called if the font fails to load. The callback function\nmay use the error\nEvent\nobject if needed.

            \n

            Fonts can take time to load. Calling loadFont() in\npreload() ensures fonts load before they're\nused in setup() or\ndraw().

            \n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"

            path of the font to be loaded.

            \n","type":"String"},{"name":"successCallback","description":"

            function called with the\n p5.Font object after it\n loads.

            \n","type":"Function","optional":true},{"name":"failureCallback","description":"

            function called with the error\n Event\n object if the font fails to load.

            \n","type":"Function","optional":true}],"return":{"description":"p5.Font object.","type":"p5.Font"},"example":["\n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n loadFont('assets/inconsolata.otf', font => {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n });\n}\n\n
            \n\n
            \n\nfunction setup() {\n loadFont('assets/inconsolata.otf', success, failure);\n}\n\nfunction success(font) {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\nfunction failure(event) {\n console.error('Oops!', event);\n}\n\n
            \n\n
            \n\nfunction preload() {\n loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n let p = createP('p5*js');\n p.style('color', 'deeppink');\n p.style('font-family', 'Inconsolata');\n p.style('font-size', '36px');\n p.position(10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":182,"description":"

            Draws text to the canvas.

            \n

            The first parameter, str, is the text to be drawn. The second and third\nparameters, x and y, set the coordinates of the text's bottom-left\ncorner. See textAlign() for other ways to\nalign text.

            \n

            The fourth and fifth parameters, maxWidth and maxHeight, are optional.\nThey set the dimensions of the invisible rectangle containing the text. By\ndefault, they set its maximum width and height. See\nrectMode() for other ways to define the\nrectangular text box. Text will wrap to fit within the text box. Text\noutside of the box won't be drawn.

            \n

            Text can be styled a few ways. Call the fill()\nfunction to set the text's fill color. Call\nstroke() and\nstrokeWeight() to set the text's outline.\nCall textSize() and\ntextFont() to set the text's size and font,\nrespectively.

            \n

            Note: WEBGL mode only supports fonts loaded with\nloadFont(). Calling\nstroke() has no effect in WEBGL mode.

            \n","itemtype":"method","name":"text","params":[{"name":"str","description":"

            text to be displayed.

            \n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"

            x-coordinate of the text box.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text box.

            \n","type":"Number"},{"name":"maxWidth","description":"

            maximum width of the text box. See\n rectMode() for\n other options.

            \n","type":"Number","optional":true},{"name":"maxHeight","description":"

            maximum height of the text box. See\n rectMode() for\n other options.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n background(200);\n text('hi', 50, 50);\n\n describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('skyblue');\n textSize(100);\n text('🌈', 0, 100);\n\n describe('A rainbow in a blue sky.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n textSize(32);\n fill(255);\n stroke(0);\n strokeWeight(4);\n text('hi', 50, 50);\n\n describe('The text \"hi\" written in white with a black outline.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('black');\n textSize(22);\n fill('yellow');\n text('rainbows', 6, 20);\n fill('cornflowerblue');\n text('rainbows', 6, 45);\n fill('tomato');\n text('rainbows', 6, 70);\n fill('limegreen');\n text('rainbows', 6, 95);\n\n describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n let s = 'The quick brown fox jumps over the lazy dog.';\n text(s, 10, 10, 70, 80);\n\n describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n rectMode(CENTER);\n let s = 'The quick brown fox jumps over the lazy dog.';\n text(s, 50, 50, 70, 80);\n\n describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textFont(font);\n textSize(32);\n textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n background(0);\n rotateY(frameCount / 30);\n text('p5*js', 0, 0);\n\n describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":335,"description":"

            Sets the font used by the text() function.

            \n

            The first parameter, font, sets the font. textFont() recognizes either\na p5.Font object or a string with the name of a\nsystem font. For example, 'Courier New'.

            \n

            The second parameter, size, is optional. It sets the font size in pixels.\nThis has the same effect as calling textSize().

            \n

            Note: WEBGL mode only supports fonts loaded with\nloadFont().

            \n","itemtype":"method","name":"textFont","return":{"description":"current font or p5 Object.","type":"Object"},"example":["\n
            \n\nfunction setup() {\n background(200);\n textFont('Courier New');\n textSize(24);\n text('hi', 35, 55);\n\n describe('The text \"hi\" written in a black, monospace font on a gray background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background('black');\n fill('palegreen');\n textFont('Courier New', 10);\n text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);\n text('>', 5, 70);\n\n describe('A text prompt from a game is written in a green, monospace font on a black background.');\n}\n\n
            \n\n
            \n\nfunction setup() {\n background(200);\n textFont('Verdana');\n let currentFont = textFont();\n text(currentFont, 25, 50);\n\n describe('The text \"Verdana\" written in a black, sans-serif font on a gray background.');\n}\n\n
            \n\n
            \n\nlet fontRegular;\nlet fontItalic;\nlet fontBold;\n\nfunction preload() {\n fontRegular = loadFont('assets/Regular.otf');\n fontItalic = loadFont('assets/Italic.ttf');\n fontBold = loadFont('assets/Bold.ttf');\n}\n\nfunction setup() {\n background(200);\n textFont(fontRegular);\n text('I am Normal', 10, 30);\n textFont(fontItalic);\n text('I am Italic', 10, 50);\n textFont(fontBold);\n text('I am Bold', 10, 70);\n\n describe('The statements \"I am Normal\", \"I am Italic\", and \"I am Bold\" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');\n}\n\n
            "],"class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":335,"params":[],"return":{"description":"current font or p5 Object.","type":"Object"}},{"line":418,"params":[{"name":"font","description":"

            font as a p5.Font object or a string.

            \n","type":"Object|String"},{"name":"size","description":"

            font size in pixels.

            \n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":51,"description":"

            The font's underlying\nopentype.js\nfont object.

            \n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":62,"description":"

            Returns the bounding box for a string of text written using the font.

            \n

            The bounding box is the smallest rectangle that can contain a string of\ntext. font.textBounds() returns an object with the bounding box's\nlocation and size. For example, calling font.textBounds('p5*js', 5, 20)\nreturns an object in the format\n{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }. The x and y properties are\nalways the coordinates of the bounding box's top-left corner.

            \n

            The first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.

            \n

            The fourth parameter, fontSize, is optional. It sets the font size used to\ndetermine the bounding box. By default, font.textBounds() will use the\ncurrent textSize().

            \n","itemtype":"method","name":"textBounds","params":[{"name":"str","description":"

            string of text.

            \n","type":"String"},{"name":"x","description":"

            x-coordinate of the text.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text.

            \n","type":"Number"},{"name":"fontSize","description":"

            font size. Defaults to the current\n textSize().

            \n","type":"Number","optional":true}],"return":{"description":"object describing the bounding box with\n properties x, y, w, and h.","type":"Object"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 35, 53);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n\n // Display the text.\n text('p5*js', 35, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n textSize(15);\n textAlign(CENTER, CENTER);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 50, 50);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Display the text.\n text('p5*js', 50, 50);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            \n\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 31, 53, 15);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n textSize(15);\n\n // Display the text.\n text('p5*js', 31, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n\n
            "],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":279,"description":"

            Returns an array of points outlining a string of text written using the\nfont.

            \n

            Each point object in the array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n{ x: 10, y: 20, alpha: 450 }.

            \n

            The first parameter, str, is a string of text. The second and third\nparameters, x and y, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\ntextAlign() for more ways to align text.

            \n

            The fourth parameter, fontSize, is optional. It sets the text's font\nsize. By default, font.textToPoints() will use the current\ntextSize().

            \n

            The fifth parameter, options, is also optional. font.textToPoints()\nexpects an object with the following properties:

            \n

            sampleFactor is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.

            \n

            simplifyThreshold removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle to use when determining\nwhether two edges are collinear.

            \n","itemtype":"method","name":"textToPoints","params":[{"name":"str","description":"

            string of text.

            \n","type":"String"},{"name":"x","description":"

            x-coordinate of the text.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the text.

            \n","type":"Number"},{"name":"fontSize","description":"

            font size. Defaults to the current\n textSize().

            \n","type":"Number","optional":true},{"name":"options","description":"

            object with sampleFactor and simplifyThreshold\n properties.

            \n","type":"Object","optional":true}],"return":{"description":"array of point objects, each with x, y, and alpha (path angle) properties.","type":"Array"},"example":["\n
            \n\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the point array.\n let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });\n\n // Draw a dot at each point.\n for (let p of points) {\n point(p.x, p.y);\n }\n\n describe('A set of black dots outlining the text \"p5*js\" on a gray background.');\n}\n\n
            "],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"

            Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().

            \n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use array.push(value) instead.","params":[{"name":"array","description":"

            Array to append

            \n","type":"Array"},{"name":"value","description":"

            to be added to the Array

            \n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['Mango', 'Apple', 'Papaya'];\n print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n append(myArray, 'Peach');\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"

            Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().

            \n

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

            \n

            Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.

            \n","itemtype":"method","name":"arrayCopy","deprecated":true,"deprecationMessage":"Use arr1.copyWithin(arr2) instead.","example":["\n
            \nlet src = ['A', 'B', 'C'];\nlet dst = [1, 2, 3];\nlet srcPosition = 1;\nlet dstPosition = 0;\nlet length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 , 2 , 3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n
            "],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"

            the source Array

            \n","type":"Array"},{"name":"srcPosition","description":"

            starting position in the source Array

            \n","type":"Integer"},{"name":"dst","description":"

            the destination Array

            \n","type":"Array"},{"name":"dstPosition","description":"

            starting position in the destination Array

            \n","type":"Integer"},{"name":"length","description":"

            number of Array elements to be copied

            \n","type":"Integer"}]},{"line":73,"params":[{"name":"src","description":"","type":"Array"},{"name":"dst","description":"","type":"Array"},{"name":"length","description":"","type":"Integer","optional":true}]}]},{"file":"src/utilities/array_functions.js","line":112,"description":"

            Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.

            \n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use arr1.concat(arr2) instead.","params":[{"name":"a","description":"

            first Array to concatenate

            \n","type":"Array"},{"name":"b","description":"

            second Array to concatenate

            \n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n
            \nfunction setup() {\n let arr1 = ['A', 'B', 'C'];\n let arr2 = [1, 2, 3];\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1,2,3]\n\n let arr3 = concat(arr1, arr2);\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1, 2, 3]\n print(arr3); // ['A','B','C', 1, 2, 3]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"

            Reverses the order of an array, maps to Array.reverse()

            \n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use array.reverse() instead.","params":[{"name":"list","description":"

            Array to reverse

            \n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A','B','C']\n\n reverse(myArray);\n print(myArray); // ['C','B','A']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"

            Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().

            \n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use array.pop() instead.","params":[{"name":"list","description":"

            Array to shorten

            \n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A', 'B', 'C']\n let newArray = shorten(myArray);\n print(myArray); // ['A','B','C']\n print(newArray); // ['A','B']\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"

            Randomizes the order of the elements of an array. Implements\n\nFisher-Yates Shuffle Algorithm.

            \n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"

            Array to shuffle

            \n","type":"Array"},{"name":"bool","description":"

            modify passed array

            \n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n
            \nfunction setup() {\n let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n print(regularArr);\n shuffle(regularArr, true); // force modifications to passed array\n print(regularArr);\n\n // By default shuffle() returns a shuffled cloned array:\n let newArr = shuffle(regularArr);\n print(regularArr);\n print(newArr);\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"

            Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.

            \n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use array.sort() instead.","params":[{"name":"list","description":"

            Array to sort

            \n","type":"Array"},{"name":"count","description":"

            number of elements to sort, starting from 0

            \n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n
            \nfunction setup() {\n let words = ['banana', 'apple', 'pear', 'lime'];\n print(words); // ['banana', 'apple', 'pear', 'lime']\n let count = 4; // length of array\n\n words = sort(words, count);\n print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n
            \n
            \nfunction setup() {\n let numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n let count = 5; // Less than the length of the array\n\n numbers = sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"

            Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)

            \n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use array.splice() instead.","params":[{"name":"list","description":"

            Array to splice into

            \n","type":"Array"},{"name":"value","description":"

            value to be spliced in

            \n","type":"Any"},{"name":"position","description":"

            in the array from which to insert data

            \n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = [0, 1, 2, 3, 4];\n let insArray = ['A', 'B', 'C'];\n print(myArray); // [0, 1, 2, 3, 4]\n print(insArray); // ['A','B','C']\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"

            Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.

            \n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use array.slice() instead.","params":[{"name":"list","description":"

            Array to extract from

            \n","type":"Array"},{"name":"start","description":"

            position to begin

            \n","type":"Integer"},{"name":"count","description":"

            number of values to extract

            \n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n
            \nfunction setup() {\n let myArray = [1, 2, 3, 4, 5];\n print(myArray); // [1, 2, 3, 4, 5]\n\n let sub1 = subset(myArray, 0, 3);\n let sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n
            "],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"

            Converts a string to its floating point representation. The contents of a\nstring must resemble a number, or NaN (not a number) will be returned.\nFor example, float(\"1234.56\") evaluates to 1234.56, but float(\"giraffe\")\nwill return NaN.

            \n

            When an array of values is passed in, then an array of floats of the same\nlength is returned.

            \n","itemtype":"method","name":"float","params":[{"name":"str","description":"

            float string to parse

            \n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n
            \nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\ndescribe('20-by-20 white ellipse in the center of the canvas');\n
            \n
            \nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":42,"description":"

            Converts a boolean, string, or float to its integer representation.\nWhen an array of values is passed in, then an int array of the same length\nis returned.

            \n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n
            \nprint(int('10')); // 10\nprint(int(10.31)); // 10\nprint(int(-10)); // -10\nprint(int(true)); // 1\nprint(int(false)); // 0\nprint(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\nprint(int(Infinity)); // Infinity\nprint(int('-Infinity')); // -Infinity\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":42,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number"},{"name":"radix","description":"

            the radix to convert to (default: 10)

            \n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":64,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"},{"name":"radix","description":"","type":"Integer","optional":true}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":86,"description":"

            Converts a boolean, string or number to its string representation.\nWhen an array of values is passed in, then an array of strings of the same\nlength is returned.

            \n","itemtype":"method","name":"str","params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n
            \nprint(str('10')); // \"10\"\nprint(str(10.31)); // \"10.31\"\nprint(str(-10)); // \"-10\"\nprint(str(true)); // \"true\"\nprint(str(false)); // \"false\"\nprint(str([true, '10.3', 9.8])); // [ \"true\", \"10.3\", \"9.8\" ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":112,"description":"

            Converts a number or string to its boolean representation.\nFor a number, any non-zero value (positive or negative) evaluates to true,\nwhile zero evaluates to false. For a string, the value \"true\" evaluates to\ntrue, while any other value evaluates to false. When an array of number or\nstring values is passed in, then a array of booleans of the same length is\nreturned.

            \n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n
            \nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean('true')); // true\nprint(boolean('abcd')); // false\nprint(boolean([0, 12, 'true'])); // [false, true, true]\n
            "],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":144,"description":"

            Converts a number, string representation of a number, or boolean to its byte\nrepresentation. A byte can be only a whole number between -128 and 127, so\nwhen a value outside of this range is converted, it wraps around to the\ncorresponding byte representation. When an array of number, string or boolean\nvalues is passed in, then an array of bytes the same length is returned.

            \n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n
            \nprint(byte(127)); // 127\nprint(byte(128)); // -128\nprint(byte(23.4)); // 23\nprint(byte('23.4')); // 23\nprint(byte('hello')); // NaN\nprint(byte(true)); // 1\nprint(byte([0, 255, '100'])); // [0, -1, 100]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":144,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":166,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":180,"description":"

            Converts a number or string to its corresponding single-character\nstring representation. If a string parameter is provided, it is first\nparsed as an integer and then translated into a single-character string.\nWhen an array of number or string values is passed in, then an array of\nsingle-character strings of the same length is returned.

            \n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n
            \nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":180,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":199,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":214,"description":"

            Converts a single-character string to its corresponding integer\nrepresentation. When an array of single-character string values is passed\nin, then an array of integers of the same length is returned.

            \n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n
            \nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":214,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":230,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":243,"description":"

            Converts a number to a string in its equivalent hexadecimal notation. If a\nsecond parameter is passed, it is used to set the number of characters to\ngenerate in the hexadecimal notation. When an array is passed in, an\narray of strings in hexadecimal notation of the same length is returned.

            \n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n
            \nprint(hex(255)); // \"000000FF\"\nprint(hex(255, 6)); // \"0000FF\"\nprint(hex([0, 127, 255], 6)); // [ \"000000\", \"00007F\", \"0000FF\" ]\nprint(Infinity); // \"FFFFFFFF\"\nprint(-Infinity); // \"00000000\"\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":243,"params":[{"name":"n","description":"

            value to parse

            \n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":263,"params":[{"name":"ns","description":"

            array of values to parse

            \n","type":"Number[]"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":293,"description":"

            Converts a string representation of a hexadecimal number to its equivalent\ninteger value. When an array of strings in hexadecimal notation is passed\nin, an array of integers of the same length is returned.

            \n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n
            \nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n
            "],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":293,"params":[{"name":"n","description":"

            value to parse

            \n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":309,"params":[{"name":"ns","description":"

            values to parse

            \n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"

            Combines an array of Strings into one String, each separated by the\ncharacter(s) used for the separator parameter. To join arrays of ints or\nfloats, it's necessary to first convert them to Strings using nf() or\nnfs().

            \n","itemtype":"method","name":"join","params":[{"name":"list","description":"

            array of Strings to be joined

            \n","type":"Array"},{"name":"separator","description":"

            String to be placed between each item

            \n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n
            \n\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\ndescribe('“Hello world!” displayed middle left of canvas.');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":41,"description":"

            This function is used to apply a regular expression to a piece of text,\nand return matching groups (elements found inside parentheses) as a\nString array. If there are no matches, a null value will be returned.\nIf no groups are specified in the regular expression, but the sequence\nmatches, an array of length 1 (with the matched text as the first element\nof the array) will be returned.

            \n

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

            \n

            If there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nElement [0] of a regular expression match returns the entire matching\nstring, and the match groups start at element [1] (the first group is [1],\nthe second [2], and so on).

            \n","itemtype":"method","name":"match","params":[{"name":"str","description":"

            the String to be searched

            \n","type":"String"},{"name":"regexp","description":"

            the regexp to be used for matching

            \n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n
            \n\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\ndescribe('“p5js*” displayed middle left of canvas.');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":79,"description":"

            This function is used to apply a regular expression to a piece of text,\nand return a list of matching groups (elements found inside parentheses)\nas a two-dimensional String array. If there are no matches, a null value\nwill be returned. If no groups are specified in the regular expression,\nbut the sequence matches, a two dimensional array is still returned, but\nthe second dimension is only of length one.

            \n

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

            \n

            If there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nAssuming a loop with counter variable i, element [i][0] of a regular\nexpression match returns the entire matching string, and the match groups\nstart at element [i][1] (the first group is [i][1], the second [i][2],\nand so on).

            \n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"

            the String to be searched

            \n","type":"String"},{"name":"regexp","description":"

            the regexp to be used for matching

            \n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n
            \n\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":126,"description":"

            Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.

            \n

            The values for the digits, left, and right parameters should always\nbe positive integers.

            \n

            (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.

            \n

            For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.

            \n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textSize(16);\n\n text(nf(num1, 4, 2), 10, 30);\n text(nf(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“0321.00” middle top, “-1321.00” middle bottom canvas');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":126,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number|String"},{"name":"left","description":"

            number of digits to the left of the\n decimal point

            \n","type":"Integer|String","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":171,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"left","description":"","type":"Integer|String","optional":true},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":216,"description":"

            Utility function for formatting numbers into strings and placing\nappropriate commas to mark units of 1000. There are two versions: one\nfor formatting ints, and one for formatting an array of ints. The value\nfor the right parameter should always be a positive integer.

            \n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num = 11253106.115;\n let numArr = [1, 1, 2];\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfc(num, 4), 10, 30);\n text(nfc(numArr, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“11,253,106.115” top middle and “1.00,1.00,2.00” displayed bottom mid');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":216,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number|String"},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":253,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":289,"description":"

            Utility function for formatting numbers into strings. Similar to nf() but\nputs a \"+\" in front of positive numbers and a \"-\" in front of negative\nnumbers. There are two versions: one for formatting floats, and one for\nformatting ints. The values for left, and right parameters\nshould always be positive integers.

            \n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 11253106.115;\n let num2 = -11253106.115;\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfp(num1, 4, 2), 10, 30);\n text(nfp(num2, 4, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“+11253106.11” top middle and “-11253106.11” displayed bottom middle');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":289,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number"},{"name":"left","description":"

            number of digits to the left of the decimal\n point

            \n","type":"Integer","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":329,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":350,"description":"

            Utility function for formatting numbers into strings. Similar to nf() but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.

            \n

            The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative\nnumber with some negative number (See the example to get a clear picture).\nThere are two versions: one for formatting float, and one for formatting int.

            \n

            The values for the digits, left, and right parameters should always be positive integers.

            \n

            (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.

            \n

            (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.

            \n

            For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.

            \n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n
            \n\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textSize(16);\n\n // nfs() aligns num1 (positive number) with num2 (negative number) by\n // adding a blank space in front of the num1 (positive number)\n // [left = 4] in num1 add one 0 in front, to align the digits with num2\n // [right = 2] in num1 and num2 adds two 0's after both numbers\n // To see the differences check the example of nf() too.\n text(nfs(num1, 4, 2), 10, 30);\n text(nfs(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n\n describe('“0321.00” top middle and “-1321.00” displayed bottom middle');\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":350,"params":[{"name":"num","description":"

            the Number to format

            \n","type":"Number"},{"name":"left","description":"

            number of digits to the left of the decimal\n point

            \n","type":"Integer","optional":true},{"name":"right","description":"

            number of digits to the right of the\n decimal point

            \n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":406,"params":[{"name":"nums","description":"

            the Numbers to format

            \n","type":"Array"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":427,"description":"

            The split() function maps to String.split(), it breaks a String into\npieces using a character or string as the delimiter. The delim parameter\nspecifies the character or characters that mark the boundaries between\neach piece. A String[] array is returned that contains each of the pieces.

            \n

            The splitTokens() function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.

            \n","itemtype":"method","name":"split","params":[{"name":"value","description":"

            the String to be split

            \n","type":"String"},{"name":"delim","description":"

            the String used to separate the data

            \n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n
            \n\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\ndescribe('“Pat” top left, “Xio” mid left, and “Alex” displayed bottom left');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":458,"description":"

            The splitTokens() function splits a String at one or many character\ndelimiters or \"tokens.\" The delim parameter specifies the character or\ncharacters to be used as a boundary.

            \n

            If no delim characters are specified, any whitespace character is used to\nsplit. Whitespace characters include tab (\\t), line feed (\\n), carriage\nreturn (\\r), form feed (\\f), and space.

            \n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"

            the String to be split

            \n","type":"String"},{"name":"delim","description":"

            list of individual Strings that will be used as\n separators

            \n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n
            \n\nfunction setup() {\n let myStr = 'Mango, Banana, Lime';\n let myStrArr = splitTokens(myStr, ',');\n\n print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":511,"description":"

            Removes whitespace characters from the beginning and end of a String. In\naddition to standard whitespace characters such as space, carriage return,\nand tab, this function also removes the Unicode \"nbsp\" character.

            \n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n
            \n\nlet string = trim(' No new lines\\n ');\ntext(string + ' here', 2, 50);\ndescribe('“No new lines here” displayed center canvas');\n\n
            "],"class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":511,"params":[{"name":"str","description":"

            a String to be trimmed

            \n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":529,"params":[{"name":"strs","description":"

            an Array of Strings to be trimmed

            \n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"

            p5.js communicates with the clock on your computer. The day() function\nreturns the current day as a value from 1 - 31.

            \n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n
            \n\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\ndescribe('Current day is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":29,"description":"

            p5.js communicates with the clock on your computer. The hour() function\nreturns the current hour as a value from 0 - 23.

            \n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n
            \n\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\ndescribe('Current hour is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":48,"description":"

            p5.js communicates with the clock on your computer. The minute() function\nreturns the current minute as a value from 0 - 59.

            \n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n
            \n\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\ndescribe('Current minute is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":67,"description":"

            Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when setup() is called). This information is often\nused for timing events and animation sequences.

            \n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n
            \n\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\ndescribe('number of milliseconds since sketch has started displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":92,"description":"

            p5.js communicates with the clock on your computer. The month() function\nreturns the current month as a value from 1 - 12.

            \n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n
            \n\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\ndescribe('Current month is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":112,"description":"

            p5.js communicates with the clock on your computer. The second() function\nreturns the current second as a value from 0 - 59.

            \n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n
            \n\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\ndescribe('Current second is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":131,"description":"

            p5.js communicates with the clock on your computer. The year() function\nreturns the current year as an integer (2014, 2015, 2016, etc).

            \n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n
            \n\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\ndescribe('Current year is displayed');\n\n
            "],"class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"

            Begins adding shapes to a new\np5.Geometry object.

            \n

            The beginGeometry() and endGeometry()\nfunctions help with creating complex 3D shapes from simpler ones such as\nsphere(). beginGeometry() begins adding shapes\nto a custom p5.Geometry object and\nendGeometry() stops adding them.

            \n

            beginGeometry() and endGeometry() can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\nbeginGeometry() and endGeometry().\nCreating a p5.Geometry object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.

            \n

            See buildGeometry() for another way to\nbuild 3D shapes.

            \n

            Note: beginGeometry() can only be used in WebGL mode.

            \n","itemtype":"method","name":"beginGeometry","example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":266,"description":"

            Stops adding shapes to a new\np5.Geometry object and returns the object.

            \n

            The beginGeometry() and endGeometry()\nfunctions help with creating complex 3D shapes from simpler ones such as\nsphere(). beginGeometry() begins adding shapes\nto a custom p5.Geometry object and\nendGeometry() stops adding them.

            \n

            beginGeometry() and endGeometry() can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\nbeginGeometry() and endGeometry().\nCreating a p5.Geometry object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.

            \n

            See buildGeometry() for another way to\nbuild 3D shapes.

            \n

            Note: endGeometry() can only be used in WebGL mode.

            \n","itemtype":"method","name":"endGeometry","return":{"description":"new 3D shape.","type":"p5.Geometry"},"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":520,"description":"

            Creates a custom p5.Geometry object from\nsimpler 3D shapes.

            \n

            buildGeometry() helps with creating complex 3D shapes from simpler ones\nsuch as sphere(). It can help to make sketches\nmore performant. For example, if a complex 3D shape doesn’t change while a\nsketch runs, then it can be created with buildGeometry(). Creating a\np5.Geometry object once and then drawing it\nwill run faster than repeatedly drawing the individual pieces.

            \n

            The parameter, callback, is a function with the drawing instructions for\nthe new p5.Geometry object. It will be called\nonce to create the new 3D shape.

            \n

            See beginGeometry() and\nendGeometry() for another way to build 3D\nshapes.

            \n

            Note: buildGeometry() can only be used in WebGL mode.

            \n","itemtype":"method","name":"buildGeometry","params":[{"name":"callback","description":"

            function that draws the shape.

            \n","type":"Function"}],"return":{"description":"new 3D shape.","type":"p5.Geometry"},"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrow.\n shape = buildGeometry(createArrow);\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrow.\n noStroke();\n\n // Draw the arrow.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n\n describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":748,"description":"

            Clears a p5.Geometry object from the graphics\nprocessing unit (GPU) memory.

            \n

            p5.Geometry objects can contain lots of data\nabout their vertices, surface normals, colors, and so on. Complex 3D shapes\ncan use lots of memory which is a limited resource in many GPUs. Calling\nfreeGeometry() can improve performance by freeing a\np5.Geometry object’s resources from GPU memory.\nfreeGeometry() works with p5.Geometry objects\ncreated with beginGeometry() and\nendGeometry(),\nbuildGeometry(), and\nloadModel().

            \n

            The parameter, geometry, is the p5.Geometry\nobject to be freed.

            \n

            Note: A p5.Geometry object can still be drawn\nafter its resources are cleared from GPU memory. It may take longer to draw\nthe first time it’s redrawn.

            \n

            Note: freeGeometry() can only be used in WebGL mode.

            \n","itemtype":"method","name":"freeGeometry","params":[{"name":"geometry","description":"

            3D shape whose resources should be freed.

            \n","type":"p5.Geometry"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n beginGeometry();\n cone();\n let shape = endGeometry();\n\n // Draw the shape.\n model(shape);\n\n // Free the shape's resources.\n freeGeometry(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":866,"description":"

            Draws a plane.

            \n

            A plane is a four-sided, flat shape with every angle measuring 90˚. It’s\nsimilar to a rectangle and offers advanced drawing features in WebGL mode.

            \n

            The first parameter, width, is optional. If a Number is passed, as in\nplane(20), it sets the plane’s width and height. By default, width is\n50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in plane(20, 30), it sets the plane’s height. By default, height is\nset to the plane’s width.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in plane(20, 30, 5) it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, detailX is 1.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in plane(20, 30, 5, 7) it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 1.

            \n

            Note: plane() can only be used in WebGL mode.

            \n","itemtype":"method","name":"plane","params":[{"name":"width","description":"

            width of the plane.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the plane.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of triangle subdivisions along the x-axis.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n plane();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width and height to 30.\n plane(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width to 30 and height to 50.\n plane(30, 50);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":1009,"description":"

            Draws a box (rectangular prism).

            \n

            A box is a 3D shape with six faces. Each face makes a 90˚ with four\nneighboring faces.

            \n

            The first parameter, width, is optional. If a Number is passed, as in\nbox(20), it sets the box’s width and height. By default, width is 50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in box(20, 30), it sets the box’s height. By default, height is set\nto the box’s width.

            \n

            The third parameter, depth, is also optional. If a Number is passed, as\nin box(20, 30, 40), it sets the box’s depth. By default, depth is set\nto the box’s height.

            \n

            The fourth parameter, detailX, is also optional. If a Number is passed,\nas in box(20, 30, 40, 5), it sets the number of triangle subdivisions to\nuse along the x-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailX is 1.

            \n

            The fifth parameter, detailY, is also optional. If a number is passed, as\nin box(20, 30, 40, 5, 7), it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 1.

            \n

            Note: box() can only be used in WebGL mode.

            \n","itemtype":"method","name":"box","params":[{"name":"width","description":"

            width of the box.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the box.

            \n","type":"Number","optional":true},{"name":"depth","description":"

            depth of the box.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of triangle subdivisions along the x-axis.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width and height to 30.\n box(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30 and height to 50.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30, height to 50, and depth to 10.\n box(30, 50, 10);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":1227,"description":"

            Draws a sphere.

            \n

            A sphere is a 3D shape with triangular faces that connect to form a round\nsurface. Spheres with few faces look like crystals. Spheres with many faces\nhave smooth surfaces and look like balls.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\nsphere(20), it sets the radius of the sphere. By default, radius is 50.

            \n

            The second parameter, detailX, is also optional. If a Number is passed,\nas in sphere(20, 5), it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, detailX is 24.

            \n

            The third parameter, detailY, is also optional. If a Number is passed,\nas in sphere(20, 5, 2), it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, detailY is 16.

            \n

            Note: sphere() can only be used in WebGL mode.

            \n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"

            radius of the sphere. Defaults to 50.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of triangle subdivisions along the x-axis. Defaults to 24.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n sphere();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 6.\n sphere(30, 6);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 24.\n // Set its detailY to 4.\n sphere(30, 24, 4);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":1477,"description":"

            Draws a cylinder.

            \n

            A cylinder is a 3D shape with triangular faces that connect a flat bottom\nto a flat top. Cylinders with few faces look like boxes. Cylinders with\nmany faces have smooth surfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ncylinder(20), it sets the radius of the cylinder’s base. By default,\nradius is 50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in cylinder(20, 30), it sets the cylinder’s height. By default,\nheight is set to the cylinder’s radius.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in cylinder(20, 30, 5), it sets the number of edges used to form the\ncylinder's top and bottom. Using more edges makes the top and bottom look\nmore like circles. By default, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in cylinder(20, 30, 5, 2), it sets the number of triangle subdivisions\nto use along the y-axis, between cylinder's the top and bottom. All 3D\nshapes are made by connecting triangles to form their surfaces. By default,\ndetailY is 1.

            \n

            The fifth parameter, bottomCap, is also optional. If a false is passed,\nas in cylinder(20, 30, 5, 2, false) the cylinder’s bottom won’t be drawn.\nBy default, bottomCap is true.

            \n

            The sixth parameter, topCap, is also optional. If a false is passed, as\nin cylinder(20, 30, 5, 2, false, false) the cylinder’s top won’t be\ndrawn. By default, topCap is true.

            \n

            Note: cylinder() can only be used in WebGL mode.

            \n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"

            radius of the cylinder. Defaults to 50.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the cylinder. Defaults to the value of radius.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of edges along the top and bottom. Defaults to 24.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis. Defaults to 1.

            \n","type":"Integer","optional":true},{"name":"bottomCap","description":"

            whether to draw the cylinder's bottom. Defaults to true.

            \n","type":"Boolean","optional":true},{"name":"topCap","description":"

            whether to draw the cylinder's top. Defaults to true.

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n cylinder();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius and height to 30.\n cylinder(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n cylinder(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cylinder(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cylinder(30, 50, 24, 2);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom.\n cylinder(30, 50, 24, 1, false);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top and bottom are missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom or top.\n cylinder(30, 50, 24, 1, false, false);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":1730,"description":"

            Draws a cone.

            \n

            A cone is a 3D shape with triangular faces that connect a flat bottom to a\nsingle point. Cones with few faces look like pyramids. Cones with many\nfaces have smooth surfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ncone(20), it sets the radius of the cone’s base. By default, radius is\n50.

            \n

            The second parameter, height, is also optional. If a Number is passed,\nas in cone(20, 30), it sets the cone’s height. By default, height is\nset to the cone’s radius.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in cone(20, 30, 5), it sets the number of edges used to form the\ncone's base. Using more edges makes the base look more like a circle. By\ndefault, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in cone(20, 30, 5, 7), it sets the number of triangle subdivisions to\nuse along the y-axis connecting the base to the tip. All 3D shapes are made\nby connecting triangles to form their surfaces. By default, detailY is 1.

            \n

            The fifth parameter, cap, is also optional. If a false is passed, as\nin cone(20, 30, 5, 7, false) the cone’s base won’t be drawn. By default,\ncap is true.

            \n

            Note: cone() can only be used in WebGL mode.

            \n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"

            radius of the cone's base. Defaults to 50.

            \n","type":"Number","optional":true},{"name":"height","description":"

            height of the cone. Defaults to the value of radius.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of edges used to draw the base. Defaults to 24.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis. Defaults to 1.

            \n","type":"Integer","optional":true},{"name":"cap","description":"

            whether to draw the cone's base. Defaults to true.

            \n","type":"Boolean","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius and height to 30.\n cone(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n cone(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white pyramid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cone(30, 50, 24, 2);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background. Its base is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its base.\n cone(30, 50, 24, 1, false);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":1965,"description":"

            Draws an ellipsoid.

            \n

            An ellipsoid is a 3D shape with triangular faces that connect to form a\nround surface. Ellipsoids with few faces look like crystals. Ellipsoids\nwith many faces have smooth surfaces and look like eggs. ellipsoid()\ndefines a shape by its radii. This is different from\nellipse() which uses diameters\n(width and height).

            \n

            The first parameter, radiusX, is optional. If a Number is passed, as in\nellipsoid(20), it sets the radius of the ellipsoid along the x-axis. By\ndefault, radiusX is 50.

            \n

            The second parameter, radiusY, is also optional. If a Number is passed,\nas in ellipsoid(20, 30), it sets the ellipsoid’s radius along the y-axis.\nBy default, radiusY is set to the ellipsoid’s radiusX.

            \n

            The third parameter, radiusZ, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40), it sets the ellipsoid’s radius along the\nz-axis. By default, radiusZ is set to the ellipsoid’s radiusY.

            \n

            The fourth parameter, detailX, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40, 5), it sets the number of triangle\nsubdivisions to use along the x-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, detailX is 24.

            \n

            The fifth parameter, detailY, is also optional. If a Number is passed,\nas in ellipsoid(20, 30, 40, 5, 7), it sets the number of triangle\nsubdivisions to use along the y-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, detailY is 16.

            \n

            Note: ellipsoid() can only be used in WebGL mode.

            \n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusX","description":"

            radius of the ellipsoid along the x-axis. Defaults to 50.

            \n","type":"Number","optional":true},{"name":"radiusY","description":"

            radius of the ellipsoid along the y-axis. Defaults to radiusX.

            \n","type":"Number","optional":true},{"name":"radiusZ","description":"

            radius of the ellipsoid along the z-axis. Defaults to radiusY.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of triangle subdivisions along the x-axis. Defaults to 24.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n ellipsoid(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n ellipsoid(30, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n ellipsoid(30, 40, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n ellipsoid(30, 40, 50, 4);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n // Set its detailY to 3.\n ellipsoid(30, 40, 50, 4, 3);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":2183,"description":"

            Draws a torus.

            \n

            A torus is a 3D shape with triangular faces that connect to form a ring.\nToruses with few faces look flattened. Toruses with many faces have smooth\nsurfaces.

            \n

            The first parameter, radius, is optional. If a Number is passed, as in\ntorus(30), it sets the radius of the ring. By default, radius is 50.

            \n

            The second parameter, tubeRadius, is also optional. If a Number is\npassed, as in torus(30, 15), it sets the radius of the tube. By default,\ntubeRadius is 10.

            \n

            The third parameter, detailX, is also optional. If a Number is passed,\nas in torus(30, 15, 5), it sets the number of edges used to draw the hole\nof the torus. Using more edges makes the hole look more like a circle. By\ndefault, detailX is 24.

            \n

            The fourth parameter, detailY, is also optional. If a Number is passed,\nas in torus(30, 15, 5, 7), it sets the number of triangle subdivisions to\nuse while filling in the torus’ height. By default, detailY is 16.

            \n

            Note: torus() can only be used in WebGL mode.

            \n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"

            radius of the torus. Defaults to 50.

            \n","type":"Number","optional":true},{"name":"tubeRadius","description":"

            radius of the tube. Defaults to 10.

            \n","type":"Number","optional":true},{"name":"detailX","description":"

            number of edges that form the hole. Defaults to 24.

            \n","type":"Integer","optional":true},{"name":"detailY","description":"

            number of triangle subdivisions along the y-axis. Defaults to 16.

            \n","type":"Integer","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n torus();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30.\n torus(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n torus(30, 15);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n torus(30, 15, 5);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n // Set its detailY to 3.\n torus(30, 15, 5, 3);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/GeometryBuilder.js","line":80,"description":"

            Adds geometry from the renderer's immediate mode into the builder's\ncombined geometry.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":114,"description":"

            Adds geometry from the renderer's retained mode into the builder's\ncombined geometry.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":122,"description":"

            Cleans up the state of the renderer and returns the combined geometry that\nwas built.

            \n","return":{"description":"p5.Geometry The flattened, combined geometry"},"class":"p5","module":"Shape"},{"file":"src/webgl/GeometryBuilder.js","line":133,"description":"

            Keeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/interaction.js","line":11,"description":"

            Allows the user to orbit around a 3D sketch using a mouse, trackpad, or\ntouchscreen.

            \n

            3D sketches are viewed through an imaginary camera. Calling\norbitControl() within the draw() function allows\nthe user to change the camera’s position:

            \n\nfunction draw() {\n background(200);\n\n

            // Enable orbiting with the mouse.\n orbitControl();

            \n

            // Rest of sketch.\n}\n

            \n

            Left-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch. Right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation. Using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer from the\ncenter of the sketch.

            \n

            The first three parameters, sensitivityX, sensitivityY, and\nsensitivityZ, are optional. They’re numbers that set the sketch’s\nsensitivity to movement along each axis. For example, calling\norbitControl(1, 2, -1) keeps movement along the x-axis at its default\nvalue, makes the sketch twice as sensitive to movement along the y-axis,\nand reverses motion along the z-axis. By default, all sensitivity values\nare 1.

            \n

            The fourth parameter, options, is also optional. It’s an object that\nchanges the behavior of orbiting. For example, calling\norbitControl(1, 1, 1, options) keeps the default sensitivity values while\nchanging the behaviors set with options. The object can have the\nfollowing properties:

            \n\nlet options = {\n // Setting this to false makes mobile interactions smoother by\n // preventing accidental interactions with the page while orbiting.\n // By default, it's true.\n disableTouchActions: true,\n\n

            // Setting this to true makes the camera always rotate in the\n // direction the mouse/touch is moving.\n // By default, it's false.\n freeRotation: false\n};

            \n

            orbitControl(1, 1, 1, options);\n

            \n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"

            sensitivity to movement along the x-axis. Defaults to 1.

            \n","type":"Number","optional":true},{"name":"sensitivityY","description":"

            sensitivity to movement along the y-axis. Defaults to 1.

            \n","type":"Number","optional":true},{"name":"sensitivityZ","description":"

            sensitivity to movement along the z-axis. Defaults to 1.

            \n","type":"Number","optional":true},{"name":"options","description":"

            object with two optional properties, disableTouchActions\n and freeRotation. Both are Booleans. disableTouchActions\n defaults to true and freeRotation defaults to false.

            \n","type":"Object","optional":true}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n // Make the interactions 3X sensitive.\n orbitControl(3, 3, 3);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Create an options object.\n let options = {\n disableTouchActions: false,\n freeRotation: true\n };\n\n // Enable orbiting with the mouse.\n // Prevent accidental touch actions on touchscreen devices\n // and enable free rotation.\n orbitControl(1, 1, 1, options);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":471,"description":"

            Adds a grid and an axes icon to clarify orientation in 3D sketches.

            \n

            debugMode() adds a grid that shows where the “ground” is in a sketch. By\ndefault, the grid will run through the origin (0, 0, 0) of the sketch\nalong the XZ plane. debugMode() also adds an axes icon that points along\nthe positive x-, y-, and z-axes. Calling debugMode() displays the grid\nand axes icon with their default size and position.

            \n

            There are four ways to call debugMode() with optional parameters to\ncustomize the debugging environment.

            \n

            The first way to call debugMode() has one parameter, mode. If the\nsystem constant GRID is passed, as in debugMode(GRID), then the grid\nwill be displayed and the axes icon will be hidden. If the constant AXES\nis passed, as in debugMode(AXES), then the axes icon will be displayed\nand the grid will be hidden.

            \n

            The second way to call debugMode() has six parameters. The first\nparameter, mode, selects either GRID or AXES to be displayed. The\nnext five parameters, gridSize, gridDivisions, xOff, yOff, and\nzOff are optional. They’re numbers that set the appearance of the grid\n(gridSize and gridDivisions) and the placement of the axes icon\n(xOff, yOff, and zOff). For example, calling\ndebugMode(20, 5, 10, 10, 10) sets the gridSize to 20 pixels, the number\nof gridDivisions to 5, and offsets the axes icon by 10 pixels along the\nx-, y-, and z-axes.

            \n

            The third way to call debugMode() has five parameters. The first\nparameter, mode, selects either GRID or AXES to be displayed. The\nnext four parameters, axesSize, xOff, yOff, and zOff are optional.\nThey’re numbers that set the appearance of the size of the axes icon\n(axesSize) and its placement (xOff, yOff, and zOff).

            \n

            The fourth way to call debugMode() has nine optional parameters. The\nfirst five parameters, gridSize, gridDivisions, gridXOff, gridYOff,\nand gridZOff are numbers that set the appearance of the grid. For\nexample, calling debugMode(100, 5, 0, 0, 0) sets the gridSize to 100,\nthe number of gridDivisions to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. The next four parameters, axesSize,\nxOff, yOff, and zOff are numbers that set the appearance of the size\nof the axes icon (axesSize) and its placement (axesXOff, axesYOff,\nand axesZOff). For example, calling\ndebugMode(100, 5, 0, 0, 0, 50, 10, 10, 10) sets the gridSize to 100,\nthe number of gridDivisions to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. It then sets the axesSize to 50 and\noffsets the icon 10 pixels along each axis.

            \n","itemtype":"method","name":"debugMode","example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the axes icon.\n debugMode(AXES);\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the grid and customize it:\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n debugMode(GRID, 50, 10, 0, 20, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Display the grid and axes icon and customize them:\n // Grid\n // ----\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n // Axes\n // ----\n // - size: 50\n // - offsets: 0, 0, 0\n debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Interaction","overloads":[{"line":471,"params":[]},{"line":650,"params":[{"name":"mode","description":"

            either GRID or AXES

            \n","type":"Constant"}]},{"line":655,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"

            side length of the grid.

            \n","type":"Number","optional":true},{"name":"gridDivisions","description":"

            number of divisions in the grid.

            \n","type":"Number","optional":true},{"name":"xOff","description":"

            offset from origin along the x-axis.

            \n","type":"Number","optional":true},{"name":"yOff","description":"

            offset from origin along the y-axis.

            \n","type":"Number","optional":true},{"name":"zOff","description":"

            offset from origin along the z-axis.

            \n","type":"Number","optional":true}]},{"line":665,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"

            length of axes icon markers.

            \n","type":"Number","optional":true},{"name":"xOff","description":"","type":"Number","optional":true},{"name":"yOff","description":"","type":"Number","optional":true},{"name":"zOff","description":"","type":"Number","optional":true}]},{"line":674,"params":[{"name":"gridSize","description":"","type":"Number","optional":true},{"name":"gridDivisions","description":"","type":"Number","optional":true},{"name":"gridXOff","description":"

            grid offset from the origin along the x-axis.

            \n","type":"Number","optional":true},{"name":"gridYOff","description":"

            grid offset from the origin along the y-axis.

            \n","type":"Number","optional":true},{"name":"gridZOff","description":"

            grid offset from the origin along the z-axis.

            \n","type":"Number","optional":true},{"name":"axesSize","description":"","type":"Number","optional":true},{"name":"axesXOff","description":"

            axes icon offset from the origin along the x-axis.

            \n","type":"Number","optional":true},{"name":"axesYOff","description":"

            axes icon offset from the origin along the y-axis.

            \n","type":"Number","optional":true},{"name":"axesZOff","description":"

            axes icon offset from the origin along the z-axis.

            \n","type":"Number","optional":true}]}]},{"file":"src/webgl/interaction.js","line":725,"description":"

            Turns off debugMode() in a 3D sketch.

            \n","itemtype":"method","name":"noDebugMode","example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box. box(20, 40);\n}\n\n// Disable debug mode when the user double-clicks.\nfunction doubleClicked() {\n noDebugMode();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Interaction"},{"file":"src/webgl/light.js","line":10,"description":"

            Creates a light that shines from all directions.

            \n

            Ambient light does not come from one direction. Instead, 3D shapes are\nlit evenly from all sides. Ambient lights are almost always used in\ncombination with other types of lights.

            \n

            There are three ways to call ambientLight() with optional parameters to\nset the light’s color.

            \n

            The first way to call ambientLight() has two parameters, gray and\nalpha. alpha is optional. Grayscale and alpha values between 0 and 255\ncan be passed to set the ambient light’s color, as in ambientLight(50) or\nambientLight(50, 30).

            \n

            The second way to call ambientLight() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in ambientLight('magenta'), can be passed to set the\nambient light’s color.

            \n

            The third way to call ambientLight() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the ambient light’s colors, as in ambientLight(255, 0, 0)\nor ambientLight(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to turn on the light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Use a grayscale value of 80.\n ambientLight(80);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the ambient light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a p5.Color object.\n let c = color('orchid');\n ambientLight(c);\n\n // Draw the sphere.\n sphere();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a CSS color string.\n ambientLight('#DA70D6');\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use RGB values\n ambientLight(218, 112, 214);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":10,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the current\n colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the current\n colorMode().

            \n","type":"Number"},{"name":"alpha","description":"

            alpha (transparency) value in the current\n colorMode().

            \n","type":"Number","optional":true}],"chainable":1},{"line":164,"params":[{"name":"gray","description":"

            grayscale value between 0 and 255.

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":171,"params":[{"name":"value","description":"

            color as a CSS string.

            \n","type":"String"}],"chainable":1},{"line":177,"params":[{"name":"values","description":"

            color as an array of RGBA, HSBA, or HSLA\n values.

            \n","type":"Number[]"}],"chainable":1},{"line":184,"params":[{"name":"color","description":"

            color as a p5.Color object.

            \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":205,"description":"

            Sets the specular color for lights.

            \n

            specularColor() affects lights that bounce off a surface in a preferred\ndirection. These lights include\ndirectionalLight(),\npointLight(), and\nspotLight(). The function helps to create\nhighlights on p5.Geometry objects that are\nstyled with specularMaterial(). If a\ngeometry does not use\nspecularMaterial(), then\nspecularColor() will have no effect.

            \n

            Note: specularColor() doesn’t affect lights that bounce in all\ndirections, including ambientLight() and\nimageLight().

            \n

            There are three ways to call specularColor() with optional parameters to\nset the specular highlight color.

            \n

            The first way to call specularColor() has two optional parameters, gray\nand alpha. Grayscale and alpha values between 0 and 255, as in\nspecularColor(50) or specularColor(50, 80), can be passed to set the\nspecular highlight color.

            \n

            The second way to call specularColor() has one optional parameter,\ncolor. A p5.Color object, an array of color\nvalues, or a CSS color string can be passed to set the specular highlight\ncolor.

            \n

            The third way to call specularColor() has four optional parameters, v1,\nv2, v3, and alpha. RGBA, HSBA, or HSLA values, as in\nspecularColor(255, 0, 0, 80), can be passed to set the specular highlight\ncolor. Color values will be interpreted using the current\ncolorMode().

            \n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // No specular color.\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to add a point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the sphere.\n noStroke();\n specularColor(100);\n specularMaterial(255, 255, 255);\n\n // Control the light.\n if (isLit === true) {\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a p5.Color object.\n let c = color('dodgerblue');\n specularColor(c);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a CSS color string.\n specularColor('#1E90FF');\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use RGB values.\n specularColor(30, 144, 255);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":205,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the current\n colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the current\n colorMode().

            \n","type":"Number"}],"chainable":1},{"line":423,"params":[{"name":"gray","description":"

            grayscale value between 0 and 255.

            \n","type":"Number"}],"chainable":1},{"line":429,"params":[{"name":"value","description":"

            color as a CSS string.

            \n","type":"String"}],"chainable":1},{"line":435,"params":[{"name":"values","description":"

            color as an array of RGBA, HSBA, or HSLA\n values.

            \n","type":"Number[]"}],"chainable":1},{"line":442,"params":[{"name":"color","description":"

            color as a p5.Color object.

            \n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":461,"description":"

            Creates a light that shines in one direction.

            \n

            Directional lights don’t shine from a specific point. They’re like a sun\nthat shines from somewhere offscreen. The light’s direction is set using\nthree (x, y, z) values between -1 and 1. For example, setting a light’s\ndirection as (1, 0, 0) will light p5.Geometry\nobjects from the left since the light faces directly to the right.

            \n

            There are four ways to call directionalLight() with parameters to set the\nlight’s color and direction.

            \n

            The first way to call directionalLight() has six parameters. The first\nthree parameters, v1, v2, and v3, set the light’s color using the\ncurrent colorMode(). The last three\nparameters, x, y, and z, set the light’s direction. For example,\ndirectionalLight(255, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light\nthat shines to the right (1, 0, 0).

            \n

            The second way to call directionalLight() has four parameters. The first\nthree parameters, v1, v2, and v3, set the light’s color using the\ncurrent colorMode(). The last parameter,\ndirection sets the light’s direction using a\np5.Geometry object. For example,\ndirectionalLight(255, 0, 0, lightDir) creates a red (255, 0, 0) light\nthat shines in the direction the lightDir vector points.

            \n

            The third way to call directionalLight() has four parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nlast three parameters, x, y, and z, set the light’s direction. For\nexample, directionalLight(myColor, 1, 0, 0) creates a light that shines\nto the right (1, 0, 0) with the color value of myColor.

            \n

            The fourth way to call directionalLight() has two parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nsecond parameter, direction, sets the light’s direction using a\np5.Color object. For example,\ndirectionalLight(myColor, lightDir) creates a light that shines in the\ndirection the lightDir vector points with the color value of myColor.

            \n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the directional light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red directional light from above.\n // Use RGB values and XYZ directions.\n directionalLight(255, 0, 0, 0, 1, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n directionalLight(c, 0, 1, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightDir = createVector(0, 1, 0);\n directionalLight(c, lightDir);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":461,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the current\n colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the current\n colorMode().

            \n","type":"Number"},{"name":"x","description":"

            x-component of the light's direction between -1 and 1.

            \n","type":"Number"},{"name":"y","description":"

            y-component of the light's direction between -1 and 1.

            \n","type":"Number"},{"name":"z","description":"

            z-component of the light's direction between -1 and 1.

            \n","type":"Number"}],"chainable":1},{"line":613,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"direction","description":"

            direction of the light as a\n p5.Vector object.

            \n","type":"p5.Vector"}],"chainable":1},{"line":623,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or as a CSS string.

            \n","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":633,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"direction","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":682,"description":"

            Creates a light that shines from a point in all directions.

            \n

            Point lights are like light bulbs that shine in all directions. They can be\nplaced at different positions to achieve different lighting effects. A\nmaximum of 5 point lights can be active at once.

            \n

            There are four ways to call pointLight() with parameters to set the\nlight’s color and position.

            \n

            The first way to call pointLight() has six parameters. The first three\nparameters, v1, v2, and v3, set the light’s color using the current\ncolorMode(). The last three parameters, x,\ny, and z, set the light’s position. For example,\npointLight(255, 0, 0, 50, 0, 0) creates a red (255, 0, 0) light that\nshines from the coordinates (50, 0, 0).

            \n

            The second way to call pointLight() has four parameters. The first three\nparameters, v1, v2, and v3, set the light’s color using the current\ncolorMode(). The last parameter, position sets\nthe light’s position using a p5.Vector object.\nFor example, pointLight(255, 0, 0, lightPos) creates a red (255, 0, 0)\nlight that shines from the position set by the lightPos vector.

            \n

            The third way to call pointLight() has four parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nlast three parameters, x, y, and z, set the light’s position. For\nexample, directionalLight(myColor, 50, 0, 0) creates a light that shines\nfrom the coordinates (50, 0, 0) with the color value of myColor.

            \n

            The fourth way to call pointLight() has two parameters. The first\nparameter, color, sets the light’s color using a\np5.Color object or an array of color values. The\nsecond parameter, position, sets the light’s position using a\np5.Vector object. For example,\ndirectionalLight(myColor, lightPos) creates a light that shines from the\nposition set by the lightPos vector with the color value of myColor.

            \n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red point light from above.\n // Use RGB values and XYZ coordinates.\n pointLight(255, 0, 0, 0, -150, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n pointLight(c, 0, -150, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, -150, 0);\n pointLight(c, lightPos);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light that points to the center of the scene.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, 0, 65);\n pointLight(c, lightPos);\n\n // Style the spheres.\n noStroke();\n\n // Draw a sphere up and to the left.\n push();\n translate(-25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a box up and to the right.\n push();\n translate(25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a sphere down and to the left.\n push();\n translate(-25, 25, 25);\n sphere(10);\n pop();\n\n // Draw a box down and to the right.\n push();\n translate(25, 25, 25);\n sphere(10);\n pop();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":682,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the current\n colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the current\n colorMode().

            \n","type":"Number"},{"name":"x","description":"

            x-coordinate of the light.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the light.

            \n","type":"Number"},{"name":"z","description":"

            z-coordinate of the light.

            \n","type":"Number"}],"chainable":1},{"line":889,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"

            position of the light as a\n p5.Vector object.

            \n","type":"p5.Vector"}],"chainable":1},{"line":899,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":909,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":955,"description":"

            Creates an ambient light from an image.

            \n

            imageLight() simulates a light shining from all directions. The effect is\nlike placing the sketch at the center of a giant sphere that uses the image\nas its texture. The image's diffuse light will be affected by\nfill() and the specular reflections will be\naffected by specularMaterial() and\nshininess().

            \n

            The parameter, img, is the p5.Image object to\nuse as the light source.

            \n","itemtype":"method","name":"imageLight","params":[{"name":"img","description":"

            image to use as the light source.

            \n","type":"p5.image"}],"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');\n}\n\nfunction draw() {\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the image as a panorama (360˚ background).\n panorama(img);\n\n // Add a soft ambient light.\n ambientLight(50);\n\n // Add light from the image.\n imageLight(img);\n\n // Style the sphere.\n specularMaterial(20);\n shininess(100);\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":1020,"description":"

            Creates an immersive 3D background.

            \n

            panorama() transforms images containing 360˚ content, such as maps or\nHDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the\nspace requires changing the camera's perspective with functions such as\norbitControl() or\ncamera().

            \n","itemtype":"method","name":"panorama","params":[{"name":"img","description":"

            360˚ image to use as the background.

            \n","type":"p5.Image"}],"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the sphere.\n noStroke();\n specularMaterial(50);\n shininess(200);\n metalness(100);\n\n // Draw the sphere.\n sphere(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":1076,"description":"

            Places an ambient and directional light in the scene.\nThe lights are set to ambientLight(128, 128, 128) and\ndirectionalLight(128, 128, 128, 0, 0, -1).

            \n

            Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.

            \n","itemtype":"method","name":"lights","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the lights.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the lights.\n if (isLit === true) {\n lights();\n }\n\n // Draw the box.\n box();\n}\n\n// Turn on the lights when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n ambientLight(128, 128, 128);\n directionalLight(128, 128, 128, 0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":1160,"description":"

            Sets the falloff rate for pointLight()\nand spotLight().

            \n

            A light’s falloff describes the intensity of its beam at a distance. For\nexample, a lantern has a slow falloff, a flashlight has a medium falloff,\nand a laser pointer has a sharp falloff.

            \n

            lightFalloff() has three parameters, constant, linear, and\nquadratic. They’re numbers used to calculate falloff at a distance, d,\nas follows:

            \n

            falloff = 1 / (constant + d * linear + (d * d) * quadratic)

            \n

            Note: constant, linear, and quadratic should always be set to values\ngreater than 0.

            \n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"

            constant value for calculating falloff.

            \n","type":"Number"},{"name":"linear","description":"

            linear value for calculating falloff.

            \n","type":"Number"},{"name":"quadratic","description":"

            quadratic value for calculating falloff.

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to change the falloff rate.\n\nlet useFalloff = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Set the light falloff.\n if (useFalloff === true) {\n lightFalloff(2, 0, 0);\n }\n\n // Add a white point light from the front.\n pointLight(255, 255, 255, 0, 0, 100);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Change the falloff value when the user double-clicks.\nfunction doubleClicked() {\n useFalloff = true;\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/light.js","line":1271,"description":"

            Creates a light that shines from a point in one direction.

            \n

            Spot lights are like flashlights that shine in one direction creating a\ncone of light. The shape of the cone can be controlled using the angle and\nconcentration parameters. A maximum of 5 spot lights can be active at once.

            \n

            There are eight ways to call spotLight() with parameters to set the\nlight’s color, position, direction. For example,\nspotLight(255, 0, 0, 0, 0, 0, 1, 0, 0) creates a red (255, 0, 0) light\nat the origin (0, 0, 0) that points to the right (1, 0, 0).

            \n

            The angle parameter is optional. It sets the radius of the light cone.\nFor example, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16) creates a\nred (255, 0, 0) light at the origin (0, 0, 0) that points to the right\n(1, 0, 0) with an angle of PI / 16 radians. By default, angle is\nPI / 3 radians.

            \n

            The concentration parameter is also optional. It focuses the light\ntowards the center of the light cone. For example,\nspotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50) creates a red\n(255, 0, 0) light at the origin (0, 0, 0) that points to the right\n(1, 0, 0) with an angle of PI / 16 radians at concentration of 50. By\ndefault, concentration is 100.

            \n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 32 radians.\n spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 3 radians (default).\n // Set its concentration to 1000.\n let c = color(255, 0, 0);\n let position = createVector(0, 0, 100);\n let direction = createVector(0, 0, -1);\n spotLight(c, position, direction, PI / 3, 1000);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights","overloads":[{"line":1271,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the current\n colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the current\n colorMode().

            \n","type":"Number"},{"name":"x","description":"

            x-coordinate of the light.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the light.

            \n","type":"Number"},{"name":"z","description":"

            z-coordinate of the light.

            \n","type":"Number"},{"name":"rx","description":"

            x-component of light direction between -1 and 1.

            \n","type":"Number"},{"name":"ry","description":"

            y-component of light direction between -1 and 1.

            \n","type":"Number"},{"name":"rz","description":"

            z-component of light direction between -1 and 1.

            \n","type":"Number"},{"name":"angle","description":"

            angle of the light cone. Defaults to PI / 3.

            \n","type":"Number","optional":true},{"name":"concentration","description":"

            concentration of the light. Defaults to 100.

            \n","type":"Number","optional":true}],"chainable":1},{"line":1398,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n","type":"p5.Color|Number[]|String"},{"name":"position","description":"

            position of the light as a p5.Vector object.

            \n","type":"p5.Vector"},{"name":"direction","description":"

            direction of light as a p5.Vector object.

            \n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1407,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"","type":"p5.Vector"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1417,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1427,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"position","description":"","type":"p5.Vector"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1437,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"direction","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1449,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"","type":"p5.Vector"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]},{"line":1461,"params":[{"name":"color","description":"","type":"p5.Color|Number[]|String"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"},{"name":"rx","description":"","type":"Number"},{"name":"ry","description":"","type":"Number"},{"name":"rz","description":"","type":"Number"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"concentration","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":1686,"description":"

            Removes all lights from the sketch.

            \n

            Calling noLights() removes any lights created with\nlights(),\nambientLight(),\ndirectionalLight(),\npointLight(), or\nspotLight(). These functions may be called\nafter noLights() to create a new lighting scheme.

            \n","itemtype":"method","name":"noLights","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the top sphere.\n push();\n translate(0, -25, 0);\n sphere(20);\n pop();\n\n // Turn off the lights.\n noLights();\n\n // Add a red directional light that points into the screen.\n directionalLight(255, 0, 0, 0, 0, -1);\n\n // Draw the bottom sphere.\n push();\n translate(0, 25, 0);\n sphere(20);\n pop();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"

            Loads a 3D model to create a\np5.Geometry object.

            \n

            loadModel() can load 3D models from OBJ and STL files. Once the model is\nloaded, it can be displayed with the\nmodel() function, as in model(shape).

            \n

            There are three ways to call loadModel() with optional parameters to help\nprocess the model.

            \n

            The first parameter, path, is always a String with the path to the\nfile. Paths to local files should be relative, as in\nloadModel('assets/model.obj'). URLs such as 'https://example.com/model.obj'` may be blocked due to browser security.

            \n

            The first way to call loadModel() has three optional parameters after the\nfile path. The first optional parameter, successCallback, is a function\nto call once the model loads. For example,\nloadModel('assets/model.obj', handleModel) will call the handleModel()\nfunction once the model loads. The second optional parameter,\nfailureCallback, is a function to call if the model fails to load. For\nexample, loadModel('assets/model.obj', handleModel, handleFailure) will\ncall the handleFailure() function if an error occurs while loading. The\nthird optional parameter, fileType, is the model’s file extension as a\nstring. For example,\nloadModel('assets/model', handleModel, handleFailure, '.obj') will try to\nload the file model as a .obj file.

            \n

            The second way to call loadModel() has four optional parameters after the\nfile path. The first optional parameter is a Boolean value. If true is\npassed, as in loadModel('assets/model.obj', true), then the model will be\nresized to ensure it fits the canvas. The next three parameters are\nsuccessCallback, failureCallback, and fileType as described above.

            \n

            The third way to call loadModel() has one optional parameter after the\nfile path. The optional parameter, options, is an Object with options,\nas in loadModel('assets/model.obj', options). The options object can\nhave the following properties:

            \n\nlet options = {\n // Enables standardized size scaling during loading if set to true.\n normalize: true,\n\n

            // Function to call once the model loads.\n successCallback: handleModel,

            \n

            // Function to call if an error occurs while loading.\n failureCallback: handleError,

            \n

            // Model's file extension.\n fileType: '.stl',

            \n

            // Flips the U texture coordinates of the model.\n flipU: false,

            \n

            // Flips the V texture coordinates of the model.\n flipV: false\n};

            \n

            // Pass the options object to loadModel().\nloadModel('assets/model.obj', options);\n

            \n

            Models can take time to load. Calling loadModel() in\npreload() ensures models load before they're\nused in setup() or draw().

            \n

            Note: There’s no support for colored STL files. STL files with color will\nbe rendered without color.

            \n","itemtype":"method","name":"loadModel","return":{"description":"the p5.Geometry object","type":"p5.Geometry"},"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/teapot.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\n// Normalize the geometry's size to fit the canvas.\nfunction preload() {\n shape = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and log the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/wrong.obj', true, handleModel, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel, handleError, '.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\nlet options = {\n normalize: true,\n successCallback: handleModel,\n failureCallback: handleError,\n fileType: '.obj'\n};\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', options);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Models","overloads":[{"line":12,"params":[{"name":"path","description":"

            path of the model to be loaded.

            \n","type":"String"},{"name":"normalize","description":"

            if true, scale the model to fit the canvas.

            \n","type":"Boolean"},{"name":"successCallback","description":"

            function to call once the model is loaded. Will be passed\n the p5.Geometry object.

            \n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"

            function to call if the model fails to load. Will be passed an Error event object.

            \n","type":"Function(Event)","optional":true},{"name":"fileType","description":"

            model’s file extension. Either '.obj' or '.stl'.

            \n","type":"String","optional":true}],"return":{"description":"the p5.Geometry object","type":"p5.Geometry"}},{"line":318,"params":[{"name":"path","description":"","type":"String"},{"name":"successCallback","description":"","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"","type":"Function(Event)","optional":true},{"name":"fileType","description":"","type":"String","optional":true}],"return":{"description":"new p5.Geometry object.","type":"p5.Geometry"}},{"line":326,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"

            loading options.

            \n","type":"Object","optional":true,"props":[{"name":"successCallback","description":"","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"","type":"Function(Event)","optional":true},{"name":"fileType","description":"","type":"String","optional":true},{"name":"normalize","description":"","type":"Boolean","optional":true},{"name":"flipU","description":"","type":"Boolean","optional":true},{"name":"flipV","description":"","type":"Boolean","optional":true}]}],"return":{"description":"new p5.Geometry object.","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":544,"description":"

            Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:

            \n

            v -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5

            \n

            f 4 3 2 1

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":688,"description":"

            STL files can be of two types, ASCII and Binary,

            \n

            We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":715,"description":"

            This function checks if the file is in ASCII format or in Binary format

            \n

            It is done by searching keyword solid at the start of the file.

            \n

            An ASCII STL data must begin with solid as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the d are known to be\nplentiful. So, check the first 5 bytes for solid.

            \n

            Several encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for solid to start anywhere after those prefixes.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":742,"description":"

            This function matches the query at the provided offset

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":754,"description":"

            This function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL

            \n

            Currently there is no support for the colors provided in STL files.

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":842,"description":"

            ASCII STL file starts with solid 'nameOfFile'\nThen contain the normal of the face, starting with facet normal\nNext contain a keyword indicating the start of face vertex, outer loop\nNext comes the three vertex, starting with vertex x y z\nVertices ends with endloop\nFace ends with endfacet\nNext face starts with facet normal\nThe end of the file is indicated by endsolid

            \n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":986,"description":"

            Draws a p5.Geometry object to the canvas.

            \n

            The parameter, model, is the\np5.Geometry object to draw.\np5.Geometry objects can be built with\nbuildGeometry(), or\nbeginGeometry() and\nendGeometry(). They can also be loaded from\na file with loadGeometry().

            \n

            Note: model() can only be used in WebGL mode.

            \n","itemtype":"method","name":"model","params":[{"name":"model","description":"

            3D shape to be drawn.

            \n","type":"p5.Geometry"}],"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white octahedron drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n
            "],"class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"

            Loads vertex and fragment shaders to create a\np5.Shader object.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.

            \n

            Once the p5.Shader object is created, it can be\nused with the shader() function, as in\nshader(myShader). A shader program consists of two files, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.

            \n

            loadShader() loads the vertex and fragment shaders from their .vert and\n.frag files. For example, calling\nloadShader('assets/shader.vert', 'assets/shader.frag') loads both\nrequired shaders and returns a p5.Shader object.

            \n

            The third parameter, successCallback, is optional. If a function is\npassed, it will be called once the shader has loaded. The callback function\ncan use the new p5.Shader object as its\nparameter.

            \n

            The fourth parameter, failureCallback, is also optional. If a function is\npassed, it will be called if the shader fails to load. The callback\nfunction can use the event error as its parameter.

            \n

            Shaders can take time to load. Calling loadShader() in\npreload() ensures shaders load before they're\nused in setup() or draw().

            \n

            Note: Shaders can only be used in WebGL mode.

            \n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"

            path of the vertex shader to be loaded.

            \n","type":"String"},{"name":"fragFilename","description":"

            path of the fragment shader to be loaded.

            \n","type":"String"},{"name":"successCallback","description":"

            function to call once the shader is loaded. Can be passed the\n p5.Shader object.

            \n","type":"Function","optional":true},{"name":"failureCallback","description":"

            function to call if the shader fails to load. Can be passed an\n Error event object.

            \n","type":"Function","optional":true}],"return":{"description":"new shader created from the vertex and fragment shader files.","type":"p5.Shader"},"example":["\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to the value 1.5.\n mandelbrot.setUniform('r', 1.5);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n\n describe('A black fractal image on a magenta background.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":173,"description":"

            Creates a new p5.Shader object.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.

            \n

            Once the p5.Shader object is created, it can be\nused with the shader() function, as in\nshader(myShader). A shader program consists of two parts, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.

            \n

            The first parameter, vertSrc, sets the vertex shader. It’s a string that\ncontains the vertex shader program written in GLSL.

            \n

            The second parameter, fragSrc, sets the fragment shader. It’s a string\nthat contains the fragment shader program written in GLSL.

            \n

            Note: Only filter shaders can be used in 2D mode. All shaders can be used\nin WebGL mode.

            \n","itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"

            source code for the vertex shader.

            \n","type":"String"},{"name":"fragSrc","description":"

            source code for the fragment shader.

            \n","type":"String"}],"return":{"description":"new shader object created from the\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to 0.005.\n // r is the size of the image in Mandelbrot-space.\n mandelbrot.setUniform('r', 0.005);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A black fractal image on a magenta background.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":429,"description":"

            Creates a p5.Shader object to be used with the\nfilter() function.

            \n

            createFilterShader() works like\ncreateShader() but has a default vertex\nshader included. createFilterShader() is intended to be used along with\nfilter() for filtering the contents of a canvas.\nA filter shader will be applied to the whole canvas instead of just\np5.Geometry objects.

            \n

            The parameter, fragSrc, sets the fragment shader. It’s a string that\ncontains the fragment shader program written in\nGLSL.

            \n

            The p5.Shader object that's created has some\nuniforms that can be set:

            \n
              \n
            • sampler2D tex0, which contains the canvas contents as a texture.
              • \n
            • vec2 canvasSize, which is the width and height of the canvas, not including pixel density.
              • \n
            • vec2 texelSize, which is the size of a physical pixel including pixel density. This is calculated as 1.0 / (width * density) for the pixel width and 1.0 / (height * density) for the pixel height.
              • \n
            \n

            The p5.Shader that's created also provides\nvarying vec2 vTexCoord, a coordinate with values between 0 and 1.\nvTexCoord describes where on the canvas the pixel will be drawn.

            \n

            For more info about filters and shaders, see Adam Ferriss' repo of shader examples\nor the Introduction to Shaders tutorial.

            \n","itemtype":"method","name":"createFilterShader","params":[{"name":"fragSrc","description":"

            source code for the fragment shader.

            \n","type":"String"}],"return":{"description":"new shader object created from the fragment shader.","type":"p5.Shader"},"example":["\n
            \n\nfunction setup() {\n let fragSrc = `precision highp float;\n void main() {\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n let s = createFilterShader(fragSrc);\n filter(s);\n describe('a yellow canvas');\n}\n\n
            \n\n
            \n\nlet img, s;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n let fragSrc = `precision highp float;\n\n // x,y coordinates, given from the vertex shader\n varying vec2 vTexCoord;\n\n // the canvas contents, given from filter()\n uniform sampler2D tex0;\n // other useful information from the canvas\n uniform vec2 texelSize;\n uniform vec2 canvasSize;\n // a custom variable from this sketch\n uniform float darkness;\n\n void main() {\n // get the color at current pixel\n vec4 color = texture2D(tex0, vTexCoord);\n // set the output color\n color.b = 1.0;\n color *= darkness;\n gl_FragColor = vec4(color.rgb, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n s = createFilterShader(fragSrc);\n}\nfunction draw() {\n image(img, -50, -50);\n s.setUniform('darkness', 0.5);\n filter(s);\n describe('a image of bricks tinted dark blue');\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"

            Sets the p5.Shader object to apply while drawing.

            \n

            Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels or vertices at the same time, making them fast for\nmany graphics tasks. They’re written in a language called\nGLSL\nand run along with the rest of the code in a sketch.\np5.Shader objects can be created using the\ncreateShader() and\nloadShader() functions.

            \n

            The parameter, s, is the p5.Shader object to\napply. For example, calling shader(myShader) applies myShader to\nprocess each pixel on the canvas. The shader will be used for:

            \n
              \n
            • Fills when a texture is enabled if it includes a uniform sampler2D.
              • \n
            • Fills when lights are enabled if it includes the attribute aNormal, or if it has any of the following uniforms: uUseLighting, uAmbientLightCount, uDirectionalLightCount, uPointLightCount, uAmbientColor, uDirectionalDiffuseColors, uDirectionalSpecularColors, uPointLightLocation, uPointLightDiffuseColors, uPointLightSpecularColors, uLightingDirection, or uSpecular.
              • \n
            • Fills whenever there are no lights or textures.
              • \n
            • Strokes if it includes the uniform uStrokeWeight.
              • \n
            \n

            The source code from a p5.Shader object's\nfragment and vertex shaders will be compiled the first time it's passed to\nshader(). See\nMDN\nfor more information about compiling shaders.

            \n

            Calling resetShader() restores a sketch’s\ndefault shaders.

            \n

            Note: Shaders can only be used in WebGL mode.

            \n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"

            p5.Shader object\n to apply.

            \n","type":"p5.Shader"}],"example":["\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\n// Load the shader and create two separate p5.Shader objects.\nfunction preload() {\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Initialize the redGreen shader.\n shader(redGreen);\n\n // Set the redGreen shader's center and background color.\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // Initialize the orangeBlue shader.\n shader(orangeBlue);\n\n // Set the orangeBlue shader's center and background color.\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n describe(\n 'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'\n );\n}\n\nfunction draw() {\n // Update the offset values for each shader.\n // Move orangeBlue vertically.\n // Move redGreen horizontally.\n orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);\n redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n\n // Style the drawing surface.\n noStroke();\n\n // Add a quad as a drawing surface.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n// Toggle between shaders when the user double-clicks.\nfunction doubleClicked() {\n showRedGreen = !showRedGreen;\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":773,"description":"

            Restores the default shaders.

            \n

            resetShader() deactivates any shaders previously applied by\nshader().

            \n

            Note: Shaders can only be used in WebGL mode.

            \n","itemtype":"method","name":"resetShader","chainable":1,"example":["\n
            \n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":861,"description":"

            Sets the texture that will be used on shapes.

            \n

            A texture is like a skin that wraps around a shape. texture() works with\nbuilt-in shapes, such as square() and\nsphere(), and custom shapes created with\nfunctions such as buildGeometry(). To\ntexture a geometry created with beginShape(),\nuv coordinates must be passed to each\nvertex() call.

            \n

            The parameter, tex, is the texture to apply. texture() can use a range\nof sources including images, videos, and offscreen renderers such as\np5.Graphics and\np5.Framebuffer objects.

            \n

            To texture a geometry created with beginShape(),\nyou will need to specify uv coordinates in vertex().

            \n

            Note: texture() can only be used in WebGL mode.

            \n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"

            media to use as the texture.

            \n","type":"p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"}],"chainable":1,"example":["\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}\n\n
            \n\n
            \n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}\n\n
            \n\n
            \n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}\n\n
            \n\n
            \n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":1048,"description":"

            Changes the coordinate system used for textures when they’re applied to\ncustom shapes.

            \n

            In order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.

            \n

            Each call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nrect(0, 0, 30, 50);\n

            \n

            If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);

            \n

            // Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);

            \n

            // Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);

            \n

            endShape();\n

            \n

            textureMode() changes the coordinate system for uv coordinates.

            \n

            The parameter, mode, accepts two possible constants. If NORMAL is\npassed, as in textureMode(NORMAL), then the texture’s uv coordinates can\nbe provided in the range 0 to 1 instead of the image’s dimensions. This can\nbe helpful for using the same code for multiple images of different sizes.\nFor example, the code snippet above could be rewritten as follows:

            \n\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);\n\n

            // Apply the image as a texture.\ntexture(img);

            \n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);

            \n

            // Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);

            \n

            // Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);

            \n

            endShape();\n

            \n

            By default, mode is IMAGE, which scales uv coordinates to the\ndimensions of the image. Calling textureMode(IMAGE) applies the default.

            \n

            Note: textureMode() can only be used in WebGL mode.

            \n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"

            either IMAGE or NORMAL.

            \n","type":"Constant"}],"example":["\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":1227,"description":"

            Changes the way textures behave when a shape’s uv coordinates go beyond the\ntexture.

            \n

            In order for texture() to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as rect() and\nbox() already have these texture mappings based on\ntheir vertices. Custom shapes created with\nvertex() require texture mappings to be passed as\nuv coordinates.

            \n

            Each call to vertex() must include 5 arguments,\nas in vertex(x, y, z, u, v), to map the vertex at coordinates (x, y, z)\nto the pixel at coordinates (u, v) within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nrect(0, 0, 30, 50);\n

            \n

            If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();

            \n

            // Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);

            \n

            // Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);

            \n

            // Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);

            \n

            endShape();\n

            \n

            textureWrap() controls how textures behave when their uv's go beyond the\ntexture. Doing so can produce interesting visual effects such as tiling.\nFor example, the custom shape above could have u-coordinates are greater\nthan the image’s width:

            \n\n// Apply the image as a texture.\ntexture(img);\n\n

            // Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);

            \n

            // Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);

            \n

            // Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);

            \n

            vertex(0, 50, 0, 0, 500);\nendShape();\n

            \n

            The u-coordinates of 600 are greater than the texture image’s width of 300.\nThis creates interesting possibilities.

            \n

            The first parameter, wrapX, accepts three possible constants. If CLAMP\nis passed, as in textureWrap(CLAMP), the pixels at the edge of the\ntexture will extend to the shape’s edges. If REPEAT is passed, as in\ntextureWrap(REPEAT), the texture will tile repeatedly until reaching the\nshape’s edges. If MIRROR is passed, as in textureWrap(MIRROR), the\ntexture will tile repeatedly until reaching the shape’s edges, flipping\nits orientation between tiles. By default, textures CLAMP.

            \n

            The second parameter, wrapY, is optional. It accepts the same three\nconstants, CLAMP, REPEAT, and MIRROR. If one of these constants is\npassed, as in textureWRAP(MIRROR, REPEAT), then the texture will MIRROR\nhorizontally and REPEAT vertically. By default, wrapY will be set to\nthe same value as wrapX.

            \n

            Note: textureWrap() can only be used in WebGL mode.

            \n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"

            either CLAMP, REPEAT, or MIRROR

            \n","type":"Constant"},{"name":"wrapY","description":"

            either CLAMP, REPEAT, or MIRROR

            \n","type":"Constant","optional":true}],"example":["\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            \n\n
            \n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":1510,"description":"

            Sets the current material as a normal material.

            \n

            A normal material sets surfaces facing the x-axis to red, those facing the\ny-axis to green, and those facing the z-axis to blue. Normal material isn't\naffected by light. It’s often used as a placeholder material when debugging.

            \n

            Note: normalMaterial() can only be used in WebGL mode.

            \n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":1561,"description":"

            Sets the ambient color of shapes’ surface material.

            \n

            The ambientMaterial() color sets the components of the\nambientLight() color that shapes will\nreflect. For example, calling ambientMaterial(255, 255, 0) would cause a\nshape to reflect red and green light, but not blue light.

            \n

            ambientMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call ambientMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in ambientMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call ambientMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in ambientMaterial('magenta'), can be passed to set\nthe material’s color.

            \n

            The third way to call ambientMaterial() has three parameters, v1, v2,\nand v3. RGB, HSB, or HSL values, as in ambientMaterial(255, 0, 0), can\nbe passed to set the material’s colors. Color values will be interpreted\nusing the current colorMode().

            \n

            Note: ambientMaterial() can only be used in WebGL mode.

            \n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material","overloads":[{"line":1561,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the\n current colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the\n current colorMode().

            \n","type":"Number"}],"chainable":1},{"line":1766,"params":[{"name":"gray","description":"

            grayscale value between 0 (black) and 255 (white).

            \n","type":"Number"}],"chainable":1},{"line":1772,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":1792,"description":"

            Sets the emissive color of shapes’ surface material.

            \n

            The emissiveMaterial() color sets a color shapes display at full\nstrength, regardless of lighting. This can give the appearance that a shape\nis glowing. However, emissive materials don’t actually emit light that\ncan affect surrounding objects.

            \n

            emissiveMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call emissiveMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in emissiveMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call emissiveMaterial() has one parameter, color. A\np5.Color object, an array of color values, or a\nCSS color string, as in emissiveMaterial('magenta'), can be passed to set\nthe material’s color.

            \n

            The third way to call emissiveMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in emissiveMaterial(255, 0, 0) or\nemissiveMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n

            Note: emissiveMaterial() can only be used in WebGL mode.

            \n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material","overloads":[{"line":1792,"params":[{"name":"v1","description":"

            red or hue value in the current\n colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value in the\n current colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value in the\n current colorMode().

            \n","type":"Number"},{"name":"alpha","description":"

            alpha value in the current\n colorMode().

            \n","type":"Number","optional":true}],"chainable":1},{"line":1862,"params":[{"name":"gray","description":"

            grayscale value between 0 (black) and 255 (white).

            \n","type":"Number"}],"chainable":1},{"line":1868,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":1888,"description":"

            Sets the specular color of shapes’ surface material.

            \n

            The specularMaterial() color sets the components of light color that\nglossy coats on shapes will reflect. For example, calling\nspecularMaterial(255, 255, 0) would cause a shape to reflect red and\ngreen light, but not blue light.

            \n

            Unlike ambientMaterial(),\nspecularMaterial() will reflect the full color of light sources including\ndirectionalLight(),\npointLight(),\nand spotLight(). This is what gives it shapes\ntheir \"shiny\" appearance. The material’s shininess can be controlled by the\nshininess() function.

            \n

            specularMaterial() can be called three ways with different parameters to\nset the material’s color.

            \n

            The first way to call specularMaterial() has one parameter, gray.\nGrayscale values between 0 and 255, as in specularMaterial(50), can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.

            \n

            The second way to call specularMaterial() has one parameter, color. A\np5.Color> object, an array of color values, or a CSS\ncolor string, as in specularMaterial('magenta'), can be passed to set the\nmaterial’s color.

            \n

            The third way to call specularMaterial() has four parameters, v1, v2,\nv3, and alpha. alpha is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in specularMaterial(255, 0, 0) or\nspecularMaterial(255, 0, 0, 30). Color values will be interpreted using\nthe current colorMode().

            \n","itemtype":"method","name":"specularMaterial","chainable":1,"example":["\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material","overloads":[{"line":1888,"params":[{"name":"gray","description":"

            grayscale value between 0 (black) and 255 (white).

            \n","type":"Number"},{"name":"alpha","description":"

            alpha value in the current current\n colorMode().

            \n","type":"Number","optional":true}],"chainable":1},{"line":2111,"params":[{"name":"v1","description":"

            red or hue value in\n the current colorMode().

            \n","type":"Number"},{"name":"v2","description":"

            green or saturation value\n in the current colorMode().

            \n","type":"Number"},{"name":"v3","description":"

            blue, brightness, or lightness value\n in the current colorMode().

            \n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":2123,"params":[{"name":"color","description":"

            color as a p5.Color object,\n an array of color values, or a CSS string.

            \n","type":"p5.Color|Number[]|String"}],"chainable":1}]},{"file":"src/webgl/material.js","line":2143,"description":"

            Sets the amount of gloss (\"shininess\") of a\nspecularMaterial().

            \n

            Shiny materials focus reflected light more than dull materials.\nshininess() affects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nand spotLight().

            \n

            The parameter, shine, is a number that sets the amount of shininess.\nshine must be greater than 1, which is its default value.

            \n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"

            amount of shine.

            \n","type":"Number"}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/material.js","line":2214,"description":"

            Sets the amount of \"metalness\" of a\nspecularMaterial().

            \n

            metalness() can make materials appear more metallic. It affects the way\nmaterials reflect light sources including\naffects the way materials reflect light sources including\ndirectionalLight(),\npointLight(),\nspotLight(), and\nimageLight().

            \n

            The parameter, metallic, is a number that sets the amount of metalness.\nmetallic must be greater than 1, which is its default value. Higher\nvalues, such as metalness(100), make specular materials appear more\nmetallic.

            \n","itemtype":"method","name":"metalness","params":[{"name":"metallic","description":"

            amount of metalness.

            \n","type":"Number"}],"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n\n
            \n\n
            \n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"

            Sets the position and orientation of the current camera in a 3D sketch.

            \n

            camera() allows objects to be viewed from different angles. It has nine\nparameters that are all optional.

            \n

            The first three parameters, x, y, and z, are the coordinates of the\ncamera’s position. For example, calling camera(0, 0, 0) places the camera\nat the origin (0, 0, 0). By default, the camera is placed at\n(0, 0, 800).

            \n

            The next three parameters, centerX, centerY, and centerZ are the\ncoordinates of the point where the camera faces. For example, calling\ncamera(0, 0, 0, 10, 20, 30) places the camera at the origin (0, 0, 0)\nand points it at (10, 20, 30). By default, the camera points at the\norigin (0, 0, 0).

            \n

            The last three parameters, upX, upY, and upZ are the components of\nthe \"up\" vector. The \"up\" vector orients the camera’s y-axis. For example,\ncalling camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the\norigin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector\nto (0, -1, 0) which is like holding it upside-down. By default, the \"up\"\nvector is (0, 1, 0).

            \n

            Note: camera() can only be used in WebGL mode.

            \n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"

            x-coordinate of the camera. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y-coordinate of the camera. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z-coordinate of the camera. Defaults to 800.

            \n","type":"Number","optional":true},{"name":"centerX","description":"

            x-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"centerY","description":"

            y-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"centerZ","description":"

            z-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"upX","description":"

            x-component of the camera’s \"up\" vector. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"upY","description":"

            y-component of the camera’s \"up\" vector. Defaults to 1.

            \n","type":"Number","optional":true},{"name":"upZ","description":"

            z-component of the camera’s \"up\" vector. Defaults to 0.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera to the top-right.\n camera(200, -400, 800);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube apperas to sway left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the camera's x-coordinate.\n let x = 400 * cos(frameCount * 0.01);\n\n // Orbit the camera around the box.\n camera(x, -400, 800);\n\n // Draw the box.\n box();\n}\n\n
            \n\n
            \n\n// Adjust the range sliders to change the camera's position.\n\nlet xSlider;\nlet ySlider;\nlet zSlider;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create slider objects to set the camera's coordinates.\n xSlider = createSlider(-400, 400, 400);\n xSlider.position(0, 100);\n xSlider.size(100);\n ySlider = createSlider(-400, 400, -200);\n ySlider.position(0, 120);\n ySlider.size(100);\n zSlider = createSlider(0, 1600, 800);\n zSlider.position(0, 140);\n zSlider.size(100);\n\n describe(\n 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Get the camera's coordinates from the sliders.\n let x = xSlider.value();\n let y = ySlider.value();\n let z = zSlider.value();\n\n // Move the camera.\n camera(x, y, z);\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":148,"description":"

            Sets a perspective projection for the current camera in a 3D sketch.

            \n

            In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in\nWebGL mode.

            \n

            perspective() changes the camera’s perspective by changing its viewing\nfrustum. The frustum is the volume of space that’s visible to the camera.\nIts shape is a pyramid with its top cut off. The camera is placed where\nthe top of the pyramid should be and views everything between the frustum’s\ntop (near) plane and its bottom (far) plane.

            \n

            The first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling perspective(0.5) sets the camera’s vertical field of\nview to 0.5 radians. By default, fovy is calculated based on the sketch’s\nheight and the camera’s default z-coordinate, which is 800. The formula for\nthe default fovy is 2 * atan(height / 2 / 800).

            \n

            The second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling perspective(0.5, 1.5) sets the camera’s field of view to\n0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner\non a square canvas. By default, aspect is set to width / height.

            \n

            The third parameter, near, is the distance from the camera to the near\nplane. For example, calling perspective(0.5, 1.5, 100) sets the camera’s\nfield of view to 0.5 radians, its aspect ratio to 1.5, and places the near\nplane 100 pixels from the camera. Any shapes drawn less than 100 pixels\nfrom the camera won’t be visible. By default, near is set to 0.1 * 800,\nwhich is 1/10th the default distance between the camera and the origin.

            \n

            The fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling perspective(0.5, 1.5, 100, 10000) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the\nnear plane 100 pixels from the camera, and places the far plane 10,000\npixels from the camera. Any shapes drawn more than 10,000 pixels from the\ncamera won’t be visible. By default, far is set to 10 * 800, which is 10\ntimes the default distance between the camera and the origin.

            \n

            Note: perspective() can only be used in WebGL mode.

            \n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"

            camera frustum vertical field of view. Defaults to\n 2 * atan(height / 2 / 800).

            \n","type":"Number","optional":true},{"name":"aspect","description":"

            camera frustum aspect ratio. Defaults to\n width / height.

            \n","type":"Number","optional":true},{"name":"near","description":"

            distance from the camera to the near clipping plane.\n Defaults to 0.1 * 800.

            \n","type":"Number","optional":true},{"name":"far","description":"

            distance from the camera to the far clipping plane.\n Defaults to 10 * 800.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\n// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":280,"description":"

            Enables or disables perspective for lines in 3D sketches.

            \n

            In WebGL mode, lines can be drawn with a thinner stroke when they’re\nfurther from the camera. Doing so gives them a more realistic appearance.

            \n

            By default, lines are drawn differently based on the type of perspective\nbeing used:

            \n
              \n
            • perspective() and frustum() simulate a realistic perspective. In\nthese modes, stroke weight is affected by the line’s distance from the\ncamera. Doing so results in a more natural appearance. perspective() is\nthe default mode for 3D sketches.
              • \n
            • ortho() doesn’t simulate a realistic perspective. In this mode, stroke\nweights are consistent regardless of the line’s distance from the camera.\nDoing so results in a more predictable and consistent appearance.
              • \n
            \n

            linePerspective() can override the default line drawing mode.

            \n

            The parameter, enable, is optional. It’s a Boolean value that sets the\nway lines are drawn. If true is passed, as in linePerspective(true),\nthen lines will appear thinner when they are further from the camera. If\nfalse is passed, as in linePerspective(false), then lines will have\nconsistent stroke weights regardless of their distance from the camera. By\ndefault, linePerspective() is enabled.

            \n

            Calling linePerspective() without passing an argument returns true if\nit's enabled and false if not.

            \n

            Note: linePerspective() can only be used in WebGL mode.

            \n","itemtype":"method","name":"linePerspective","example":["\n
            \n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n\n
            \n\n
            \n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera","overloads":[{"line":280,"params":[{"name":"enable","description":"

            whether to enable line perspective.

            \n","type":"Boolean"}]},{"line":392,"params":[],"return":{"description":"whether line perspective is enabled.","type":"Boolean"}}]},{"file":"src/webgl/p5.Camera.js","line":412,"description":"

            Sets an orthographic projection for the current camera in a 3D sketch.

            \n

            In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.

            \n

            ortho() changes the camera’s perspective by changing its viewing frustum\nfrom a truncated pyramid to a rectangular prism. The camera is placed in\nfront of the frustum and views everything between the frustum’s near plane\nand its far plane. ortho() has six optional parameters to define the\nfrustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\northo(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide and\n400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 2, width / 2, -height / 2, height / 2).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, 200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near and far are set to 0 and\nmax(width, height) + 800, respectively.

            \n

            Note: ortho() can only be used in WebGL mode.

            \n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"

            x-coordinate of the frustum’s left plane. Defaults to -width / 2.

            \n","type":"Number","optional":true},{"name":"right","description":"

            x-coordinate of the frustum’s right plane. Defaults to width / 2.

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            y-coordinate of the frustum’s bottom plane. Defaults to height / 2.

            \n","type":"Number","optional":true},{"name":"top","description":"

            y-coordinate of the frustum’s top plane. Defaults to -height / 2.

            \n","type":"Number","optional":true},{"name":"near","description":"

            z-coordinate of the frustum’s near plane. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"far","description":"

            z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":522,"description":"

            Sets the frustum of the current camera in a 3D sketch.

            \n

            In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.

            \n

            frustum() changes the default camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nfrustum(-100, 100, 200, -200) creates a frustum that’s 200 pixels wide\nand 400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\northo(-width / 20, width / 20, height / 20, -height / 20).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\northo(-100, 100, 200, -200, 50, 1000) creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near is set to 0.1 * 800, which is\n1/10th the default distance between the camera and the origin. far is set\nto 10 * 800, which is 10 times the default distance between the camera\nand the origin.

            \n

            Note: frustum() can only be used in WebGL mode.

            \n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"

            x-coordinate of the frustum’s left plane. Defaults to -width / 20.

            \n","type":"Number","optional":true},{"name":"right","description":"

            x-coordinate of the frustum’s right plane. Defaults to width / 20.

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            y-coordinate of the frustum’s bottom plane. Defaults to height / 20.

            \n","type":"Number","optional":true},{"name":"top","description":"

            y-coordinate of the frustum’s top plane. Defaults to -height / 20.

            \n","type":"Number","optional":true},{"name":"near","description":"

            z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.

            \n","type":"Number","optional":true},{"name":"far","description":"

            z-coordinate of the frustum’s far plane. Defaults to 10 * 800.

            \n","type":"Number","optional":true}],"chainable":1,"example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            \n\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":638,"description":"

            Creates a new p5.Camera object and sets it\nas the current (active) camera.

            \n

            The new camera is initialized with a default position (0, 0, 800) and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as\nmyCamera.lookAt(0, 0, 0).

            \n

            Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the functions\ncamera(),\nperspective(),\northo(), and\nfrustum() if it's the only camera in the scene.

            \n

            Note: createCamera() can only be used in WebGL mode.

            \n","itemtype":"method","name":"createCamera","return":{"description":"the new camera.","type":"p5.Camera"},"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":850,"description":"

            The camera’s y-coordinate.

            \n

            By default, the camera’s y-coordinate is set to 0 in \"world\" space.

            \n","itemtype":"property","name":"eyeX","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera moves. The text \"eyeX: X\" is written in black beneath the cube. X oscillates between -25 and 25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01);\n\n // Set the camera's position.\n cam.setPosition(x, -400, 800);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":962,"description":"

            The camera’s y-coordinate.

            \n

            By default, the camera’s y-coordinate is set to 0 in \"world\" space.

            \n","itemtype":"property","name":"eyeY","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeY: -400\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeY)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera moves. The text \"eyeY: Y\" is written in black beneath the cube. Y oscillates between -374 and -425.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) - 400;\n\n // Set the camera's position.\n cam.setPosition(0, y, 800);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeY: ${round(cam.eyeY)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1074,"description":"

            The camera’s z-coordinate.

            \n

            By default, the camera’s z-coordinate is set to 800 in \"world\" space.

            \n","itemtype":"property","name":"eyeZ","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeZ: 800\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera moves. The text \"eyeZ: Z\" is written in black beneath the cube. Z oscillates between 700 and 900.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 800;\n\n // Set the camera's position.\n cam.setPosition(0, -400, z);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1186,"description":"

            The x-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerX is 0.

            \n","itemtype":"property","name":"centerX","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerX: 10\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera shifts its focus. The text \"centerX: X\" is written in black beneath the cube. X oscillates between -15 and 35.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01) + 10;\n\n // Point the camera.\n cam.lookAt(x, 20, -30);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1299,"description":"

            The y-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerY is 0.

            \n","itemtype":"property","name":"centerY","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerY: 20\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera shifts its focus. The text \"centerY: Y\" is written in black beneath the cube. Y oscillates between -5 and 45.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) + 20;\n\n // Point the camera.\n cam.lookAt(10, y, -30);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1412,"description":"

            The y-coordinate of the place where the camera looks.

            \n

            By default, the camera looks at the origin (0, 0, 0) in \"world\" space, so\nmyCamera.centerZ is 0.

            \n","itemtype":"property","name":"centerZ","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerZ: -30\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera shifts its focus. The text \"centerZ: Z\" is written in black beneath the cube. Z oscillates between -55 and -25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 25 * sin(frameCount * 0.01) - 30;\n\n // Point the camera.\n cam.lookAt(10, 20, z);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1525,"description":"

            The x-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its x-component is 0 in \"local\" space.

            \n","itemtype":"property","name":"upX","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upX: X\" is written in black beneath it. X oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the x-component.\n let x = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1636,"description":"

            The y-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its y-component is 1 in \"local\" space.

            \n","itemtype":"property","name":"upY","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upY: 1\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube flips upside-down periodically. The text \"upY: Y\" is written in black beneath it. Y oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the y-component.\n let y = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1747,"description":"

            The z-component of the camera's \"up\" vector.

            \n

            The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n(0, 1, 0), so its z-component is 0 in \"local\" space.

            \n","itemtype":"property","name":"upZ","type":"Number","readonly":"","example":["\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upZ: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n\n
            \n\n
            \n\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upZ: Z\" is written in black beneath it. Z oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the z-component.\n let z = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1862,"description":"

            Sets a perspective projection for the camera.

            \n

            In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in new\np5.Camera objects.

            \n

            myCamera.perspective() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first parameter, fovy, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling myCamera.perspective(0.5) sets the camera’s vertical\nfield of view to 0.5 radians. By default, fovy is calculated based on the\nsketch’s height and the camera’s default z-coordinate, which is 800. The\nformula for the default fovy is 2 * atan(height / 2 / 800).

            \n

            The second parameter, aspect, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling myCamera.perspective(0.5, 1.5) sets the camera’s field\nof view to 0.5 radians and aspect ratio to 1.5, which would make shapes\nappear thinner on a square canvas. By default, aspect is set to\nwidth / height.

            \n

            The third parameter, near, is the distance from the camera to the near\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100) sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places\nthe near plane 100 pixels from the camera. Any shapes drawn less than 100\npixels from the camera won’t be visible. By default, near is set to\n0.1 * 800, which is 1/10th the default distance between the camera and\nthe origin.

            \n

            The fourth parameter, far, is the distance from the camera to the far\nplane. For example, calling myCamera.perspective(0.5, 1.5, 100, 10000)\nsets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,\nplaces the near plane 100 pixels from the camera, and places the far plane\n10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels\nfrom the camera won’t be visible. By default, far is set to 10 * 800,\nwhich is 10 times the default distance between the camera and the origin.

            \n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"

            camera frustum vertical field of view. Defaults to\n 2 * atan(height / 2 / 800).

            \n","type":"Number","optional":true},{"name":"aspect","description":"

            camera frustum aspect ratio. Defaults to\n width / height.

            \n","type":"Number","optional":true},{"name":"near","description":"

            distance from the camera to the near clipping plane.\n Defaults to 0.1 * 800.

            \n","type":"Number","optional":true},{"name":"far","description":"

            distance from the camera to the far clipping plane.\n Defaults to 10 * 800.

            \n","type":"Number","optional":true}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin left and right.\n let x = 100 * sin(frameCount * 0.01);\n translate(x, 0, 0);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2085,"description":"

            Sets an orthographic projection for the camera.

            \n

            In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.

            \n

            myCamera.ortho() changes the camera’s perspective by changing its viewing\nfrustum from a truncated pyramid to a rectangular prism. The frustum is the\nvolume of space that’s visible to the camera. The camera is placed in front\nof the frustum and views everything within the frustum. myCamera.ortho()\nhas six optional parameters to define the viewing frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.ortho(-100, 100, 200, -200) creates a frustum that’s 200 pixels\nwide and 400 pixels tall. By default, these dimensions are set based on\nthe sketch’s width and height, as in\nmyCamera.ortho(-width / 2, width / 2, -height / 2, height / 2).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.ortho(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and\nends 1,000 pixels from the camera. By default, near and far are set to\n0 and max(width, height) + 800, respectively.

            \n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"

            x-coordinate of the frustum’s left plane. Defaults to -width / 2.

            \n","type":"Number","optional":true},{"name":"right","description":"

            x-coordinate of the frustum’s right plane. Defaults to width / 2.

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            y-coordinate of the frustum’s bottom plane. Defaults to height / 2.

            \n","type":"Number","optional":true},{"name":"top","description":"

            y-coordinate of the frustum’s top plane. Defaults to -height / 2.

            \n","type":"Number","optional":true},{"name":"near","description":"

            z-coordinate of the frustum’s near plane. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"far","description":"

            z-coordinate of the frustum’s far plane. Defaults to max(width, height) + 800.

            \n","type":"Number","optional":true}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n push();\n // Calculate the box's coordinates.\n let x = 10 * sin(frameCount * 0.02 + i * 0.6);\n let z = -40 * i;\n // Translate the origin.\n translate(x, 0, z);\n // Draw the box.\n box(10);\n pop();\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2282,"description":"

            Sets the camera's frustum.

            \n

            In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.

            \n

            myCamera.frustum() changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.

            \n

            The first four parameters, left, right, bottom, and top, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\nmyCamera.frustum(-100, 100, 200, -200) creates a frustum that’s 200\npixels wide and 400 pixels tall. By default, these coordinates are set\nbased on the sketch’s width and height, as in\nmyCamera.frustum(-width / 20, width / 20, height / 20, -height / 20).

            \n

            The last two parameters, near and far, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\nmyCamera.frustum(-100, 100, 200, -200, 50, 1000) creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends\n1,000 pixels from the camera. By default, near is set to 0.1 * 800, which\nis 1/10th the default distance between the camera and the origin. far is\nset to 10 * 800, which is 10 times the default distance between the\ncamera and the origin.

            \n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"

            x-coordinate of the frustum’s left plane. Defaults to -width / 20.

            \n","type":"Number","optional":true},{"name":"right","description":"

            x-coordinate of the frustum’s right plane. Defaults to width / 20.

            \n","type":"Number","optional":true},{"name":"bottom","description":"

            y-coordinate of the frustum’s bottom plane. Defaults to height / 20.

            \n","type":"Number","optional":true},{"name":"top","description":"

            y-coordinate of the frustum’s top plane. Defaults to -height / 20.

            \n","type":"Number","optional":true},{"name":"near","description":"

            z-coordinate of the frustum’s near plane. Defaults to 0.1 * 800.

            \n","type":"Number","optional":true},{"name":"far","description":"

            z-coordinate of the frustum’s far plane. Defaults to 10 * 800.

            \n","type":"Number","optional":true}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n cam2.frustum(-10, 10, -10, 10, 300, 350);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2472,"description":"

            Rotates the camera left and right.

            \n

            Panning rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.

            \n

            The parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.pan(0.001), rotates the camera to the\nright. Passing a negative angle, as in myCamera.pan(-0.001), rotates the\ncamera to the left.

            \n

            Note: Angles are interpreted based on the current\nangleMode().

            \n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"

            amount to rotate in the current\n angleMode().

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2535,"description":"

            Rotates the camera up and down.

            \n

            Tilting rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.

            \n

            The parameter, angle, is the angle the camera should rotate. Passing a\npositive angle, as in myCamera.tilt(0.001), rotates the camera down.\nPassing a negative angle, as in myCamera.tilt(-0.001), rotates the camera\nup.

            \n

            Note: Angles are interpreted based on the current\nangleMode().

            \n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"

            amount to rotate in the current\n angleMode().

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.tilt(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2598,"description":"

            Points the camera at a location.

            \n

            myCamera.lookAt() changes the camera’s orientation without changing its\nposition.

            \n

            The parameters, x, y, and z, are the coordinates in \"world\" space\nwhere the camera should point. For example, calling\nmyCamera.lookAt(10, 20, 30) points the camera at the coordinates\n(10, 20, 30).

            \n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"

            x-coordinate of the position where the camera should look in \"world\" space.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the position where the camera should look in \"world\" space.

            \n","type":"Number"},{"name":"z","description":"

            z-coordinate of the position where the camera should look in \"world\" space.

            \n","type":"Number"}],"example":["\n
            \n\n// Double-click to look at a different cube.\n\nlet cam;\nlet isLookingLeft = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(-30, 0, 0);\n\n describe(\n 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box on the left.\n push();\n // Translate the origin to the left.\n translate(-30, 0, 0);\n // Style the box.\n fill(255, 0, 0);\n // Draw the box.\n box(20);\n pop();\n\n // Draw the box on the right.\n push();\n // Translate the origin to the right.\n translate(30, 0, 0);\n // Style the box.\n fill(0, 0, 255);\n // Draw the box.\n box(20);\n pop();\n}\n\n// Change the camera's focus when the user double-clicks.\nfunction doubleClicked() {\n if (isLookingLeft === true) {\n cam.lookAt(30, 0, 0);\n isLookingLeft = false;\n } else {\n cam.lookAt(-30, 0, 0);\n isLookingLeft = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2695,"description":"

            Sets the position and orientation of the camera.

            \n

            myCamera.camera() allows objects to be viewed from different angles. It\nhas nine parameters that are all optional.

            \n

            The first three parameters, x, y, and z, are the coordinates of the\ncamera’s position in \"world\" space. For example, calling\nmyCamera.camera(0, 0, 0) places the camera at the origin (0, 0, 0). By\ndefault, the camera is placed at (0, 0, 800).

            \n

            The next three parameters, centerX, centerY, and centerZ are the\ncoordinates of the point where the camera faces in \"world\" space. For\nexample, calling myCamera.camera(0, 0, 0, 10, 20, 30) places the camera\nat the origin (0, 0, 0) and points it at (10, 20, 30). By default, the\ncamera points at the origin (0, 0, 0).

            \n

            The last three parameters, upX, upY, and upZ are the components of\nthe \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s\ny-axis. For example, calling\nmyCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0) places the camera at the\norigin (0, 0, 0), points it at (10, 20, 30), and sets the \"up\" vector\nto (0, -1, 0) which is like holding it upside-down. By default, the \"up\"\nvector is (0, 1, 0).

            \n","itemtype":"method","name":"camera","params":[{"name":"x","description":"

            x-coordinate of the camera. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"y","description":"

            y-coordinate of the camera. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"z","description":"

            z-coordinate of the camera. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"centerX","description":"

            x-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"centerY","description":"

            y-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"centerZ","description":"

            z-coordinate of the point the camera faces. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"upX","description":"

            x-component of the camera’s \"up\" vector. Defaults to 0.

            \n","type":"Number","optional":true},{"name":"upY","description":"

            x-component of the camera’s \"up\" vector. Defaults to 1.

            \n","type":"Number","optional":true},{"name":"upZ","description":"

            z-component of the camera’s \"up\" vector. Defaults to 0.

            \n","type":"Number","optional":true}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right: (1200, -600, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the right: (1200, 0, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n let x = 1200 * cos(frameCount * 0.01);\n let y = -600 * sin(frameCount * 0.01);\n cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":2923,"description":"

            Moves the camera along its \"local\" axes without changing its orientation.

            \n

            The parameters, x, y, and z, are the distances the camera should\nmove. For example, calling myCamera.move(10, 20, 30) moves the camera 10\npixels to the right, 20 pixels down, and 30 pixels backward in its \"local\"\nspace.

            \n","itemtype":"method","name":"move","params":[{"name":"x","description":"

            distance to move along the camera’s \"local\" x-axis.

            \n","type":"Number"},{"name":"y","description":"

            distance to move along the camera’s \"local\" y-axis.

            \n","type":"Number"},{"name":"z","description":"

            distance to move along the camera’s \"local\" z-axis.

            \n","type":"Number"}],"example":["\n
            \n\n// Click the canvas to begin detecting key presses.\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera along its \"local\" axes\n // when the user presses certain keys.\n if (keyIsPressed === true) {\n\n // Move horizontally.\n if (keyCode === LEFT_ARROW) {\n cam.move(-1, 0, 0);\n }\n if (keyCode === RIGHT_ARROW) {\n cam.move(1, 0, 0);\n }\n\n // Move vertically.\n if (keyCode === UP_ARROW) {\n cam.move(0, -1, 0);\n }\n if (keyCode === DOWN_ARROW) {\n cam.move(0, 1, 0);\n }\n\n // Move in/out of the screen.\n if (key === 'i') {\n cam.move(0, 0, -1);\n }\n if (key === 'o') {\n cam.move(0, 0, 1);\n }\n }\n\n // Draw the box.\n box();\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":3020,"description":"

            Sets the camera’s position in \"world\" space without changing its\norientation.

            \n

            The parameters, x, y, and z, are the coordinates where the camera\nshould be placed. For example, calling myCamera.setPosition(10, 20, 30)\nplaces the camera at coordinates (10, 20, 30) in \"world\" space.

            \n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"

            x-coordinate in \"world\" space.

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate in \"world\" space.

            \n","type":"Number"},{"name":"z","description":"

            z-coordinate in \"world\" space.

            \n","type":"Number"}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            \n\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 700;\n cam2.setPosition(0, 0, z);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":3174,"description":"

            Sets the camera’s position, orientation, and projection by copying another\ncamera.

            \n

            The parameter, cam, is the p5.Camera object to copy. For example, calling\ncam2.set(cam1) will set cam2 using cam1’s configuration.

            \n","itemtype":"method","name":"set","params":[{"name":"cam","description":"

            camera to copy.

            \n","type":"p5.Camera"}],"example":["\n
            \n\n// Double-click to \"reset\" the camera zoom.\n\nlet cam1;\nlet cam2;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n cam1 = createCamera();\n\n // Place the camera at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Copy cam1's configuration.\n cam2.set(cam1);\n\n describe(\n 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n cam2.move(0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n// \"Reset\" the camera when the user double-clicks.\nfunction doubleClicked() {\n cam2.set(cam1);\n}"],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":3252,"description":"

            Sets the camera’s position and orientation to values that are in-between\nthose of two other cameras.

            \n

            myCamera.slerp() uses spherical linear interpolation to calculate a\nposition and orientation that’s in-between two other cameras. Doing so is\nhelpful for transitioning smoothly between two perspectives.

            \n

            The first two parameters, cam0 and cam1, are the p5.Camera objects\nthat should be used to set the current camera.

            \n

            The third parameter, amt, is the amount to interpolate between cam0 and\ncam1. 0.0 keeps the camera’s position and orientation equal to cam0’s,\n0.5 sets them halfway between cam0’s and cam1’s , and 1.0 sets the\nposition and orientation equal to cam1’s.

            \n

            For example, calling myCamera.slerp(cam0, cam1, 0.1) sets cam’s position\nand orientation very close to cam0’s. Calling\nmyCamera.slerp(cam0, cam1, 0.9) sets cam’s position and orientation very\nclose to cam1’s.

            \n

            Note: All of the cameras must use the same projection.

            \n","itemtype":"method","name":"slerp","params":[{"name":"cam0","description":"

            first camera.

            \n","type":"p5.Camera"},{"name":"cam1","description":"

            second camera.

            \n","type":"p5.Camera"},{"name":"amt","description":"

            amount of interpolation between 0.0 (cam0) and 1.0 (cam1).

            \n","type":"Number"}],"example":["\n
            \n\nlet cam;\nlet cam0;\nlet cam1;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the main camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Create the first camera.\n // Keep its default settings.\n cam0 = createCamera();\n\n // Create the second camera.\n cam1 = createCamera();\n\n // Place it at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Set the current camera to cam.\n setCamera(cam);\n\n describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the amount to interpolate between cam0 and cam1.\n let amt = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Update the main camera's position and orientation.\n cam.slerp(cam0, cam1, amt);\n\n box();\n}\n\n
            "],"class":"p5.Camera","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":3819,"description":"

            Sets the current (active) camera of a 3D sketch.

            \n

            setCamera() allows for switching between multiple cameras created with\ncreateCamera().

            \n

            Note: setCamera() can only be used in WebGL mode.

            \n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"

            camera that should be made active.

            \n","type":"p5.Camera"}],"example":["\n
            \n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n\n
            "],"class":"p5","module":"3D","submodule":"Camera"},{"file":"src/webgl/p5.Framebuffer.js","line":93,"description":"

            A Uint8ClampedArray\ncontaining the values for all the pixels in the Framebuffer.

            \n

            Like the main canvas pixels property, call\nloadPixels() before reading\nit, and call updatePixels()\nafterwards to update its data.

            \n

            Note that updating pixels via this property will be slower than\ndrawing to the framebuffer directly.\nConsider using a shader instead of looping over pixels.

            \n","itemtype":"property","name":"pixels","type":"Number[]","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":184,"description":"

            Resizes the framebuffer to the given width and height.

            \n","itemtype":"method","name":"resize","params":[{"name":"width","description":"","type":"Number"},{"name":"height","description":"","type":"Number"}],"example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction mouseMoved() {\n framebuffer.resize(\n max(20, mouseX),\n max(20, mouseY)\n );\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n framebuffer.end();\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -width/2, -height/2);\n}\n\n
            "],"alt":"A red, green, and blue sphere is drawn in the middle of a white rectangle\nwhich starts in the top left of the canvas and whose bottom right is at\nthe user's mouse","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":239,"description":"

            Gets or sets the pixel scaling for high pixel density displays. By\ndefault, the density will match that of the canvas the framebuffer was\ncreated on, which will match the display density.

            \n

            Call this method with no arguments to get the current density, or pass\nin a number to set the density.

            \n","itemtype":"method","name":"pixelDensity","params":[{"name":"density","description":"

            A scaling factor for the number of pixels per\nside of the framebuffer

            \n","type":"Number","optional":true}],"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":261,"description":"

            Gets or sets whether or not this framebuffer will automatically resize\nalong with the canvas it's attached to in order to match its size.

            \n

            Call this method with no arguments to see if it is currently auto-sized,\nor pass in a boolean to set this property.

            \n","itemtype":"method","name":"autoSized","params":[{"name":"autoSized","description":"

            Whether or not the framebuffer should resize\nalong with the canvas it's attached to

            \n","type":"Boolean","optional":true}],"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":702,"description":"

            Creates and returns a new\np5.FramebufferCamera to be used\nwhile drawing to this framebuffer. The camera will be set as the\ncurrently active camera.

            \n","itemtype":"method","name":"createCamera","return":{"description":"A new camera","type":"p5.Camera"},"class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":733,"description":"

            Removes the framebuffer and frees its resources.

            \n","itemtype":"method","name":"remove","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n const useFramebuffer = (frameCount % 120) > 60;\n if (useFramebuffer && !framebuffer) {\n // Create a new framebuffer for us to use\n framebuffer = createFramebuffer();\n } else if (!useFramebuffer && framebuffer) {\n // Free the old framebuffer's resources\n framebuffer.remove();\n framebuffer = undefined;\n }\n\n background(255);\n if (useFramebuffer) {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(30);\n framebuffer.end();\n\n image(framebuffer, -width/2, -height/2);\n }\n}\n\n
            "],"alt":"A rotating red cube blinks on and off every second.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":794,"description":"

            Begin drawing to this framebuffer. Subsequent drawing functions to the\ncanvas the framebuffer is attached to will not be immediately visible, and\nwill instead be drawn to the framebuffer's texture. Call\nend() when finished to make draw\nfunctions go right to the canvas again and to be able to read the\ncontents of the framebuffer's texture.

            \n","itemtype":"method","name":"begin","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n translate(0, 10*sin(frameCount * 0.01), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(50);\n framebuffer.end();\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -50, -50, 25, 25);\n image(framebuffer, 0, 0, 35, 35);\n}\n\n
            "],"alt":"A video of a floating and rotating red cube is pasted twice on the\ncanvas: once in the top left, and again, larger, in the bottom right.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":923,"description":"

            After having previously called\nbegin(), this method stops drawing\nfunctions from going to the framebuffer's texture, allowing them to go\nright to the canvas again. After this, one can read from the framebuffer's\ntexture.

            \n","itemtype":"method","name":"end","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":952,"description":"

            Run a function while drawing to the framebuffer rather than to its canvas.\nThis is equivalent to calling framebuffer.begin(), running the function,\nand then calling framebuffer.end(), but ensures that one never\naccidentally forgets begin or end.

            \n","itemtype":"method","name":"draw","params":[{"name":"callback","description":"

            A function to run that draws to the canvas. The\nfunction will immediately be run, but it will draw to the framebuffer\ninstead of the canvas.

            \n","type":"Function"}],"example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.draw(function() {\n background(255);\n translate(0, 10*sin(frameCount * 0.01), 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n fill(255, 0, 0);\n box(50);\n });\n\n background(100);\n // Draw the framebuffer to the main canvas\n image(framebuffer, -50, -50, 25, 25);\n image(framebuffer, 0, 0, 35, 35);\n}\n\n
            "],"alt":"A video of a floating and rotating red cube is pasted twice on the\ncanvas: once in the top left, and again, larger, in the bottom right.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1002,"description":"

            Call this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1031,"description":"

            Get a region of pixels from the canvas in the form of a\np5.Image, or a single pixel as an array of\nnumbers.

            \n

            Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If the Framebuffer has been set up to not store alpha values, then\nonly [R,G,B] will be returned. If no parameters are specified, the entire\nimage is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().

            \n","itemtype":"method","name":"get","return":{"description":"the rectangle p5.Image","type":"p5.Image"},"class":"p5.Framebuffer","module":"Rendering","overloads":[{"line":1031,"params":[{"name":"x","description":"

            x-coordinate of the pixel

            \n","type":"Number"},{"name":"y","description":"

            y-coordinate of the pixel

            \n","type":"Number"},{"name":"w","description":"

            width of the section to be returned

            \n","type":"Number"},{"name":"h","description":"

            height of the section to be returned

            \n","type":"Number"}],"return":{"description":"the rectangle p5.Image","type":"p5.Image"}},{"line":1052,"params":[],"return":{"description":"the whole p5.Image","type":"p5.Image"}},{"line":1056,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"}],"return":{"description":"color of pixel at x,y in array format [R, G, B, A]","type":"Number[]"}}]},{"file":"src/webgl/p5.Framebuffer.js","line":1150,"description":"

            Call this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.

            \n

            This will also clear the depth buffer so that any future drawing done\nafterwards will go on top.

            \n","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n}\n\nfunction draw() {\n noStroke();\n lights();\n\n // Draw a sphere to the framebuffer\n framebuffer.begin();\n background(0);\n sphere(25);\n framebuffer.end();\n\n // Load its pixels and draw a gradient over the lower half of the canvas\n framebuffer.loadPixels();\n for (let y = height/2; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = (y * width + x) * 4;\n framebuffer.pixels[idx] = (x / width) * 255;\n framebuffer.pixels[idx + 1] = (y / height) * 255;\n framebuffer.pixels[idx + 2] = 255;\n framebuffer.pixels[idx + 3] = 255;\n }\n }\n framebuffer.updatePixels();\n\n // Draw a cube on top of the pixels we just wrote\n framebuffer.begin();\n push();\n translate(20, 20);\n rotateX(0.5);\n rotateY(0.5);\n box(20);\n pop();\n framebuffer.end();\n\n image(framebuffer, -width/2, -height/2);\n noLoop();\n}\n\n
            "],"alt":"A sphere partly occluded by a gradient from cyan to white to magenta on\nthe lower half of the canvas, with a 3D cube drawn on top of that in the\nlower right corner.","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1284,"description":"

            A texture with the color information of the framebuffer. Pass this (or the\nframebuffer itself) to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n","itemtype":"property","name":"color","type":"p5.FramebufferTexture","example":["\n
            \n\nlet framebuffer;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n framebuffer.end();\n\n // Draw the framebuffer to the main canvas\n image(framebuffer.color, -width/2, -height/2);\n}\n\n
            "],"alt":"A red, green, and blue sphere in the middle of the canvas","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Framebuffer.js","line":1326,"description":"

            A texture with the depth information of the framebuffer. If the framebuffer\nwas created with { depth: false } in its settings, then this property will\nbe undefined. Pass this to texture() to draw it to\nthe canvas, or pass it to a shader with\nsetUniform() to read its data.

            \n

            Since Framebuffers are controlled by WebGL, their y coordinates are stored\nflipped compared to images and videos. When texturing with a framebuffer\ntexture, you may want to flip vertically, e.g. with\nplane(framebuffer.width, -framebuffer.height).

            \n","itemtype":"property","name":"depth","type":"p5.FramebufferTexture|undefined","example":["\n
            \n\nlet framebuffer;\nlet depthShader;\n\nconst vert = `\nprecision highp float;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec2 vTexCoord;\nvoid main() {\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n vTexCoord = aTexCoord;\n}\n`;\n\nconst frag = `\nprecision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D depth;\nvoid main() {\n float depthVal = texture2D(depth, vTexCoord).r;\n gl_FragColor = mix(\n vec4(1., 1., 0., 1.), // yellow\n vec4(0., 0., 1., 1.), // blue\n pow(depthVal, 6.)\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n framebuffer = createFramebuffer();\n depthShader = createShader(vert, frag);\n noStroke();\n}\n\nfunction draw() {\n // Draw to the framebuffer\n framebuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n box(20, 20, 100);\n framebuffer.end();\n\n push();\n shader(depthShader);\n depthShader.setUniform('depth', framebuffer.depth);\n plane(framebuffer.width, framebuffer.height);\n pop();\n}\n\n
            "],"alt":"A video of a rectangular prism rotating, with parts closest to the camera\nappearing yellow and colors getting progressively more blue the farther\nfrom the camera they go","class":"p5.Framebuffer","module":"Rendering"},{"file":"src/webgl/p5.Geometry.js","line":80,"description":"

            Custom bounding box calculation based on the object's vertices.\nThe bounding box is a rectangular prism that encompasses the entire object.\nIt is defined by the minimum and maximum coordinates along each axis, as well\nas the size and offset of the box.

            \n

            It returns an object containing the bounding box properties:

            \n
              \n
            • min: The minimum coordinates of the bounding box as a p5.Vector.
              • \n
            • max: The maximum coordinates of the bounding box as a p5.Vector.
              • \n
            • size: The size of the bounding box as a p5.Vector.
              • \n
            • offset: The offset of the bounding box as a p5.Vector.
              • \n
            \n","itemtype":"method","name":"calculateBoundingBox","memberof":"p5.Geometry.prototype","return":{"description":"","type":"Object"},"example":["\n\n
            \n\nlet particles;\nlet button;\nlet resultParagraph;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n button = createButton('New');\n button.mousePressed(makeParticles);\n\n resultParagraph = createElement('pre').style('width', '200px' );\n resultParagraph.style('font-family', 'monospace');\n resultParagraph.style('font-size', '12px');\n makeParticles();\n}\n\nfunction makeParticles() {\n if (particles) freeGeometry(particles);\n\n particles = buildGeometry(() => {\n for (let i = 0; i < 60; i++) {\n push();\n translate(\n randomGaussian(0, 200),\n randomGaussian(0, 100),\n randomGaussian(0, 150)\n );\n sphere(10);\n pop();\n }\n });\n\n const boundingBox = particles.calculateBoundingBox();\n resultParagraph.html('Bounding Box: \\n' + JSON.stringify(boundingBox, null, 2));\n}\n\nfunction draw() {\n background(255);\n noStroke();\n lights();\n orbitControl();\n model(particles);\n}\n\n\n
            \n"],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":231,"description":"

            Removes the internal colors of p5.Geometry.\nUsing clearColors(), you can use fill() to supply new colors before drawing each shape.\nIf clearColors() is not used, the shapes will use their internal colors by ignoring fill().

            \n","itemtype":"method","name":"clearColors","example":["\n
            \n\nlet shape01;\nlet shape02;\nlet points = [];\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n points.push(new p5.Vector(-1, -1, 0), new p5.Vector(-1, 1, 0),\n new p5.Vector(1, -1, 0), new p5.Vector(-1, -1, 0));\n buildShape01();\n buildShape02();\n}\nfunction draw() {\n background(0);\n fill('pink'); // shape01 retains its internal blue color, so it won't turn pink.\n model(shape01);\n fill('yellow'); // Now, shape02 is yellow.\n model(shape02);\n}\n\nfunction buildShape01() {\n beginGeometry();\n fill('blue'); // shape01's color is blue because its internal colors remain.\n beginShape();\n for (let vec of points) vertex(vec.x * 100, vec.y * 100, vec.z * 100);\n endShape(CLOSE);\n shape01 = endGeometry();\n}\n\nfunction buildShape02() {\n beginGeometry();\n fill('red'); // shape02.clearColors() removes its internal colors. Now, shape02 is red.\n beginShape();\n for (let vec of points) vertex(vec.x * 200, vec.y * 200, vec.z * 200);\n endShape(CLOSE);\n shape02 = endGeometry();\n shape02.clearColors(); // Resets shape02's colors.\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":285,"description":"

            Flips the U texture coordinates of the model.

            \n","itemtype":"method","name":"flipU","return":{"description":"","type":"p5.Geometry"},"example":["\n
            \n\nlet img;\nlet model1;\nlet model2;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(150, 150, WEBGL);\n background(200);\n\n model1 = createShape(50, 50);\n model2 = createShape(50, 50);\n model2.flipU();\n}\n\nfunction draw() {\n background(0);\n\n // original\n push();\n translate(-40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model1);\n pop();\n\n // flipped\n push();\n translate(40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model2);\n pop();\n}\n\nfunction createShape(w, h) {\n return buildGeometry(() => {\n textureMode(NORMAL);\n beginShape();\n vertex(-w / 2, -h / 2, 0, 0);\n vertex(w / 2, -h / 2, 1, 0);\n vertex(w / 2, h / 2, 1, 1);\n vertex(-w / 2, h / 2, 0, 1);\n endShape(CLOSE);\n });\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":357,"description":"

            Flips the V texture coordinates of the model.

            \n","itemtype":"method","name":"flipV","return":{"description":"","type":"p5.Geometry"},"example":["\n
            \n\nlet img;\nlet model1;\nlet model2;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(150, 150, WEBGL);\n background(200);\n\n model1 = createShape(50, 50);\n model2 = createShape(50, 50);\n model2.flipV();\n}\n\nfunction draw() {\n background(0);\n\n // original\n push();\n translate(-40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model1);\n pop();\n\n // flipped\n push();\n translate(40, 0, 0);\n texture(img);\n noStroke();\n plane(50);\n model(model2);\n pop();\n}\n\nfunction createShape(w, h) {\n return buildGeometry(() => {\n textureMode(NORMAL);\n beginShape();\n vertex(-w / 2, -h / 2, 0, 0);\n vertex(w / 2, -h / 2, 1, 0);\n vertex(w / 2, h / 2, 1, 1);\n vertex(-w / 2, h / 2, 0, 1);\n endShape(CLOSE);\n });\n}\n\n
            "],"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":429,"description":"

            computes faces for geometry objects based on the vertices.

            \n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":472,"description":"

            This function calculates normals for each face, where each vertex's normal is the average of the normals of all faces it's connected to.\ni.e computes smooth normals per vertex as an average of each face.

            \n

            When using FLAT shading, vertices are disconnected/duplicated i.e each face has its own copy of vertices.\nWhen using SMOOTH shading, vertices are connected/deduplicated i.e each face has its vertices shared with other faces.

            \n

            Options can include:

            \n
              \n
            • roundToPrecision: Precision value for rounding computations. Defaults to 3.
              • \n
            \n","itemtype":"method","name":"computeNormals","params":[{"name":"shadingType","description":"

            shading type (FLAT for flat shading or SMOOTH for smooth shading) for buildGeometry() outputs. Defaults to FLAT.

            \n","type":"String","optional":true},{"name":"options","description":"

            An optional object with configuration.

            \n","type":"Object","optional":true}],"chainable":1,"example":["\n
            \n\nlet helix;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n helix = buildGeometry(() => {\n beginShape();\n\n for (let i = 0; i < TWO_PI * 3; i += 0.6) {\n let radius = 20;\n let x = cos(i) * radius;\n let y = sin(i) * radius;\n let z = map(i, 0, TWO_PI * 3, -30, 30);\n vertex(x, y, z);\n }\n endShape();\n });\n helix.computeNormals();\n}\nfunction draw() {\n background(255);\n stroke(0);\n fill(150, 200, 250);\n lights();\n rotateX(PI*0.2);\n orbitControl();\n model(helix);\n}\n\n
            ","\n
            \n\nlet star;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n star = buildGeometry(() => {\n beginShape();\n for (let i = 0; i < TWO_PI; i += PI / 5) {\n let outerRadius = 60;\n let innerRadius = 30;\n let xOuter = cos(i) * outerRadius;\n let yOuter = sin(i) * outerRadius;\n let zOuter = random(-20, 20);\n vertex(xOuter, yOuter, zOuter);\n\n let nextI = i + PI / 5 / 2;\n let xInner = cos(nextI) * innerRadius;\n let yInner = sin(nextI) * innerRadius;\n let zInner = random(-20, 20);\n vertex(xInner, yInner, zInner);\n }\n endShape(CLOSE);\n });\n star.computeNormals(SMOOTH);\n}\nfunction draw() {\n background(255);\n stroke(0);\n fill(150, 200, 250);\n lights();\n rotateX(PI*0.2);\n orbitControl();\n model(star);\n}\n\n
            "],"alt":"A star-like geometry, here the computeNormals(SMOOTH) is applied for a smooth shading effect.\nThis helps to avoid the faceted appearance that can occur with flat shading.","class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":643,"description":"

            Averages the vertex normals. Used in curved\nsurfaces

            \n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":664,"description":"

            Averages pole normals. Used in spherical primitives

            \n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.Geometry.js","line":974,"description":"

            Modifies all vertices to be centered within the range -100 to 100.

            \n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/p5.RendererGL.Immediate.js","line":1,"description":"

            Welcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.

            \n","class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.Immediate.js","line":191,"description":"

            End shape drawing and render vertices to screen.

            \n","chainable":1,"class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.Retained.js","line":8,"params":[{"name":"geometry","description":"

            The model whose resources will be freed

            \n","type":"p5.Geometry"}],"class":"p5","module":"Shape"},{"file":"src/webgl/p5.RendererGL.js","line":118,"description":"

            Set attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.

            \n

            Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.

            \n

            If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.

            \n

            The available attributes are:\n
            \nalpha - indicates if the canvas contains an alpha buffer\ndefault is true

            \n

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

            \n

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

            \n

            antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)

            \n

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

            \n

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

            \n

            perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.

            \n

            version - either 1 or 2, to specify which WebGL version to ask for. By\ndefault, WebGL 2 will be requested. If WebGL2 is not available, it will\nfall back to WebGL 1. You can check what version is used with by looking at\nthe global webglVersion property.

            \n","itemtype":"method","name":"setAttributes","example":["\n
            \n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n
            \n
            \nNow with the antialias attribute set to true.\n
            \n
            \n\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n
            \n\n
            \n\n// press the mouse button to disable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\n\n
            "],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":118,"params":[{"name":"key","description":"

            Name of attribute

            \n","type":"String"},{"name":"value","description":"

            New value of named attribute

            \n","type":"Boolean"}]},{"line":262,"params":[{"name":"obj","description":"

            object with key-value pairs

            \n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":211,"description":"

            Copies the shader from one drawing context to another.

            \n

            Each p5.Shader object must be compiled by calling\nshader() before it can run. Compilation happens\nin a drawing context which is usually the main canvas or an instance of\np5.Graphics. A shader can only be used in the\ncontext where it was compiled. The copyToContext() method compiles the\nshader again and copies it to another drawing context where it can be\nreused.

            \n

            The parameter, context, is the drawing context where the shader will be\nused. The shader can be copied to an instance of\np5.Graphics, as in\nmyShader.copyToContext(pg). The shader can also be copied from a\np5.Graphics object to the main canvas using\nthe window variable, as in myShader.copyToContext(window).

            \n

            Note: A p5.Shader object created with\ncreateShader(),\ncreateFilterShader(), or\nloadShader()\ncan be used directly with a p5.Framebuffer\nobject created with\ncreateFramebuffer(). Both objects\nhave the same context as the main canvas.

            \n","itemtype":"method","name":"copyToContext","params":[{"name":"context","description":"

            WebGL context for the copied shader.

            \n","type":"p5|p5.Graphics"}],"return":{"description":"new shader compiled for the target context.","type":"p5.Shader"},"example":["\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(window);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}\n\n
            "],"class":"p5.Shader","module":"3D","submodule":"Material"},{"file":"src/webgl/p5.Shader.js","line":622,"description":"

            Sets the shader’s uniform (global) variables.

            \n

            Shader programs run on the computer’s graphics processing unit (GPU).\nThey live in part of the computer’s memory that’s completely separate\nfrom the sketch that runs them. Uniforms are global variables within a\nshader program. They provide a way to pass values from a sketch running\non the CPU to a shader program running on the GPU.

            \n

            The first parameter, uniformName, is a string with the uniform’s name.\nFor the shader above, uniformName would be 'r'.

            \n

            The second parameter, data, is the value that should be used to set the\nuniform. For example, calling myShader.setUniform('r', 0.5) would set\nthe r uniform in the shader above to 0.5. data should match the\nuniform’s type. Numbers, strings, booleans, arrays, and many types of\nimages can all be passed to a shader with setUniform().

            \n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"

            name of the uniform. Must match the name\n used in the vertex and fragment shaders.

            \n","type":"String"},{"name":"data","description":"

            value to assign to the uniform. Must match the uniform’s data type.

            \n","type":"Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"}],"example":["\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            \n\n
            \n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n\n
            "],"class":"p5.Shader","module":"3D","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"3D"},{"file":"lib/addons/p5.sound.js","line":52,"description":"

            p5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound

            \n

            From the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors

            \n

            MIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE

            \n

            Some of the many audio libraries & resources that inspire p5.sound:

            \n\n

            Web Audio API: http://w3.org/TR/webaudio/

            \n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":159,"description":"

            Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the Web Audio API\n.

            \n\n

            Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.

            ","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n
            \n function draw() {\n background(255);\n textAlign(CENTER);\n\n if (getAudioContext().state !== 'running') {\n text('click to start audio', width/2, height/2);\n } else {\n text('audio is enabled', width/2, height/2);\n }\n }\n\n function touchStarted() {\n if (getAudioContext().state !== 'running') {\n getAudioContext().resume();\n }\n var synth = new p5.MonoSynth();\n synth.play('A4', 0.5, 0, 0.2);\n }\n\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":198,"description":"

            It is not only a good practice to give users control over starting\naudio. This policy is enforced by many web browsers, including iOS and\nGoogle Chrome, which create the Web Audio API's\nAudio Context\nin a suspended state.

            \n\n

            In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. mousePressed()) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling start() on a p5.Oscillator,\n play() on a p5.SoundFile, or simply\nuserStartAudio().

            \n\n

            userStartAudio() starts the AudioContext on a user\ngesture. The default behavior will enable audio on any\nmouseUp or touchEnd event. It can also be placed in a specific\ninteraction function, such as mousePressed() as in the\nexample below. This method utilizes\nStartAudioContext\n, a library by Yotam Mann (MIT Licence, 2016).

            ","params":[{"name":"elements","description":"

            This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.

            \n","type":"Element|Array","optional":true},{"name":"callback","description":"

            Callback to invoke when the AudioContext\n has started

            \n","type":"Function","optional":true}],"return":{"description":"Returns a Promise that resolves when\n the AudioContext state is 'running'","type":"Promise"},"itemtype":"method","name":"userStartAudio","example":["\n
            \nfunction setup() {\n // mimics the autoplay policy\n getAudioContext().suspend();\n\n let mySynth = new p5.MonoSynth();\n\n // This won't play until the context has resumed\n mySynth.play('A6');\n}\nfunction draw() {\n background(220);\n textAlign(CENTER, CENTER);\n text(getAudioContext().state, width/2, height/2);\n}\nfunction mousePressed() {\n userStartAudio();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":401,"description":"

            This module has shims

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":536,"description":"

            Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":726,"description":"

            Returns a number representing the output volume for sound\nin this sketch.

            \n","itemtype":"method","name":"getOutputVolume","return":{"description":"Output volume for sound in this sketch.\n Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":738,"description":"

            Scale the output of all sound in this sketch

            \nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.\n\n

            Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.

            \n

            How This Works: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.

            \n\n

            If no value is provided, returns a Web Audio API Gain Node

            ","itemtype":"method","name":"outputVolume","params":[{"name":"volume","description":"

            Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Fade for t seconds

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen at\n t seconds in the future

            \n","type":"Number","optional":true}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":782,"description":"

            p5.soundOut is the p5.sound final output bus. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (.limiter),\nand Gain Nodes for .input and .output.

            \n","itemtype":"property","name":"soundOut","type":"Object","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":807,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":811,"description":"

            Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.

            \n","itemtype":"method","name":"sampleRate","return":{"description":"samplerate samples per second","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":825,"description":"

            Returns the closest MIDI note value for\na given frequency.

            \n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"

            A freqeuncy, for example, the \"A\"\n above Middle C is 440Hz

            \n","type":"Number"}],"return":{"description":"MIDI note value","type":"Number"},"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":841,"description":"

            Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.

            \n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"

            The number of a MIDI note

            \n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n
            \nlet midiNotes = [60, 64, 67, 72];\nlet noteIndex = 0;\nlet midiVal, freq;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n osc = new p5.TriOsc();\n env = new p5.Envelope();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 10, 20);\n if (midiVal) {\n text('MIDI: ' + midiVal, 10, 40);\n text('Freq: ' + freq, 10, 60);\n }\n}\n\nfunction startSound() {\n // see also: userStartAudio();\n osc.start();\n\n midiVal = midiNotes[noteIndex % midiNotes.length];\n freq = midiToFreq(midiVal);\n osc.freq(freq);\n env.ramp(osc, 0, 1.0, 0);\n\n noteIndex++;\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":925,"description":"

            List the SoundFile formats that you will include. LoadSound\nwill search your directory for these extensions, and will pick\na format that is compatable with the client's web browser.\nHere is a free online file\nconverter.

            \n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"

            i.e. 'mp3', 'wav', 'ogg'

            \n","type":"String","optional":true,"multiple":true}],"example":["\n
            \nfunction preload() {\n // set the global sound formats\n soundFormats('mp3', 'ogg');\n\n // load either beatbox.mp3, or .ogg, depending on browser\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('sound loaded! tap to play', 10, 20, width - 20);\n cnv.mousePressed(function() {\n mySound.play();\n });\n }\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1040,"description":"

            Used by Osc and Envelope to chain signal math

            \n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1145,"description":"

            Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device.\nFor uploading audio to a server, use\np5.SoundFile.saveBlob.

            \n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"

            p5.SoundFile that you wish to save

            \n","type":"p5.SoundFile"},{"name":"fileName","description":"

            name of the resulting .wav file.

            \n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"

            Returns true if the sound file finished loading successfully.

            \n","itemtype":"method","name":"isLoaded","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1679,"description":"

            Play the p5.SoundFile

            \n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"

            (optional) schedule playback to start (in seconds from now).

            \n","type":"Number","optional":true},{"name":"rate","description":"

            (optional) playback rate

            \n","type":"Number","optional":true},{"name":"amp","description":"

            (optional) amplitude (volume)\n of playback

            \n","type":"Number","optional":true},{"name":"cueStart","description":"

            (optional) cue start time in seconds

            \n","type":"Number","optional":true},{"name":"duration","description":"

            (optional) duration of playback in seconds

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1787,"description":"

            p5.SoundFile has two play modes: restart and\nsustain. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. With untilDone, a sound will play only if it's\nnot already playing. Sustain is the default mode.

            \n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"

            'restart' or 'sustain' or 'untilDone'

            \n","type":"String"}],"example":["\n
            \nlet mySound;\nfunction preload(){\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n noFill();\n rect(0, height/2, width - 1, height/2 - 1);\n rect(0, 0, width - 1, height/2);\n textAlign(CENTER, CENTER);\n fill(20);\n text('restart', width/2, 1 * height/4);\n text('sustain', width/2, 3 * height/4);\n}\nfunction canvasPressed() {\n if (mouseX < height/2) {\n mySound.playMode('restart');\n } else {\n mySound.playMode('sustain');\n }\n mySound.play();\n}\n\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1847,"description":"

            Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.

            \n

            After pausing, .play() will resume from the paused\nposition.\nIf p5.SoundFile had been set to loop before it was paused,\nit will continue to loop after it is unpaused with .play().

            \n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n seconds from now

            \n","type":"Number","optional":true}],"example":["\n
            \nlet soundFile;\nfunction preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n}\nfunction canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n}\nfunction mouseReleased() {\n soundFile.pause();\n background(220);\n}\n\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1905,"description":"

            Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.

            \n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n seconds from now

            \n","type":"Number","optional":true},{"name":"rate","description":"

            (optional) playback rate

            \n","type":"Number","optional":true},{"name":"amp","description":"

            (optional) playback volume

            \n","type":"Number","optional":true},{"name":"cueLoopStart","description":"

            (optional) startTime in seconds

            \n","type":"Number","optional":true},{"name":"duration","description":"

            (optional) loop duration in seconds

            \n","type":"Number","optional":true}],"example":["\n
            \n let soundFile;\n let loopStart = 0.5;\n let loopDuration = 0.2;\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n }\n function canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n }\n function mouseReleased() {\n soundFile.pause();\n background(220);\n }\n \n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1950,"description":"

            Set a p5.SoundFile's looping flag to true or false. If the sound\nis currently playing, this change will take effect when it\nreaches the end of the current playback.

            \n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"

            set looping to true or false

            \n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1976,"description":"

            Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.

            \n","itemtype":"method","name":"isLooping","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1997,"description":"

            Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).

            \n","itemtype":"method","name":"isPlaying","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2011,"description":"

            Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).

            \n","itemtype":"method","name":"isPaused","return":{"description":"","type":"Boolean"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2025,"description":"

            Stop soundfile playback.

            \n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"

            (optional) schedule event to occur\n in seconds from now

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2087,"description":"

            Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).

            \n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"

            Set the stereo panner

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"example":["\n
            \n let ballX = 0;\n let soundFile;\n\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/beatbox.mp3');\n }\n\n function draw() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n ballX = constrain(mouseX, 0, width);\n ellipse(ballX, height/2, 20, 20);\n }\n\n function canvasPressed(){\n // map the ball's x location to a panning degree\n // between -1.0 (left) and 1.0 (right)\n let panning = map(ballX, 0., width,-1.0, 1.0);\n soundFile.pan(panning);\n soundFile.play();\n }\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2131,"description":"

            Returns the current stereo pan position (-1.0 to 1.0)

            \n","itemtype":"method","name":"getPan","return":{"description":"Returns the stereo pan setting of the Oscillator\n as a number between -1.0 (left) and 1.0 (right).\n 0.0 is center and default.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2146,"description":"

            Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.

            \n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"

            Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.

            \n","type":"Number","optional":true}],"example":["\n
            \nlet mySound;\n\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n}\nfunction canvasPressed() {\n mySound.loop();\n}\nfunction mouseReleased() {\n mySound.pause();\n}\nfunction draw() {\n background(220);\n\n // Set the rate to a range between 0.1 and 4\n // Changing the rate also alters the pitch\n let playbackRate = map(mouseY, 0.1, height, 2, 0);\n playbackRate = constrain(playbackRate, 0.01, 4);\n mySound.rate(playbackRate);\n\n line(0, mouseY, width, mouseY);\n text('rate: ' + round(playbackRate * 100) + '%', 10, 20);\n}\n\n \n
            \n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2239,"description":"

            Multiply the output volume (amplitude) of a sound file\nbetween 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.

            \n

            Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.

            \n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"

            Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Fade for t seconds

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen at\n t seconds in the future

            \n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2276,"description":"

            Returns the duration of a sound file in seconds.

            \n","itemtype":"method","name":"duration","return":{"description":"The duration of the soundFile in seconds.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2293,"description":"

            Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if reverseBuffer\nhas been called, currentTime will count backwards.

            \n","itemtype":"method","name":"currentTime","return":{"description":"currentTime of the soundFile in seconds.","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2308,"description":"

            Move the playhead of a soundfile that is currently playing to a\nnew position and a new duration, in seconds.\nIf none are given, will reset the file to play entire duration\nfrom start to finish. To set the position of a soundfile that is\nnot currently playing, use the play or loop methods.

            \n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"

            cueTime of the soundFile in seconds.

            \n","type":"Number"},{"name":"duration","description":"

            duration in seconds.

            \n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2340,"description":"

            Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.

            \n","itemtype":"method","name":"channels","return":{"description":"[channels]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2354,"description":"

            Return the sample rate of the sound file.

            \n","itemtype":"method","name":"sampleRate","return":{"description":"[sampleRate]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2367,"description":"

            Return the number of samples in a sound file.\nEqual to sampleRate * duration.

            \n","itemtype":"method","name":"frames","return":{"description":"[sampleCount]","type":"Number"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2381,"description":"

            Returns an array of amplitude peaks in a p5.SoundFile that can be\nused to draw a static waveform. Scans through the p5.SoundFile's\naudio buffer to find the greatest amplitudes. Accepts one\nparameter, 'length', which determines size of the array.\nLarger arrays result in more precise waveform visualizations.

            \n

            Inspired by Wavesurfer.js.

            \n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"

            length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.

            \n","type":"Number","optional":true}],"return":{"description":"Array of peaks.","type":"Float32Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2443,"description":"

            Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).

            \n","itemtype":"method","name":"reverseBuffer","example":["\n
            \nlet drum;\nfunction preload() {\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction canvasPressed() {\n drum.stop();\n drum.reverseBuffer();\n drum.play();\n}\n \n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2497,"description":"

            Schedule an event to be called when the soundfile\nreaches the end of a buffer. If the soundfile is\nplaying through once, this will be called when it\nends. If it is looping, it will be called when\nstop is called.

            \n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"

            function to call when the\n soundfile has ended.

            \n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2565,"description":"

            Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe main output. Most p5sound objects connect to the master\noutput when they are created.

            \n","itemtype":"method","name":"connect","params":[{"name":"object","description":"

            Audio object that accepts an input

            \n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2590,"description":"

            Disconnects the output of this p5sound object.

            \n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2604,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2612,"description":"

            Reset the source for this SoundFile to a\nnew path (URL).

            \n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"

            path to audio file

            \n","type":"String"},{"name":"callback","description":"

            Callback

            \n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2630,"description":"

            Replace the current Audio Buffer with a new Buffer.

            \n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"

            Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.

            \n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2719,"description":"

            Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.

            \n

            Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.

            \n

            Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.

            \n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"

            Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.

            \n","type":"Number"},{"name":"callback","description":"

            Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.

            \n","type":"Function"},{"name":"value","description":"

            An object to be passed as the\n second parameter to the\n callback function.

            \n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n useful for removeCue(id)","type":"Number"},"example":["\n
            \nlet mySound;\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 10, 20);\n\n // schedule calls to changeText\n mySound.addCue(0, changeText, \"hello\" );\n mySound.addCue(0.5, changeText, \"hello,\" );\n mySound.addCue(1, changeText, \"hello, p5!\");\n mySound.addCue(1.5, changeText, \"hello, p5!!\");\n mySound.addCue(2, changeText, \"hello, p5!!!!!\");\n}\n\nfunction changeText(val) {\n background(220);\n text(val, 10, 20);\n}\n\nfunction canvasPressed() {\n mySound.play();\n}\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2790,"description":"

            Remove a callback based on its ID. The ID is returned by the\naddCue method.

            \n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"

            ID of the cue, as returned by addCue

            \n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2817,"description":"

            Remove all of the callbacks that had originally been scheduled\nvia the addCue method.

            \n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2850,"description":"

            Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device. To upload a file to a server, see\ngetBlob

            \n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"

            name of the resulting .wav file.

            \n","type":"String","optional":true}],"example":["\n
            \n let mySound;\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to download', 10, 20);\n }\n\n function canvasPressed() {\n mySound.save('my cool filename');\n }\n
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2882,"description":"

            This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"Blob\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an http request. We'll\nuse the httpDo options object to send a POST request with some\nspecific options: we encode the request as multipart/form-data,\nand attach the blob as one of the form values using FormData.

            \n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n
            \n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n\n function setup() {\n noCanvas();\n let soundBlob = mySound.getBlob();\n\n // Now we can send the blob to a server...\n let serverUrl = 'https://jsonplaceholder.typicode.com/posts';\n let httpRequestOptions = {\n method: 'POST',\n body: new FormData().append('soundBlob', soundBlob),\n headers: new Headers({\n 'Content-Type': 'multipart/form-data'\n })\n };\n httpDo(serverUrl, httpRequestOptions);\n\n // We can also create an `ObjectURL` pointing to the Blob\n let blobUrl = URL.createObjectURL(soundBlob);\n\n // The `
            "],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2946,"description":"

            loadSound() returns a new p5.SoundFile from a specified\npath. If called during preload(), the p5.SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the p5.SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n\nlocal server is recommended when loading external files.

            \n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"

            Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.

            \n","type":"String|Array"},{"name":"successCallback","description":"

            Name of a function to call once file loads

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            Name of a function to call if there is\n an error loading the file.

            \n","type":"Function","optional":true},{"name":"whileLoading","description":"

            Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.

            \n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n
            \nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3117,"description":"

            Connects to the p5sound instance (main output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).

            \n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"

            set the sound source\n (optional, defaults to\n main output)

            \n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"

            a range between 0.0 and 1.0\n to smooth amplitude readings

            \n","type":"Number|undefined","optional":true}],"example":["\n
            \nfunction preload(){\n sound1 = loadSound('assets/beat.mp3');\n sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n\n amplitude = new p5.Amplitude();\n amplitude.setInput(sound2);\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound1.isPlaying() && sound2.isPlaying()) {\n sound1.stop();\n sound2.stop();\n } else {\n sound1.play();\n sound2.play();\n }\n}\n
            "],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3209,"description":"

            Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.

            \n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"

            Optionally return only channel 0 (left) or 1 (right)

            \n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n
            \nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220, 150);\n textAlign(CENTER);\n text('tap to play', width/2, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound.isPlaying()) {\n sound.stop();\n } else {\n sound.play();\n }\n}\n
            "],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3264,"description":"

            Determines whether the results of Amplitude.process() will be\nNormalized. To normalize, Amplitude finds the difference the\nloudest reading it has processed and the maximum amplitude of\n1.0. Amplitude adds this difference to all values to produce\nresults that will reliably map between 0.0 and 1.0. However,\nif a louder moment occurs, the amount that Normalize adds to\nall the values will change. Accepts an optional boolean parameter\n(true or false). Normalizing is off by default.

            \n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"

            set normalize to true (1) or false (0)

            \n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3293,"description":"

            Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.

            \n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"

            smoothing from 0.0 <= 1

            \n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3476,"description":"

            Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.

            \n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"

            p5.sound object (or web audio API source node)

            \n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3501,"description":"

            Returns an array of amplitude values (between -1.0 and +1.0) that represent\na snapshot of amplitude readings in a single buffer. Length will be\nequal to bins (defaults to 1024). Can be used to draw the waveform\nof a sound.

            \n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"

            Must be a power of two between\n 16 and 1024. Defaults to 1024.

            \n","type":"Number","optional":true},{"name":"precision","description":"

            If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.

            \n","type":"String","optional":true}],"return":{"description":"Array Array of amplitude values (-1 to 1)\n over time. Array length = bins.","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3553,"description":"

            Returns an array of amplitude values (between 0 and 255)\nacross the frequency spectrum. Length is equal to FFT bins\n(1024 by default). The array indices correspond to frequencies\n(i.e. pitches), from the lowest to the highest that humans can\nhear. Each value represents amplitude at that slice of the\nfrequency spectrum. Must be called prior to using\ngetEnergy().

            \n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"

            Must be a power of two between\n 16 and 1024. Defaults to 1024.

            \n","type":"Number","optional":true},{"name":"scale","description":"

            If \"dB,\" returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.

            \n","type":"Number","optional":true}],"return":{"description":"spectrum Array of energy (amplitude/volume)\n values across the frequency spectrum.\n Lowest energy (silence) = 0, highest\n possible is 255.","type":"Array"},"example":["\n
            \nlet osc, fft;\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mousePressed(startSound);\n osc = new p5.Oscillator();\n osc.amp(0);\n fft = new p5.FFT();\n}\n\nfunction draw(){\n background(220);\n\n let freq = map(mouseX, 0, windowWidth, 20, 10000);\n freq = constrain(freq, 1, 20000);\n osc.freq(freq);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h );\n }\n\n stroke(255);\n if (!osc.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text(round(freq)+'Hz', 10, 20);\n }\n}\n\nfunction startSound() {\n osc.start();\n osc.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n osc.amp(0, 0.2);\n}\n
            \n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3650,"description":"

            Returns the amount of energy (volume) at a specific\n\nfrequency, or the average amount of energy between two\nfrequencies. Accepts Number(s) corresponding\nto frequency (in Hz), or a \"string\" corresponding to predefined\nfrequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\").\nReturns a range between 0 (no energy/volume at that frequency) and\n255 (maximum energy).\nNOTE: analyze() must be called prior to getEnergy(). analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results to determine the value at a specific frequency or\nrange of frequencies.

            \n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"

            Will return a value representing\n energy at this frequency. Alternately,\n the strings \"bass\", \"lowMid\" \"mid\",\n \"highMid\", and \"treble\" will return\n predefined frequency ranges.

            \n","type":"Number|String"},{"name":"frequency2","description":"

            If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.

            \n","type":"Number","optional":true}],"return":{"description":"Energy Energy (volume/amplitude) from\n 0 and 255.","type":"Number"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3739,"description":"

            Returns the\n\nspectral centroid of the input signal.\nNOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.

            \n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n
            \n function setup(){\ncnv = createCanvas(100,100);\ncnv.mousePressed(userStartAudio);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\nfunction draw() {\nif (getAudioContext().state !== 'running') {\n background(220);\n text('tap here and enable mic to begin', 10, 20, width - 20);\n return;\n}\nlet centroidplot = 0.0;\nlet spectralCentroid = 0;\n\nbackground(0);\nstroke(0,255,0);\nlet spectrum = fft.analyze();\nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\nfor (let i = 0; i < spectrum.length; i++){\n let x = map(log(i), 0, log(spectrum.length), 0, width);\n let h = map(spectrum[i], 0, 255, 0, height);\n let rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n rect(x, height, rectangle_width, -h )\n}\nlet nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nlet mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255); // text is white\ntext('centroid: ', 10, 20);\ntext(round(spectralCentroid)+' Hz', 10, 40);\n}\n
            "],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3826,"description":"

            Smooth FFT analysis by averaging with the last analysis frame.

            \n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"

            0.0 < smoothing < 1.0.\n Defaults to 0.8.

            \n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"

            Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\nNOTE: analyze() must be called prior to linAverages(). Analyze()\ntells the FFT to analyze frequency data, and linAverages() uses\nthe results to group them into a smaller set of averages.

            \n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"

            Number of returned frequency groups

            \n","type":"Number"}],"return":{"description":"linearAverages Array of average amplitude values for each group","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3889,"description":"

            Returns an array of average amplitude values of the spectrum, for a given\nset of \nOctave Bands\nNOTE: analyze() must be called prior to logAverages(). Analyze()\ntells the FFT to analyze frequency data, and logAverages() uses\nthe results to group them into a smaller set of averages.

            \n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"

            Array of Octave Bands objects for grouping

            \n","type":"Array"}],"return":{"description":"logAverages Array of average amplitude values for each group","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3925,"description":"

            Calculates and Returns the 1/N\nOctave Bands\nN defaults to 3 and minimum central frequency to 15.625Hz.\n(1/3 Octave Bands ~= 31 Frequency Bands)\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\nand produce less frequency groups.

            \n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"

            Specifies the 1/N type of generated octave bands

            \n","type":"Number"},{"name":"fCtr0","description":"

            Minimum central frequency for the lowest band

            \n","type":"Number"}],"return":{"description":"octaveBands Array of octave band objects with their bounds","type":"Array"},"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4168,"description":"

            Start an oscillator.

            \n

            Starting an oscillator on a user gesture will enable audio in browsers\nthat have a strict autoplay policy, including Chrome and most mobile\ndevices. See also: userStartAudio().

            \n","itemtype":"method","name":"start","params":[{"name":"time","description":"

            startTime in seconds from now.

            \n","type":"Number","optional":true},{"name":"frequency","description":"

            frequency in Hz.

            \n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4218,"description":"

            Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.

            \n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"

            Time, in seconds from now.

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4238,"description":"

            Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            between 0 and 1.0\n or a modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"gain If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's\n gain/amplitude/volume)","type":"AudioParam"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4271,"description":"

            Returns the value of output gain

            \n","itemtype":"method","name":"getAmp","return":{"description":"Amplitude value between 0.0 and 1.0","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4285,"description":"

            Set frequency of an oscillator to a value. Or, pass in an object\nsuch as an oscillator to modulate the frequency with an audio signal.

            \n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"

            Frequency in Hz\n or modulating signal/oscillator

            \n","type":"Number|Object"},{"name":"rampTime","description":"

            Ramp time (in seconds)

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            Schedule this event to happen\n at x seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"Frequency If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's frequency","type":"AudioParam"},"example":["\n
            \nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator(300);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playOscillator() {\n osc.start();\n osc.amp(0.5);\n // start at 700Hz\n osc.freq(700);\n // ramp to 60Hz over 0.7 seconds\n osc.freq(60, 0.7);\n osc.amp(0, 0.1, 0.7);\n}\n
            "],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4360,"description":"

            Returns the value of frequency of oscillator

            \n","itemtype":"method","name":"getFreq","return":{"description":"Frequency of oscillator in Hertz","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4373,"description":"

            Set type to 'sine', 'triangle', 'sawtooth' or 'square'.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'sine', 'triangle', 'sawtooth' or 'square'.

            \n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4386,"description":"

            Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'.

            \n","itemtype":"method","name":"getType","return":{"description":"type of oscillator eg . 'sine', 'triangle', 'sawtooth' or 'square'.","type":"String"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4399,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4420,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4444,"description":"

            Pan between Left (-1) and Right (1)

            \n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"

            Number between -1 and 1

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4460,"description":"

            Returns the current value of panPosition , between Left (-1) and Right (1)

            \n","itemtype":"method","name":"getPan","return":{"description":"panPosition of oscillator , between Left (-1) and Right (1)","type":"Number"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4494,"description":"

            Set the phase of an oscillator between 0.0 and 1.0.\nIn this implementation, phase is a delay time\nbased on the oscillator's current frequency.

            \n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"

            float between 0.0 and 1.0

            \n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4522,"description":"

            Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method again\nwill override the initial add() with a new value.

            \n","itemtype":"method","name":"add","params":[{"name":"number","description":"

            Constant number to add

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with scaled output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4543,"description":"

            Multiply the p5.Oscillator's output amplitude\nby a fixed value (i.e. turn it up!). Calling this method\nagain will override the initial mult() with a new value.

            \n","itemtype":"method","name":"mult","params":[{"name":"number","description":"

            Constant number to multiply

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with multiplied output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4563,"description":"

            Scale this oscillator's amplitude values to a given\nrange, and return the oscillator. Calling this method\nagain will override the initial scale() with new values.

            \n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"inMax","description":"

            input range maximum

            \n","type":"Number"},{"name":"outMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"outMax","description":"

            input range maximum

            \n","type":"Number"}],"return":{"description":"Oscillator Returns this oscillator\n with scaled output","type":"p5.Oscillator"},"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4767,"description":"

            Time until envelope reaches attackLevel

            \n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4772,"description":"

            Level once attack is complete.

            \n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4778,"description":"

            Time until envelope reaches decayLevel.

            \n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4784,"description":"

            Level after decay. The envelope will sustain here until it is released.

            \n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4790,"description":"

            Duration of the release portion of the envelope.

            \n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4796,"description":"

            Level at the end of the release.

            \n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4833,"description":"

            Reset the envelope with a series of time/value pairs.

            \n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"

            Time (in seconds) before level\n reaches attackLevel

            \n","type":"Number"},{"name":"attackLevel","description":"

            Typically an amplitude between\n 0.0 and 1.0

            \n","type":"Number"},{"name":"decayTime","description":"

            Time

            \n","type":"Number"},{"name":"decayLevel","description":"

            Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)

            \n","type":"Number"},{"name":"releaseTime","description":"

            Release Time (in seconds)

            \n","type":"Number"},{"name":"releaseLevel","description":"

            Amplitude

            \n","type":"Number"}],"example":["\n
            \nlet attackTime;\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\nlet l3 = 0.2; // release time in seconds\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n\n attackTime = map(mouseX, 0, width, 0.0, 1.0);\n text('attack time: ' + attackTime, 5, height - 20);\n}\n\n// mouseClick triggers envelope if over canvas\nfunction playSound() {\n env.set(attackTime, l1, t2, l2, l3);\n\n triOsc.start();\n env.play(triOsc);\n}\n
            \n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4895,"description":"

            Set values like a traditional\n\nADSR envelope\n.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number"},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4964,"description":"

            Set max (attackLevel) and min (releaseLevel) of envelope.

            \n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"

            attack level (defaults to 1)

            \n","type":"Number"},{"name":"rLevel","description":"

            release level (defaults to 0)

            \n","type":"Number"}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5037,"description":"

            Assign a parameter to be controlled by this envelope.\nIf a p5.Sound object is given, then the p5.Envelope will control its\noutput gain. If multiple inputs are provided, the env will\ncontrol all of them.

            \n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"

            A p5.sound object or\n Web Audio Param.

            \n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5055,"description":"

            Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.

            \n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"

            true is exponential, false is linear

            \n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5078,"description":"

            Play tells the envelope to start acting on a given input.\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\nSoundFile), then Envelope will control its output volume.\nEnvelopes can also be used to control any \nWeb Audio Audio Param.

            ","itemtype":"method","name":"play","params":[{"name":"unit","description":"

            A p5.sound object or\n Web Audio Param.

            \n","type":"Object"},{"name":"startTime","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope

            \n","type":"Number","optional":true}],"example":["\n
            \nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n triOsc.start();\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n // ensure that audio is enabled\n userStartAudio();\n\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5148,"description":"

            Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go. Input can be\nany p5.sound object, or a \nWeb Audio Param.

            \n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            time from now (in seconds)

            \n","type":"Number"}],"example":["\n
            \nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5256,"description":"

            Trigger the Release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number"}],"example":["\n
            \nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5350,"description":"

            Exponentially ramp to a value using the first two\nvalues from setADSR(attackTime, decayTime)\nas \ntime constants for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.

            \n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"

            p5.sound Object or Web Audio Param

            \n","type":"Object"},{"name":"secondsFromNow","description":"

            When to trigger the ramp

            \n","type":"Number"},{"name":"v","description":"

            Target value

            \n","type":"Number"},{"name":"v2","description":"

            Second target value

            \n","type":"Number","optional":true}],"example":["\n
            \nlet env, osc, amp;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet attackLevel = 1;\nlet decayLevel = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n fill(0,255,0);\n noStroke();\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime);\n osc = new p5.Oscillator();\n osc.amp(env);\n amp = new p5.Amplitude();\n\n cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n // ensures audio is enabled. See also: `userStartAudio`\n osc.start();\n\n env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n background(20);\n text('tap to play', 10, 20);\n let h = map(amp.getLevel(), 0, 0.4, 0, height);;\n rect(0, height, width, -h);\n}\n
            "],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5460,"description":"

            Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method\nagain will override the initial add() with new values.

            \n","itemtype":"method","name":"add","params":[{"name":"number","description":"

            Constant number to add

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5479,"description":"

            Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.

            \n","itemtype":"method","name":"mult","params":[{"name":"number","description":"

            Constant number to multiply

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5498,"description":"

            Scale this envelope's amplitude values to a given\nrange, and return the envelope. Calling this method\nagain will override the initial scale() with new values.

            \n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"inMax","description":"

            input range maximum

            \n","type":"Number"},{"name":"outMin","description":"

            input range minumum

            \n","type":"Number"},{"name":"outMax","description":"

            input range maximum

            \n","type":"Number"}],"return":{"description":"Envelope Returns this envelope\n with scaled output","type":"p5.Envelope"},"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5657,"description":"

            Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'white', 'pink' or 'brown'

            \n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5871,"description":"

            Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).

            \n","itemtype":"method","name":"width","params":[{"name":"width","description":"

            Width between the pulses (0 to 1.0,\n defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6066,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6070,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6075,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6080,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6085,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6090,"description":"

            Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.

            \n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6098,"description":"

            Input amplitude, connect to it by default but not to master out

            \n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6114,"description":"

            Start processing audio input. This enables the use of other\nAudioIn methods like getLevel(). Note that by default, AudioIn\nis not connected to p5.sound's output. So you won't hear\nanything unless you use the connect() method.

            \n

            Certain browsers limit access to the user's microphone. For example,\nChrome only allows access from localhost and over https. For this reason,\nyou may want to include an errorCallback—a function that is called in case\nthe browser won't provide mic access.

            \n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"

            Name of a function to call on\n success.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.

            \n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6171,"description":"

            Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.

            \n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6191,"description":"

            Connect to an audio unit. If no parameter is provided, will\nconnect to the main output (i.e. your speakers).

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            An object that accepts audio input,\n such as an FFT

            \n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6216,"description":"

            Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.

            \n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6234,"description":"

            Read the Amplitude (volume level) of an AudioIn. The AudioIn\nclass contains its own instance of the Amplitude class to help\nmake it easy to get a microphone's volume level. Accepts an\noptional smoothing value (0.0 < 1.0). NOTE: AudioIn must\n.start() before using .getLevel().

            \n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"

            Smoothing is 0.0 by default.\n Smooths values based on previous values.

            \n","type":"Number","optional":true}],"return":{"description":"Volume level (between 0.0 and 1.0)","type":"Number"},"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6257,"description":"

            Set amplitude (volume) of a mic input between 0 and 1.0.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            between 0 and 1.0

            \n","type":"Number"},{"name":"time","description":"

            ramp time (optional)

            \n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6280,"description":"

            Returns a list of available input sources. This is a wrapper\nfor \nMediaDevices.enumerateDevices() - Web APIs | MDN\nand it returns a Promise.

            \n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"

            This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            This optional callback receives the error\n message as its argument.

            \n","type":"Function","optional":true}],"return":{"description":"Returns a Promise that can be used in place of the callbacks, similar\n to the enumerateDevices() method","type":"Promise"},"example":["\n
            \n let audioIn;\n\n function setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n }\n\n function gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n }\n
            "],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6340,"description":"

            Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n \n navigator.mediaDevices.enumerateDevices()

            \n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"

            position of input source in the array

            \n","type":"Number"}],"example":["\n
            \nlet audioIn;\n\nfunction setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n}\n\nfunction gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n}\n
            "],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6462,"description":"

            In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter

            \n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6478,"description":"

            Set the output volume of the filter.

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            amplitude between 0 and 1.0

            \n","type":"Number","optional":true},{"name":"rampTime","description":"

            create a fade that lasts until rampTime

            \n","type":"Number","optional":true},{"name":"tFromNow","description":"

            schedule this event to happen in tFromNow seconds

            \n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6502,"description":"

            Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments

            \n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"

            Chain together multiple sound objects

            \n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"

            Adjust the dry/wet value.

            \n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"

            The desired drywet value (0 - 1.0)

            \n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6542,"description":"

            Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6557,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6719,"description":"

            The p5.Filter is built with a\n\nWeb Audio BiquadFilter Node.

            \n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6742,"description":"

            Filter an audio signal according to a set\nof filter parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"

            An object that outputs audio

            \n","type":"Object"},{"name":"freq","description":"

            Frequency in Hz, from 10 to 22050

            \n","type":"Number","optional":true},{"name":"res","description":"

            Resonance/Width of the filter frequency\n from 0.001 to 1000

            \n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6760,"description":"

            Set the frequency and the resonance of the filter.

            \n","itemtype":"method","name":"set","params":[{"name":"freq","description":"

            Frequency in Hz, from 10 to 22050

            \n","type":"Number","optional":true},{"name":"res","description":"

            Resonance (Q) from 0.001 to 1000

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6781,"description":"

            Set the filter frequency, in Hz, from 10 to 22050 (the range of\nhuman hearing, although in reality most people hear in a narrower\nrange).

            \n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"

            Filter Frequency

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"value Returns the current frequency value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6811,"description":"

            Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.

            \n","itemtype":"method","name":"res","params":[{"name":"res","description":"

            Resonance/Width of filter freq\n from 0.001 to 1000

            \n","type":"Number"},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"return":{"description":"value Returns the current res value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6838,"description":"

            Controls the gain attribute of a Biquad Filter.\nThis is distinctly different from .amp() which is inherited from p5.Effect\n.amp() controls the volume via the output gain node\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.

            \n","itemtype":"method","name":"gain","params":[{"name":"gain","description":"","type":"Number"}],"return":{"description":"Returns the current or updated gain value","type":"Number"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6864,"description":"

            Toggle function. Switches between the specified type and allpass

            \n","itemtype":"method","name":"toggle","return":{"description":"[Toggle value]","type":"Boolean"},"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6884,"description":"

            Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".

            \n","itemtype":"method","name":"setType","params":[{"name":"t","description":"","type":"String"}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7198,"description":"

            The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the \np5.Filter API, especially gain and freq.\nBands are stored in an array, with indices 0 - 3, or 0 - 7

            \n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7239,"description":"

            Process an input by connecting it to the EQ

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Audio source

            \n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7629,"description":"

            \nWeb Audio Spatial Panner Node

            \n

            Properties include
            \n Panning Model\n : \"equal power\" or \"HRTF\"
            \n DistanceModel\n: \"linear\", \"inverse\", or \"exponential\"

            \n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"

            Connect an audio sorce

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Input source

            \n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7668,"description":"

            Set the X,Y,Z position of the Panner

            \n","itemtype":"method","name":"set","params":[{"name":"xVal","description":"","type":"Number"},{"name":"yVal","description":"","type":"Number"},{"name":"zVal","description":"","type":"Number"},{"name":"time","description":"","type":"Number"}],"return":{"description":"Updated x, y, z values as an array","type":"Array"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7687,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionX","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7694,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionY","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7701,"description":"

            Getter and setter methods for position coordinates

            \n","itemtype":"method","name":"positionZ","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7753,"description":"

            Set the X,Y,Z position of the Panner

            \n","itemtype":"method","name":"orient","params":[{"name":"xVal","description":"","type":"Number"},{"name":"yVal","description":"","type":"Number"},{"name":"zVal","description":"","type":"Number"},{"name":"time","description":"","type":"Number"}],"return":{"description":"Updated x, y, z values as an array","type":"Array"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7772,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientX","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7779,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientY","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7786,"description":"

            Getter and setter methods for orient coordinates

            \n","itemtype":"method","name":"orientZ","return":{"description":"updated coordinate value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7838,"description":"

            Set the rolloff factor and max distance

            \n","itemtype":"method","name":"setFalloff","params":[{"name":"maxDistance","description":"","type":"Number","optional":true},{"name":"rolloffFactor","description":"","type":"Number","optional":true}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7852,"description":"

            Maxium distance between the source and the listener

            \n","itemtype":"method","name":"maxDist","params":[{"name":"maxDistance","description":"","type":"Number"}],"return":{"description":"updated value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7869,"description":"

            How quickly the volume is reduced as the source moves away from the listener

            \n","itemtype":"method","name":"rollof","params":[{"name":"rolloffFactor","description":"","type":"Number"}],"return":{"description":"updated value","type":"Number"},"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7989,"description":"

            The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.

            \n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7999,"description":"

            The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.

            \n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8049,"description":"

            Add delay to an audio signal according to a set\nof delay parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"

            An object that outputs audio

            \n","type":"Object"},{"name":"delayTime","description":"

            Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.

            \n","type":"Number","optional":true},{"name":"feedback","description":"

            sends the delay back through itself\n in a loop that decreases in volume\n each time.

            \n","type":"Number","optional":true},{"name":"lowPass","description":"

            Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.

            \n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8094,"description":"

            Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.

            \n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"

            Time (in seconds) of the delay

            \n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8116,"description":"

            Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop. The default value is 0.5

            \n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"

            0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param

            \n","type":"Number|Object"}],"return":{"description":"Feedback value","type":"Number"},"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"

            Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.

            \n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"

            A lowpass filter will cut off any\n frequencies higher than the filter frequency.

            \n","type":"Number|Object"},{"name":"res","description":"

            Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.

            \n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8170,"description":"

            Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.

            \n","itemtype":"method","name":"setType","params":[{"name":"type","description":"

            'pingPong' (1) or 'default' (0)

            \n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8223,"description":"

            Set the output level of the delay effect.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8234,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8242,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8409,"description":"

            Connect a source to the reverb, and assign reverb parameters.

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"},{"name":"seconds","description":"

            Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.

            \n","type":"Number","optional":true},{"name":"decayRate","description":"

            Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.

            \n","type":"Number","optional":true},{"name":"reverse","description":"

            Play the reverb backwards or forwards.

            \n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8446,"description":"

            Set the reverb settings. Similar to .process(), but without\nassigning a new input.

            \n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"

            Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.

            \n","type":"Number","optional":true},{"name":"decayRate","description":"

            Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.

            \n","type":"Number","optional":true},{"name":"reverse","description":"

            Play the reverb backwards or forwards.

            \n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8482,"description":"

            Set the output level of the reverb effect.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8493,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8501,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8621,"description":"

            Internally, the p5.Convolver uses the a\n\nWeb Audio Convolver Node.

            \n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8645,"description":"

            If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the toggleImpulse(id) method.

            \n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8737,"description":"

            Connect a source to the convolver.

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"}],"example":["\n
            \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n\n
            "],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8786,"description":"

            Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the .impulses array. Previous\nimpulses can be accessed with the .toggleImpulse(id)\nmethod.

            \n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function (optional)

            \n","type":"Function"},{"name":"errorCallback","description":"

            function (optional)

            \n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8808,"description":"

            Similar to .addImpulse, except that the .impulses\nArray is reset to save memory. A new .impulses\narray is created with this impulse as the only item.

            \n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function (optional)

            \n","type":"Function"},{"name":"errorCallback","description":"

            function (optional)

            \n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8831,"description":"

            If you have used .addImpulse() to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the .impulses Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the .impulses\n Array (Number).
            \nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an .audioBuffer (type:\nWeb Audio \nAudioBuffer) and a .name, a String that corresponds\nwith the original filename.

            \n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"

            Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).

            \n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8885,"description":"

            Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.

            \n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"

            path to a sound file

            \n","type":"String"},{"name":"callback","description":"

            function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.

            \n","type":"Function","optional":true},{"name":"errorCallback","description":"

            function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.

            \n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n
            \nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n
            "],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9084,"description":"

            Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9173,"description":"

            Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.

            \n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9263,"description":"

            Set the tempo of this part, in Beats Per Minute.

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9278,"description":"

            Returns the tempo, in Beats Per Minute, of this part.

            \n","itemtype":"method","name":"getBPM","return":{"description":"","type":"Number"},"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9291,"description":"

            Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.

            \n","itemtype":"method","name":"start","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9311,"description":"

            Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.

            \n","itemtype":"method","name":"loop","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9333,"description":"

            Tell the part to stop looping.

            \n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9349,"description":"

            Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.

            \n","itemtype":"method","name":"stop","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9363,"description":"

            Pause the part. Playback will resume\nfrom the current step.

            \n","itemtype":"method","name":"pause","params":[{"name":"time","description":"

            seconds from now

            \n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9379,"description":"

            Add a p5.Phrase to this Part.

            \n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"

            reference to a p5.Phrase

            \n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9406,"description":"

            Remove a phrase from this part, based on the name it was\ngiven when it was created.

            \n","itemtype":"method","name":"removePhrase","params":[{"name":"phraseName","description":"","type":"String"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9424,"description":"

            Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.

            \n","itemtype":"method","name":"getPhrase","params":[{"name":"phraseName","description":"","type":"String"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9442,"description":"

            Find all sequences with the specified name, and replace their patterns with the specified array.

            \n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"

            Array of values to pass into the callback\n at each step of the phrase.

            \n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9473,"description":"

            Set the function that will be called at every step. This will clear the previous function.

            \n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"

            The name of the callback\n you want to fire\n on every beat/tatum.

            \n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9542,"description":"

            Start playback of the score.

            \n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9555,"description":"

            Stop playback of the score.

            \n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9569,"description":"

            Pause playback of the score.

            \n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9581,"description":"

            Loop playback of the score.

            \n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9594,"description":"

            Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.

            \n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9628,"description":"

            Set the tempo for all parts in the score

            \n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"

            Beats Per Minute

            \n","type":"Number"},{"name":"rampTime","description":"

            Seconds from now

            \n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9729,"description":"

            Getters and Setters, setting any paramter will result in a change in the clock's\nfrequency, that will be reflected after the next callback\nbeats per minute (defaults to 60)

            \n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9750,"description":"

            number of quarter notes in a measure (defaults to 4)

            \n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9770,"description":"

            length of the loops interval

            \n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9787,"description":"

            how many times the callback has been called so far

            \n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9800,"description":"

            musicalTimeMode uses Tone.Time convention\ntrue if string, false if number

            \n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9808,"description":"

            musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string

            \n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9816,"description":"

            Set a limit to the number of loops to play. defaults to Infinity

            \n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9826,"description":"

            Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded

            \n

            The callback should only be called until maxIterations is reached

            \n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9841,"description":"

            Start the loop

            \n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"

            schedule a starting time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9860,"description":"

            Stop the loop

            \n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"

            schedule a stopping time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9878,"description":"

            Pause the loop

            \n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"

            schedule a pausing time

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9896,"description":"

            Synchronize loops. Use this method to start two or more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)

            \n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"

            a p5.SoundLoop to sync with

            \n","type":"Object"},{"name":"timeFromNow","description":"

            Start the loops in sync after timeFromNow seconds

            \n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10068,"description":"

            The p5.Compressor is built with a Web Audio Dynamics Compressor Node\n

            \n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10084,"description":"

            Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams

            \n","itemtype":"method","name":"process","params":[{"name":"src","description":"

            Sound source to be connected

            \n","type":"Object"},{"name":"attack","description":"

            The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number","optional":true},{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number","optional":true},{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number","optional":true},{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number","optional":true},{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10112,"description":"

            Set the paramters of a compressor.

            \n","itemtype":"method","name":"set","params":[{"name":"attack","description":"

            The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number"},{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number"},{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number"},{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number"},{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10152,"description":"

            Get current attack or set value w/ time ramp

            \n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"

            Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10178,"description":"

            Get current knee or set value w/ time ramp

            \n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"

            A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10204,"description":"

            Get current ratio or set value w/ time ramp

            \n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"

            The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20

            \n","type":"Number","optional":true},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10228,"description":"

            Get current threshold or set value w/ time ramp

            \n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"

            The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0

            \n","type":"Number"},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10252,"description":"

            Get current release or set value w/ time ramp

            \n","itemtype":"method","name":"release","params":[{"name":"release","description":"

            The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1

            \n","type":"Number"},{"name":"time","description":"

            Assign time value to schedule the change in value

            \n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10277,"description":"

            Return the current reduction value

            \n","itemtype":"method","name":"reduction","return":{"description":"Value of the amount of gain reduction that is applied to the signal","type":"Number"},"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10419,"description":"

            isDetected is set to true when a peak is detected.

            \n","itemtype":"attribute","name":"isDetected","type":"Boolean","default":"false","class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10432,"description":"

            The update method is run in the draw loop.

            \n

            Accepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.

            \n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"

            A p5.FFT object

            \n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10470,"description":"

            onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.

            \n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"

            Name of a function that will\n be called when a peak is\n detected.

            \n","type":"Function"},{"name":"val","description":"

            Optional value to pass\n into the function when\n a peak is detected.

            \n","type":"Object","optional":true}],"example":["\n
            \nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 0;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100,100);\n textAlign(CENTER);\n\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n setupSound();\n\n // when a beat is detected, call triggerBeat()\n peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n text('click to play', width/2, height/2);\n\n fft.analyze();\n peakDetect.update(fft);\n\n ellipseWidth *= 0.95;\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n cnv.mouseClicked( function() {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n });\n}\n
            "],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10676,"description":"

            Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.

            \n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"

            p5.sound object or a web audio unit\n that outputs sound

            \n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10703,"description":"

            Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.

            \n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"

            p5.SoundFile

            \n","type":"p5.SoundFile"},{"name":"duration","description":"

            Time (in seconds)

            \n","type":"Number","optional":true},{"name":"callback","description":"

            The name of a function that will be\n called once the recording completes

            \n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10739,"description":"

            Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.

            \n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10864,"description":"

            The p5.Distortion is built with a\n\nWeb Audio WaveShaper Node.

            \n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10883,"description":"

            Process a sound source, optionally specify amount and oversample values.

            \n","itemtype":"method","name":"process","params":[{"name":"amount","description":"

            Unbounded distortion amount.\n Normal values range from 0-1.

            \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

            'none', '2x', or '4x'.

            \n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10900,"description":"

            Set the amount and oversample of the waveshaper distortion.

            \n","itemtype":"method","name":"set","params":[{"name":"amount","description":"

            Unbounded distortion amount.\n Normal values range from 0-1.

            \n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"

            'none', '2x', or '4x'.

            \n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10923,"description":"

            Return the distortion amount, typically between 0-1.

            \n","itemtype":"method","name":"getAmount","return":{"description":"Unbounded distortion amount.\n Normal values range from 0-1.","type":"Number"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10937,"description":"

            Return the oversampling.

            \n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11055,"description":"

            Connect a source to the gain node.

            \n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"

            p5.sound / Web Audio object with a sound\n output.

            \n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11070,"description":"

            Send output to a p5.sound or web audio object

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11084,"description":"

            Disconnect all output.

            \n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11098,"description":"

            Set the output level of the gain node.

            \n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"

            amplitude between 0 and 1.0

            \n","type":"Number"},{"name":"rampTime","description":"

            create a fade that lasts rampTime

            \n","type":"Number","optional":true},{"name":"timeFromNow","description":"

            schedule this event to happen\n seconds from now

            \n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11181,"description":"

            Connect to p5 objects or Web Audio Nodes

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"","type":"Object"}],"class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"

            Disconnect from soundOut

            \n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11322,"description":"

            Getters and Setters

            \n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11328,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11333,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11338,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11379,"description":"

            Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.

            \n","itemtype":"method","name":"play","params":[{"name":"note","description":"

            the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See \n Tone. Defaults to 440 hz.

            \n","type":"String | Number"},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope. Defaults to 0.15 seconds.

            \n","type":"Number","optional":true}],"example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n
            \n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11431,"description":"

            Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.

            \n","params":[{"name":"note","description":"

            the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See \n Tone. Defaults to 440 hz

            \n","type":"String | Number"},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n
            "],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11478,"description":"

            Trigger the release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","params":[{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n
            \nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n
            "],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11516,"description":"

            Set values like a traditional\n\nADSR envelope\n.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number"},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11544,"description":"

            MonoSynth amp

            \n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"

            desired volume

            \n","type":"Number"},{"name":"rampTime","description":"

            Time to reach new volume

            \n","type":"Number","optional":true}],"return":{"description":"new volume value","type":"Number"},"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11564,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11578,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11592,"description":"

            Get rid of the MonoSynth and free up its resources / memory.

            \n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11742,"description":"

            An object that holds information about which notes have been played and\nwhich notes are currently being played. New notes are added as keys\non the fly. While a note has been attacked, but not released, the value of the\nkey is the audiovoice which is generating that note. When notes are released,\nthe value of the key becomes undefined.

            \n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11755,"description":"

            A PolySynth must have at least 1 voice, defaults to 8

            \n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11761,"description":"

            Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.

            \n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11800,"description":"

            Play a note by triggering noteAttack and noteRelease with sustain time

            \n","itemtype":"method","name":"play","params":[{"name":"note","description":"

            midi note to play (ranging from 0 to 127 - 60 being a middle C)

            \n","type":"Number","optional":true},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds) at which to play

            \n","type":"Number","optional":true},{"name":"sustainTime","description":"

            time to sustain before releasing the envelope

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n
            "],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11849,"description":"

            noteADSR sets the envelope for a specific note that has just been triggered.\nUsing this method modifies the envelope of whichever audiovoice is being used\nto play the desired note. The envelope should be reset before noteRelease is called\nin order to prevent the modified envelope from being used on other notes.

            \n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"

            Midi note on which ADSR should be set.

            \n","type":"Number","optional":true},{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number","optional":true},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11881,"description":"

            Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.

            \n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"

            Time (in seconds before envelope\n reaches Attack Level

            \n","type":"Number","optional":true},{"name":"decayTime","description":"

            Time (in seconds) before envelope\n reaches Decay/Sustain Level

            \n","type":"Number","optional":true},{"name":"susRatio","description":"

            Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.

            \n","type":"Number","optional":true},{"name":"releaseTime","description":"

            Time in seconds from now (defaults to 0)

            \n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11909,"description":"

            Trigger the Attack, and Decay portion of a MonoSynth.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.

            \n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"

            midi note on which attack should be triggered.

            \n","type":"Number","optional":true},{"name":"velocity","description":"

            velocity of the note to play (ranging from 0 to 1)/

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time from now (in seconds)

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n
            "],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12021,"description":"

            Trigger the Release of an AudioVoice note. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.

            \n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"

            midi note on which attack should be triggered.\n If no value is provided, all notes will be released.

            \n","type":"Number","optional":true},{"name":"secondsFromNow","description":"

            time to trigger the release

            \n","type":"Number","optional":true}],"example":["\n
            \nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n
            \n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12105,"description":"

            Connect to a p5.sound / Web Audio object.

            \n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"

            A p5.sound or Web Audio object

            \n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12119,"description":"

            Disconnect all outputs

            \n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":12133,"description":"

            Get rid of the MonoSynth and free up its resources / memory.

            \n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:123"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:223"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:323"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:464"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:1018"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/sketch_reader.js:243"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/sketch_reader.js:268"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/validate_params.js:336"},{"message":"unknown tag: alt","line":" src/core/environment.js:590"},{"message":"unknown tag: alt","line":" src/core/environment.js:621"},{"message":"unknown tag: alt","line":" src/core/environment.js:652"},{"message":"unknown tag: alt","line":" src/core/environment.js:680"},{"message":"unknown tag: alt","line":" src/core/environment.js:708"},{"message":"unknown tag: alt","line":" src/core/environment.js:708"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:1050"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:1069"},{"message":"unknown tag: alt","line":" src/core/environment.js:1199"},{"message":"replacing incorrect tag: function with method","line":" src/core/internationalization.js:105"},{"message":"replacing incorrect tag: returns with return","line":" src/core/internationalization.js:105"},{"message":"unknown tag: alt","line":" src/core/main.js:41"},{"message":"unknown tag: alt","line":" src/core/main.js:82"},{"message":"unknown tag: alt","line":" src/core/main.js:113"},{"message":"unknown tag: alt","line":" src/core/main.js:450"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:56"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:87"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:94"},{"message":"unknown tag: name","line":" src/core/p5.Element.js:102"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:966"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:83"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:135"},{"message":"unknown tag: alt","line":" src/core/rendering.js:15"},{"message":"unknown tag: alt","line":" src/core/rendering.js:166"},{"message":"unknown tag: alt","line":" src/core/rendering.js:232"},{"message":"unknown tag: alt","line":" src/core/rendering.js:253"},{"message":"unknown tag: alt","line":" src/core/rendering.js:316"},{"message":"unknown tag: alt","line":" src/core/rendering.js:391"},{"message":"unknown tag: alt","line":" src/core/rendering.js:461"},{"message":"unknown tag: alt","line":" src/core/rendering.js:545"},{"message":"unknown tag: alt","line":" src/core/structure.js:9"},{"message":"unknown tag: alt","line":" src/core/structure.js:82"},{"message":"replacing incorrect tag: returns with return","line":" src/core/structure.js:133"},{"message":"unknown tag: alt","line":" src/core/structure.js:133"},{"message":"unknown tag: alt","line":" src/core/structure.js:192"},{"message":"unknown tag: alt","line":" src/core/structure.js:290"},{"message":"unknown tag: alt","line":" src/core/structure.js:391"},{"message":"unknown tag: alt","line":" src/core/structure.js:494"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2617"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2703"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2874"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:2961"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:3099"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:761"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:794"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:828"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:871"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:114"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:151"},{"message":"unknown tag: name","line":" src/image/p5.Image.js:198"},{"message":"replacing incorrect tag: returns with return","line":" src/image/p5.Image.js:299"},{"message":"replacing incorrect tag: returns with return","line":" src/image/pixels.js:706"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:683"},{"message":"unknown tag: name","line":" src/io/p5.Table.js:43"},{"message":"unknown tag: name","line":" src/io/p5.Table.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:1048"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:113"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:120"},{"message":"unknown tag: name","line":" src/math/p5.Vector.js:127"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:769"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:784"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:799"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:814"},{"message":"unknown tag: name","line":" src/typography/p5.Font.js:51"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/3d_primitives.js:266"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/3d_primitives.js:520"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/GeometryBuilder.js:122"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:173"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:429"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:184"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Framebuffer.js:702"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:733"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:794"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:952"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1150"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1284"},{"message":"unknown tag: alt","line":" src/webgl/p5.Framebuffer.js:1326"},{"message":"unknown tag: memberof","line":" src/webgl/p5.Geometry.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:80"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Geometry.js:357"},{"message":"unknown tag: alt","line":" src/webgl/p5.Geometry.js:472"},{"message":"unknown tag: alt","line":" src/webgl/p5.Geometry.js:472"},{"message":"param name missing: {Number}","line":" src/webgl/p5.Matrix.js:745"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:764"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:779"},{"message":"param name missing: {p5.Vector}","line":" src/webgl/p5.Matrix.js:797"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:19"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:118"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:318"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:389"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:700"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:718"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:945"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:986"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:1301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:1415"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.js:2046"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.Shader.js:211"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:116"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:160"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:192"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:204"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:253"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:267"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:406"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:406"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:474"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:489"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:574"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:2381"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:2381"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:2882"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4271"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4360"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4386"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4460"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:6280"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:8116"},{"message":"Missing item type\nConversions adapted from .\n\nIn these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.","line":" src/color/color_conversion.js:8"},{"message":"Missing item type\nConvert an HSBA array to HSLA.","line":" src/color/color_conversion.js:18"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:44"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:99"},{"message":"Missing item type\nConvert an HSLA array to RGBA.\n\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.","line":" src/color/color_conversion.js:122"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:186"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:225"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:14"},{"message":"Missing item type\nThese regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.\n\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.","line":" src/color/p5.Color.js:168"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:181"},{"message":"Missing item type\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.","line":" src/color/p5.Color.js:789"},{"message":"Missing item type\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.","line":" src/color/p5.Color.js:820"},{"message":"Missing item type\nFor a number of different inputs, returns a color formatted as [r, g, b, a]\narrays, with each component normalized between 0 and 1.","line":" src/color/p5.Color.js:838"},{"message":"Missing item type\nFor HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.","line":" src/color/p5.Color.js:1048"},{"message":"Missing item type","line":" src/core/friendly_errors/fes_core.js:1"},{"message":"Missing item type\nPrints out all the colors in the color pallete with white text.\nFor color blindness testing.","line":" src/core/friendly_errors/fes_core.js:932"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.js:1"},{"message":"Missing item type","line":" src/core/friendly_errors/sketch_reader.js:1"},{"message":"Missing item type","line":" src/core/friendly_errors/stacktrace.js:1"},{"message":"Missing item type\nGiven an Error object, extract the most information from it.","line":" src/core/friendly_errors/stacktrace.js:32"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nThis function does 3 things:\n\n 1. Bounds the desired start/stop angles for an arc (in radians) so that:\n\n 0 <= start < TWO_PI ; start <= stop < start + TWO_PI\n\n This means that the arc rendering functions don't have to be concerned\n with what happens if stop is smaller than start, or if the arc 'goes\n round more than once', etc.: they can just start at start and increase\n until stop and the correct arc will be drawn.\n\n 2. Optionally adjusts the angles within each quadrant to counter the naive\n scaling of the underlying ellipse up from the unit circle. Without\n this, the angles become arbitrary when width != height: 45 degrees\n might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\n a 'tall' ellipse.\n\n 3. Flags up when start and stop correspond to the same place on the\n underlying ellipse. This is useful if you want to do something special\n there (like rendering a whole ellipse instead).","line":" src/core/shape/2d_primitives.js:16"},{"message":"Missing item type\nReturns the current framerate.","line":" src/core/environment.js:421"},{"message":"Missing item type\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second.\n\nCalling `frameRate()` with no arguments returns the current frame rate.","line":" src/core/environment.js:431"},{"message":"Missing item type","line":" src/core/helpers.js:1"},{"message":"Missing item type\n_globalInit\n\nTODO: ???\nif sketch is on window\nassume \"global\" mode\nand instantiate p5 automatically\notherwise do nothing","line":" src/core/init.js:4"},{"message":"Missing item type\nThis is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.","line":" src/core/internationalization.js:30"},{"message":"Missing item type\nSet up our translation function, with loaded languages","line":" src/core/internationalization.js:126"},{"message":"Missing item type\nReturns a list of languages we have translations loaded for","line":" src/core/internationalization.js:171"},{"message":"Missing item type\nReturns the current language selected for translation","line":" src/core/internationalization.js:178"},{"message":"Missing item type\nSets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.","line":" src/core/internationalization.js:185"},{"message":"Missing item type","line":" src/core/legacy.js:1"},{"message":"Missing item type","line":" src/core/p5.Element.js:87"},{"message":"Missing item type","line":" src/core/p5.Element.js:966"},{"message":"Missing item type","line":" src/core/p5.Element.js:985"},{"message":"Missing item type","line":" src/core/p5.Element.js:1002"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:1015"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:120"},{"message":"Missing item type\nHelper function to check font type (system or otf)","line":" src/core/p5.Renderer.js:468"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:520"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:6"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee ecridge.com/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:535"},{"message":"Missing item type\nPrints a message to the web browser's console.\n\nThe console\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a `console.log()` statement while studying how a section of\ncode works:\n\n\nif (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n // Game logic.\n}\n\n\n`console.error()` is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:\n\n\n// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n// Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n","line":" src/core/reference.js:2024"},{"message":"Missing item type\nargs[0] is expected to be renderer\nargs[1] is expected to be canvas","line":" src/core/rendering.js:304"},{"message":"Missing item type\nprivate helper function to handle the user passing in objects\nduring construction or calls to create()","line":" src/data/p5.TypedDict.js:198"},{"message":"Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type","line":" src/data/p5.TypedDict.js:388"},{"message":"Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type","line":" src/data/p5.TypedDict.js:430"},{"message":"Missing item type\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'","line":" src/data/p5.TypedDict.js:543"},{"message":"Missing item type\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'","line":" src/data/p5.TypedDict.js:607"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:206"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:221"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:477"},{"message":"Missing item type","line":" src/dom/dom.js:786"},{"message":"Missing item type","line":" src/dom/dom.js:2049"},{"message":"Missing item type","line":" src/dom/dom.js:2192"},{"message":"Missing item type","line":" src/dom/dom.js:2240"},{"message":"Missing item type","line":" src/dom/dom.js:4062"},{"message":"Missing item type","line":" src/dom/dom.js:5074"},{"message":"Missing item type","line":" src/dom/dom.js:5145"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:120"},{"message":"Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.","line":" src/events/keyboard.js:785"},{"message":"Missing item type\nThe _areDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.","line":" src/events/keyboard.js:911"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:1"},{"message":"Missing item type\nReturns the pixel buffer for a canvas.","line":" src/image/filters.js:22"},{"message":"Missing item type\nReturns a 32-bit number containing ARGB data at the ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:65"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:88"},{"message":"Missing item type\nReturns the ImageData object for a canvas.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ImageData","line":" src/image/filters.js:109"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:130"},{"message":"Missing item type\nApplys a filter function to a canvas.\n\nThe difference between this and the actual filter functions defined below\nis that the filter functions generally modify the pixel buffer but do\nnot actually put that data back to the canvas (where it would actually\nupdate what is visible). By contrast this method does make the changes\nactually visible in the canvas.\n\nThe apply method is the method that callers of this module would generally\nuse. It has been separated from the actual filters to support an advanced\nuse case of creating a filter chain that executes without actually updating\nthe canvas in between everystep.","line":" src/image/filters.js:145"},{"message":"Missing item type\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/","line":" src/image/filters.js:200"},{"message":"Missing item type\nConverts any colors in the image to grayscale equivalents.\nNo parameter is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/","line":" src/image/filters.js:233"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:256"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:272"},{"message":"Missing item type\nLimits each channel of the image to the number of colors specified as\nthe parameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n\nAdapted from java based processing implementation","line":" src/image/filters.js:287"},{"message":"Missing item type\nIncreases the bright areas in an image.","line":" src/image/filters.js:319"},{"message":"Missing item type\nReduces the bright areas in an image.\nSimilar to `dilate()`, but updates the output color based on the lowest luminance value.","line":" src/image/filters.js:411"},{"message":"Missing item type\nThis module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.","line":" src/image/image.js:8"},{"message":"Missing item type\nHelper function for loading GIF-based images","line":" src/image/loading_displaying.js:639"},{"message":"Missing item type","line":" src/image/loading_displaying.js:761"},{"message":"Missing item type","line":" src/image/loading_displaying.js:794"},{"message":"Missing item type","line":" src/image/loading_displaying.js:828"},{"message":"Missing item type\nValidates clipping params. Per drawImage spec sWidth and sHight cannot be\nnegative or greater than image intrinsic width and height","line":" src/image/loading_displaying.js:871"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:1384"},{"message":"Missing item type\nThis module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.","line":" src/image/p5.Image.js:9"},{"message":"Missing item type\nHelper function for animating GIF-based images with time","line":" src/image/p5.Image.js:342"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:373"},{"message":"Missing item type\nGenerate a blob of file data as a url to prepare for download.\nAccepts an array of data, a filename, and an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.","line":" src/io/files.js:1772"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1840"},{"message":"Missing item type\nReturns true if the browser is Safari, false if not.\nSafari makes trouble for downloading files.","line":" src/io/files.js:1873"},{"message":"Missing item type\nHelper function, a callback for download that deletes\nan invisible anchor element from the DOM once the file\nhas been automatically downloaded.","line":" src/io/files.js:1884"},{"message":"Missing item type\nTable Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\nhere.\nTo load files, use the loadTable method.\nTo save tables to your computer, use the save method\n or the saveTable method.\n\nPossible options include:\n
              \n
            • csv - parse the table as comma-separated values\n
            • tsv - parse the table as tab-separated values\n
            • header - this table has a header (title) row\n
            ","line":" src/io/p5.Table.js:9"},{"message":"Missing item type","line":" src/math/p5.Vector.js:435"},{"message":"Missing item type","line":" src/math/p5.Vector.js:449"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:3431"},{"message":"Missing item type\nRotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.","line":" src/math/p5.Vector.js:3487"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:3516"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:3573"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:3587"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:3601"},{"message":"Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.","line":" src/math/p5.Vector.js:3616"},{"message":"Missing item type\nPerforms spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.","line":" src/math/p5.Vector.js:3646"},{"message":"Missing item type\nCalculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)","line":" src/math/p5.Vector.js:3678"},{"message":"Missing item type\nCalculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (x\\*x + y\\*y + z\\*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.","line":" src/math/p5.Vector.js:3692"},{"message":"Missing item type\nNormalize the vector to length 1 (make it a unit vector).","line":" src/math/p5.Vector.js:3708"},{"message":"Missing item type\nLimit the magnitude of the vector to the value used for the max\nparameter.","line":" src/math/p5.Vector.js:3734"},{"message":"Missing item type\nSet the magnitude of the vector to the value used for the len\nparameter.","line":" src/math/p5.Vector.js:3762"},{"message":"Missing item type\nCalculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using createVector()\nwill take the current angleMode into\nconsideration, and give the angle in radians or degrees accordingly.","line":" src/math/p5.Vector.js:3790"},{"message":"Missing item type\nCalculates and returns the angle between two vectors. This function will take\nthe angleMode on v1 into consideration, and\ngive the angle in radians or degrees accordingly.","line":" src/math/p5.Vector.js:3806"},{"message":"Missing item type\nReflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.","line":" src/math/p5.Vector.js:3822"},{"message":"Missing item type\nReturn a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy()\nmethod to copy into your own vector.","line":" src/math/p5.Vector.js:3850"},{"message":"Missing item type\nEquality check against a p5.Vector","line":" src/math/p5.Vector.js:3866"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:455"},{"message":"Missing item type\nReturns the set of opentype glyphs for the supplied string.\n\nNote that there is not a strict one-to-one mapping between characters\nand glyphs, so the list of returned glyphs can be larger or smaller\n than the length of the given string.","line":" src/typography/p5.Font.js:395"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:410"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:1359"},{"message":"Missing item type\nDraws a point, a coordinate in space at the dimension of one pixel,\ngiven x, y and z coordinates. The color of the point is determined\nby the current stroke, while the point size is determined by current\nstroke weight.","line":" src/webgl/3d_primitives.js:2411"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:2923"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:4"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:21"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:31"},{"message":"Missing item type","line":" src/webgl/GeometryBuilder.js:43"},{"message":"Missing item type\nAdds geometry from the renderer's immediate mode into the builder's\ncombined geometry.","line":" src/webgl/GeometryBuilder.js:80"},{"message":"Missing item type\nAdds geometry from the renderer's retained mode into the builder's\ncombined geometry.","line":" src/webgl/GeometryBuilder.js:114"},{"message":"Missing item type\nCleans up the state of the renderer and returns the combined geometry that\nwas built.","line":" src/webgl/GeometryBuilder.js:122"},{"message":"Missing item type\nKeeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.","line":" src/webgl/GeometryBuilder.js:133"},{"message":"Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1","line":" src/webgl/loading.js:544"},{"message":"Missing item type\nSTL files can be of two types, ASCII and Binary,\n\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.","line":" src/webgl/loading.js:688"},{"message":"Missing item type\nThis function checks if the file is in ASCII format or in Binary format\n\nIt is done by searching keyword `solid` at the start of the file.\n\nAn ASCII STL data must begin with `solid` as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the `d` are known to be\nplentiful. So, check the first 5 bytes for `solid`.\n\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for `solid` to start anywhere after those prefixes.","line":" src/webgl/loading.js:715"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:742"},{"message":"Missing item type\nThis function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\n\nCurrently there is no support for the colors provided in STL files.","line":" src/webgl/loading.js:754"},{"message":"Missing item type\nASCII STL file starts with `solid 'nameOfFile'`\nThen contain the normal of the face, starting with `facet normal`\nNext contain a keyword indicating the start of face vertex, `outer loop`\nNext comes the three vertex, starting with `vertex x y z`\nVertices ends with `endloop`\nFace ends with `endfacet`\nNext face starts with `facet normal`\nThe end of the file is indicated by `endsolid`","line":" src/webgl/loading.js:842"},{"message":"Missing item type","line":" src/webgl/material.js:2330"},{"message":"Missing item type","line":" src/webgl/material.js:2370"},{"message":"Missing item type\nAn internal class to store data that will be sent to a p5.RenderBuffer.\nThose need to eventually go into a Float32Array, so this class provides a\nvariable-length array container backed by a Float32Array so that it can be\nsent to the GPU without allocating a new array each frame.\n\nLike a C++ vector, its fixed-length Float32Array backing its contents will\ndouble in size when it goes over its capacity.","line":" src/webgl/p5.DataArray.js:3"},{"message":"Missing item type\nReturns a Float32Array window sized to the exact length of the data","line":" src/webgl/p5.DataArray.js:35"},{"message":"Missing item type\nA \"soft\" clear, which keeps the underlying storage size the same, but\nempties the contents of its dataArray()","line":" src/webgl/p5.DataArray.js:42"},{"message":"Missing item type\nCan be used to scale a DataArray back down to fit its contents.","line":" src/webgl/p5.DataArray.js:50"},{"message":"Missing item type\nA full reset, which allocates a new underlying Float32Array at its initial\nlength","line":" src/webgl/p5.DataArray.js:63"},{"message":"Missing item type\nAdds values to the DataArray, expanding its internal storage to\naccommodate the new items.","line":" src/webgl/p5.DataArray.js:72"},{"message":"Missing item type\nReturns a copy of the data from the index `from`, inclusive, to the index\n`to`, exclusive","line":" src/webgl/p5.DataArray.js:82"},{"message":"Missing item type\nReturns a mutable Float32Array window from the index `from`, inclusive, to\nthe index `to`, exclusive","line":" src/webgl/p5.DataArray.js:90"},{"message":"Missing item type\nExpand capacity of the internal storage until it can fit a target size","line":" src/webgl/p5.DataArray.js:98"},{"message":"Missing item type\nChecks the capabilities of the current WebGL environment to see if the\nsettings supplied by the user are capable of being fulfilled. If they\nare not, warnings will be logged and the settings will be changed to\nsomething close that can be fulfilled.","line":" src/webgl/p5.Framebuffer.js:281"},{"message":"Missing item type\nCreates new textures and renderbuffers given the current size of the\nframebuffer.","line":" src/webgl/p5.Framebuffer.js:378"},{"message":"Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThe format and channels asked for by the user hint at what these values\nneed to be, and the WebGL version affects what options are avaiable.\nThis method returns the values for these three properties, given the\nframebuffer's settings.","line":" src/webgl/p5.Framebuffer.js:529"},{"message":"Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThis method takes into account the settings asked for by the user and\nreturns values for these three properties that can be used for the\ntexture storing depth information.","line":" src/webgl/p5.Framebuffer.js:590"},{"message":"Missing item type\nA method that will be called when recreating textures. If the framebuffer\nis auto-sized, it will update its width, height, and density properties.","line":" src/webgl/p5.Framebuffer.js:651"},{"message":"Missing item type\nCalled when the canvas that the framebuffer is attached to resizes. If the\nframebuffer is auto-sized, it will update its textures to match the new\nsize.","line":" src/webgl/p5.Framebuffer.js:665"},{"message":"Missing item type\nCalled when the size of the framebuffer has changed (either by being\nmanually updated or from auto-size updates when its canvas changes size.)\nOld textures and renderbuffers will be deleted, and then recreated with the\nnew size.","line":" src/webgl/p5.Framebuffer.js:678"},{"message":"Missing item type\nGiven a raw texture wrapper, delete its stored texture from WebGL memory,\nand remove it from p5's list of active textures.","line":" src/webgl/p5.Framebuffer.js:719"},{"message":"Missing item type\nCall this befpre updating pixels\nand calling updatePixels\nto replace the content of the framebuffer with the data in the pixels\narray.","line":" src/webgl/p5.Framebuffer.js:1002"},{"message":"Missing item type\nCall this after initially calling \nloadPixels() and updating pixels\nto replace the content of the framebuffer with the data in the pixels\narray.\n\nThis will also clear the depth buffer so that any future drawing done\nafterwards will go on top.","line":" src/webgl/p5.Framebuffer.js:1150"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:702"},{"message":"Missing item type\nConverts each line segment into the vertices and vertex attributes needed\nto turn the line into a polygon on screen. This will include:\n- Two triangles line segment to create a rectangle\n- Two triangles per endpoint to create a stroke cap rectangle. A fragment\n shader is responsible for displaying the appropriate cap style within\n that rectangle.\n- Four triangles per join between adjacent line segments, creating a quad on\n either side of the join, perpendicular to the lines. A vertex shader will\n discard the quad in the \"elbow\" of the join, and a fragment shader will\n display the appropriate join style within the remaining quad.","line":" src/webgl/p5.Geometry.js:719"},{"message":"Missing item type\nAdds the vertices and vertex attributes for two triangles making a rectangle\nfor a straight line segment. A vertex shader is responsible for picking\nproper coordinates on the screen given the centerline positions, the tangent,\nand the side of the centerline each vertex belongs to. Sides follow the\nfollowing scheme:\n\n -1 -1\n o-------------o\n | |\n o-------------o\n 1 1","line":" src/webgl/p5.Geometry.js:857"},{"message":"Missing item type\nAdds the vertices and vertex attributes for two triangles representing the\nstroke cap of a line. A fragment shader is responsible for displaying the\nappropriate cap style within the rectangle they make.\n\nThe lineSides buffer will include the following values for the points on\nthe cap rectangle:\n\n -1 -2\n-----------o---o\n | |\n-----------o---o\n 1 2","line":" src/webgl/p5.Geometry.js:901"},{"message":"Missing item type\nAdds the vertices and vertex attributes for four triangles representing a\njoin between two adjacent line segments. This creates a quad on either side\nof the shared vertex of the two line segments, with each quad perpendicular\nto the lines. A vertex shader will discard all but the quad in the \"elbow\" of\nthe join, and a fragment shader will display the appropriate join style\nwithin the remaining quad.\n\nThe lineSides buffer will include the following values for the points on\nthe join rectangles:\n\n -1 -2\n-------------o----o\n | |\n 1 o----o----o -3\n | | 0 |\n--------o----o |\n 2| 3 |\n | |\n | |","line":" src/webgl/p5.Geometry.js:931"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:953"},{"message":"Missing item type\nEnables and binds the buffers used by shader when the appropriate data exists in geometry.\nMust always be done prior to drawing geometry in WebGL.","line":" src/webgl/p5.RenderBuffer.js:13"},{"message":"Missing item type\nWelcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.","line":" src/webgl/p5.RendererGL.Immediate.js:1"},{"message":"Missing item type\nEnd shape drawing and render vertices to screen.","line":" src/webgl/p5.RendererGL.Immediate.js:191"},{"message":"Missing item type\nCalled from endShape(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.","line":" src/webgl/p5.RendererGL.Immediate.js:274"},{"message":"Missing item type\nCalled from _processVertices(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.","line":" src/webgl/p5.RendererGL.Immediate.js:320"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:408"},{"message":"Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the fill geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:505"},{"message":"Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the stroke geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:552"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:19"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:67"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:120"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:318"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:389"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:535"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:930"},{"message":"Missing item type","line":" src/webgl/p5.RendererGL.js:1415"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:1448"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:1485"},{"message":"Missing item type\nResets all depth information so that nothing previously drawn will\nocclude anything subsequently drawn.","line":" src/webgl/p5.RendererGL.js:1520"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:1542"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:1561"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:2240"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:2251"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:2390"},{"message":"Missing item type","line":" src/webgl/p5.Shader.js:401"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:1"},{"message":"Missing item type\np5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/","line":" lib/addons/p5.sound.js:52"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:401"},{"message":"Missing item type\nDetermine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats","line":" lib/addons/p5.sound.js:536"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:807"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:1040"},{"message":"Missing item type\nThis is a helper function that the p5.SoundFile calls to load\nitself. Accepts a callback (the name of another function)\nas an optional parameter.","line":" lib/addons/p5.sound.js:1542"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:2056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:2604"},{"message":"Missing item type\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:6455"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:6462"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:7009"},{"message":"Missing item type\nInspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n\nUtility function for building an impulse response\nbased on the module parameters.","line":" lib/addons/p5.sound.js:8508"},{"message":"Missing item type\nPrivate method to load a buffer as an Impulse Response,\nassign it to the convolverNode, and add to the Array of .impulses.","line":" lib/addons/p5.sound.js:8659"},{"message":"Missing item type\nmusicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string","line":" lib/addons/p5.sound.js:9808"},{"message":"Missing item type\nDo not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded\n\nThe callback should only be called until maxIterations is reached","line":" lib/addons/p5.sound.js:9826"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:10660"},{"message":"Missing item type\nPrivate method to ensure accurate values of this._voicesInUse\nAny time a new value is scheduled, it is necessary to increment all subsequent\nscheduledValues after attack, and decrement all subsequent\nscheduledValues after release","line":" lib/addons/p5.sound.js:11995"},{"message":"Missing item type","line":" lib/addons/p5.sound.min.js:1"}],"consts":{"LABEL":["p5.describe","p5.describeElement","p5.textOutput","p5.gridOutput"],"FALLBACK":["p5.describe","p5.describeElement","p5.textOutput","p5.gridOutput"],"RGB":["p5.colorMode"],"HSB":["p5.colorMode"],"HSL":["p5.colorMode"],"CHORD":["p5.arc"],"PIE":["p5.arc"],"OPEN":["p5.arc"],"CENTER":["p5.ellipseMode","p5.rectMode","p5.imageMode","p5.textAlign"],"RADIUS":["p5.ellipseMode","p5.rectMode"],"CORNER":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"CORNERS":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"ROUND":["p5.strokeCap","p5.strokeJoin"],"SQUARE":["p5.strokeCap"],"PROJECT":["p5.strokeCap"],"MITER":["p5.strokeJoin"],"BEVEL":["p5.strokeJoin"],"POINTS":["p5.beginShape"],"LINES":["p5.beginShape"],"TRIANGLES":["p5.beginShape"],"TRIANGLE_FAN":["p5.beginShape"],"TRIANGLE_STRIP":["p5.beginShape"],"QUADS":["p5.beginShape"],"QUAD_STRIP":["p5.beginShape"],"TESS":["p5.beginShape"],"CLOSE":["p5.endShape"],"ARROW":["p5.cursor"],"CROSS":["p5.cursor"],"HAND":["p5.cursor"],"MOVE":["p5.cursor"],"TEXT":["p5.cursor"],"WAIT":["p5.cursor"],"P2D":["p5.createCanvas","p5.createGraphics"],"WEBGL":["p5.createCanvas","p5.createGraphics"],"BLEND":["p5.blendMode","p5.Image.blend","p5.blend"],"DARKEST":["p5.blendMode","p5.Image.blend","p5.blend"],"LIGHTEST":["p5.blendMode","p5.Image.blend","p5.blend"],"DIFFERENCE":["p5.blendMode","p5.Image.blend","p5.blend"],"MULTIPLY":["p5.blendMode","p5.Image.blend","p5.blend"],"EXCLUSION":["p5.blendMode","p5.Image.blend","p5.blend"],"SCREEN":["p5.blendMode","p5.Image.blend","p5.blend"],"REPLACE":["p5.blendMode","p5.Image.blend","p5.blend"],"OVERLAY":["p5.blendMode","p5.Image.blend","p5.blend"],"HARD_LIGHT":["p5.blendMode","p5.Image.blend","p5.blend"],"SOFT_LIGHT":["p5.blendMode","p5.Image.blend","p5.blend"],"DODGE":["p5.blendMode","p5.Image.blend","p5.blend"],"BURN":["p5.blendMode","p5.Image.blend","p5.blend"],"ADD":["p5.blendMode","p5.Image.blend","p5.blend"],"REMOVE":["p5.blendMode"],"SUBTRACT":["p5.blendMode"],"AUDIO":["p5.createCapture"],"VIDEO":["p5.createCapture"],"THRESHOLD":["p5.Image.filter","p5.filter"],"GRAY":["p5.Image.filter","p5.filter"],"OPAQUE":["p5.Image.filter","p5.filter"],"INVERT":["p5.Image.filter","p5.filter"],"POSTERIZE":["p5.Image.filter","p5.filter"],"ERODE":["p5.Image.filter","p5.filter"],"DILATE":["p5.Image.filter","p5.filter"],"BLUR":["p5.Image.filter","p5.filter"],"NORMAL":["p5.Image.blend","p5.blend","p5.textStyle","p5.textureMode"],"RADIANS":["p5.angleMode"],"DEGREES":["p5.angleMode"],"LEFT":["p5.textAlign"],"RIGHT":["p5.textAlign"],"TOP":["p5.textAlign"],"BOTTOM":["p5.textAlign"],"BASELINE":["p5.textAlign"],"ITALIC":["p5.textStyle"],"BOLD":["p5.textStyle"],"BOLDITALIC":["p5.textStyle"],"WORD":["p5.textWrap"],"CHAR":["p5.textWrap"],"IMAGE":["p5.textureMode"],"CLAMP":["p5.textureWrap"],"REPEAT":["p5.textureWrap"],"MIRROR":["p5.textureWrap"]}} \ No newline at end of file